Null vs undefined in javascript

Null vs undefined in javascript

LinkIntroduction

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.

LinkWhy 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.

markdown
                        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.

markdown
                        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.

markdown
                        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.

markdown
                        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.

markdown
                        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.

markdown
                        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.

markdown
    ❌

| Thu |
| --- |
|     |

    👆

undefined
markdown
    ✅

| Thu |
| --- |
| -   |

    👆

null

Linktypeof()

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".

JavaScript
typeof undefined;
//=> "undefined"

typeof null;
//=> "object"

LinkComparisons

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

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

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

LinkNullish

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

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

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

LinkConclusion

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

LinkReferences

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

Join our Newsletter and be the first to know when I launch a course, post a video or write an article.

This field is required
This field is required