See this and many other articles atlucaspaganini.com

Introduction

Bothnull andundefined express the concept ofnothing. But they meannothing in different ways.

undefined isnothing because nobody told it what it should be.null isnothing because someone said it should benothing. You could say thatundefined is implicitly nothing andnull is explicitly nothing.

The problem is, you can explicitly set something toundefined. 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 areundefined 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 put0 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'snull andundefined 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 thatundefined is a primitive valueand a primitive type. If you dotypeof undefined, you get"undefined". Butnull is just a primitive value, if you dotypeof null, you get"object".

typeofundefined;//=> "undefined"typeofnull;//=> "object"

Comparisons

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

// Abstract equalitynull==undefined;//=> true// Strict equalitynull===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;//=> ""letx=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 tolucaspaganini.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