Null vs undefined in javascript

See this and many other articles at lucaspaganini.com

Introduction

Both null and undefined express the concept of nothing. But they mean nothing in different ways.

undefined is nothing because nobody told it what it should be. null is nothing because someone said it should be nothing. You could say that undefined is implicitly nothing and null is explicitly nothing.

The problem is, you can explicitly set something to undefined. So, why do we need both?

I'm Lucas Paganini, and on this website, we release web development tutorials every two weeks. If that's something you're interested in, please leave a like and subscribe to the newsletter.

Why We Need Both

So, why do we need both?

Ok, let's imagine that your nutrition is not ideal. And your nutritionist, Paula, tells you to eat more fruits, at least 3 fruits per day, she says. She then tells you that it's ok to eat less than 3 fruits some days, but the weekly average should not be less than 3.

So you're tracking your fruits by day.

                        Today
                          👇

| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
| --- | --- | --- | --- | --- | --- | --- | -------------------- |
| 4   | 2   | 1   | 3   | 5   |     |     | Average = 15 / 5 = 3 |

The days in the future are undefined because they didn't happen yet, we don't know what to put in them.

                        Today
                          👇

| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
| --- | --- | --- | --- | --- | --- | --- | -------------------- |
| 4   | 2   | 3   | 1   | 5   |     |     | Average = 15 / 5 = 3 |

                                 👆    👆
                                undefined

Turns out, you forgot to track the last 2 days.

                        Today
                          👇

| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
| --- | --- | --- | --- | --- | --- | --- | ------------------- |
| 4   | 2   | 3   | ?   | ?   |     |     | Average = ? / 5 = ? |

                                 👆    👆
                                undefined

You can't put 0 because that would mess up the weekly average.

                        Today
                          👇

| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
| --- | --- | --- | --- | --- | --- | --- | --------------------- |
| 4   | 2   | 3   | 0   | 0   |     |     | Average = 9 / 5 = 1.8 |

                                 👆    👆
                                undefined

and you also can't leave it blank (undefined) because she's going to think that you forgot to fill it.

                        Today
                          👇

| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
| --- | --- | --- | --- | --- | --- | --- | ------------------- |
| 4   | 2   | 3   |     |     |     |     | Average = 9 / 3 = 3 |

                     ❌    ❌    👆    👆
                      error     undefined

So you put a stroke on that day, letting her know that it should be ignored.

                        Today
                          👇

| Mon | Tue | Wed | Thu | Fri | Sat | Sun |
| --- | --- | --- | --- | --- | --- | --- | ------------------- |
| 4   | 2   | 3   | -   | -   |     |     | Average = 9 / 3 = 3 |

                     👆    👆    👆    👆
                    null  null  undefined

That's null and undefined coexisting.

One would be an error because you forgot to fill it. The other would be valid because you explicitly indicated that it should be ignored.

    ❌

| Thu |
| --- |
|     |

    👆

undefined

    ✅

| Thu |
| --- |
| -   |

    👆

null

typeof()

Another difference is that undefined is a primitive value and a primitive type. If you do typeof undefined, you get "undefined". But null is just a primitive value, if you do typeof null, you get "object".

typeof undefined;
//=> "undefined"

typeof null;
//=> "object"

Comparisons

They're both "falsy", so if you use abstract equality, they are equal.

// Abstract equality
null == undefined;
//=> true

// Strict equality
null === undefined;
//=> false

Nullish

And they're also "nullish", so we can use "nullish" operators on them. I might explore this topic deeper in a future article.

undefined ?? null ?? '' ?? null;
//=> ""

let x = null;
x ??= 'test 1';
x ??= 'test 2';
//=> "test 1"

Conclusion

References for everything I've said are in the references.

[Tweet me](https://twitter.com/LucasPaganini) if you have any questions, like if it was helpful, and subscribe if you want more.

You can also hire us. We are a team of designers and developers, and we can work remotely on your project. Go to lucaspaganini.com if you're interested in that.

Have a great day and I'll see you soon

References

1. Falsy values
2. Nullish values
3. Differences between null and undefined
4. JavaScript primitives