If you've been using JavaScript for any length of time, you should have encountered these two primitive values: null and undefined.

At first, you might not think much of it. As far as you're concerned, they both represent no value.

As developers we usually only care about whether a variable has a (usable) value or not.

We can check with the code below (this works because both null and undefined equate to falsy in JavaScript boolean operations).

if (x) {
    console.log("x contains a usable value");
} else {
    console.log("x doesn't contain a usable value");
}

So, if they both:

1. Equate to falsy

2. Represent "no value"

What’s the Difference?

Let's look at what mdn has to say.

The null value represents the intentional absence of any object value.

undefined is a primitive value automatically assigned to variables that have just been declared, or to formal arguments for which there are no actual arguments.

It looks like the difference lies in developer intention.

When a developer sets a variable to null, they're explicitly stating that this variable does not have a value.

Whereas a variable is set to undefined automatically. Being undefined means it:

1. Doesn't have a value

2. Doesn't represent an absence of a value

Wait, what? 🤔

Working for Santa

Let's walk through an example to understand this better.

Let's pretend we worked for Santa and we're responsible for preparing the Christmas gifts that Santa will give to kids. But it's two months before Christmas and we don't know whether we'll be filling the box with gifts or leaving it empty.

However, Santa's Box Making company wants us to fill out a form with what this box will contain (so it can determine which box to give us). The options are:

1. Empty

2. Gifts

3. Not sure

The "Not Sure" Option equates to: I don't know what this box will contain, it could be empty, or it could contain a gift. So, I can't definitively say whether it'll be empty or not.

Usefulness?

Now, that we've made the distinction between null and undefined.

This begs the question...

Are there any scenarios where it's useful to differentiate between null and undefined?

let x;

// Code...

switch (x) {
  case null:
    // We know x has been intentionally set to null
    break;
  case undefined:
    // We know x hasn't been defined yet
    break;
  default:
    // Logic... 
    break;
}

I suppose that's for the developer to determine.

---

Bonus: Visual

Another way to visualize this is using sets:

We treat the possible defined values as either empty or non-empty.

Then we treat the possible variable values are either defined or undefined.

---

Note:

1. When this article says the variable doesn't have a value, it means it doesn't have an object value. I'm aware null and undefined are primitive values.

2. In the Santa analogy, the box could continue theoretically remain in the "Not Sure" category forever.