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
Top comments (0)