Null vs undefined in javascript
Tags: javascript, programming, tutorial, beginners
Published: 2022-06-06 17:44:41

{% embed https://www.youtube.com/embed/HKD13OvGddE %}
_See this and many other articles at [lucaspaganini.com](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?

<p>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 <app-newsletter-modal-trigger>subscribe to the newsletter</app-newsletter-modal-trigger>.</p>

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

```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
```

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

```js
typeof undefined;
//=> "undefined"

typeof null;
//=> "object"
```

## Comparisons

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

```js
// 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.

```js
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.

<p>[Tweet me](https://twitter.com/LucasPaganini) if you have any questions, like if it was helpful, and <app-newsletter-modal-trigger>subscribe</app-newsletter-modal-trigger> if you want more.</p>

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](https://lucaspaganini.com) if you're interested in that.

Have a great day and I'll see you soon

## References

1. [Falsy values](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)
2. [Nullish values](https://developer.mozilla.org/en-US/docs/Glossary/Nullish)
3. [Differences between null and undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null#difference_between_null_and_undefined)
4. [JavaScript primitives](https://developer.mozilla.org/en-US/docs/Glossary/Primitive)