As Javascript continues to be one of the most misunderstood languages on the planet, of which you could find evidence all over the web. One of my personal favorites is the lightning Wat talk by Gary Bernhardt.

Lately i’ve begun to realize the underlying beauty of the language and felt the need to blog about it.

We’ll start with two primitives, undefined and null. Why do they exist both and what differentiates them?

undefined

The value that gets assigned to unassigned declared variables or to function parameters that are missing.

// 1. Unassigned variable
let variable;
console.log(variable); // => undefined

// 2. Missing function parameter
function greet(name) {
  console.log(name);
}

greet(); // => undefined

null

Represents the intentional absence of a value, it’s a semantical difference.

const notDotted = "googlebe";
console.log(notDotted.match(/\w+\.\w+/)); // => null

Are they equal?

console.log(undefined === null); // => false

So strictly speaking they are different, which we could have expected. But they do have the same meaning:

console.log(undefined == null); // => true

Falsy

Luckily they both evaluate to false, otherwise we would have to write the following code:

let user;

// 💩 If they didn't evaluate to false and without ==
if (user !== null && user !== undefined) user.rename("John", "Doe");

// 💪 With == (type coercion)
if (user != null) user.rename("John", "Doe");

// 🙏 Thanks to falsy
if (user) user.rename("John", "Doe");

Conclusion

Concepts like type coercion and falsy start to make a whole lot of sense if you look at the problems they fix.