The Difference Between Null and Undefined in JavaScript
Tags: javascript, webdev, programming, beginners
Published: 2021-11-23 14:31:43

Whenever I encounter `null` or `undefined`, I get incredibly confused by how each data type is used in JavaScript.

I mean, what's the difference? Don't they both express the concept of **nothing**?
![Giphy](https://media.giphy.com/media/gCeh1KDeDaxGu8no4A/giphy.gif)

I decided to do some research to gain a deeper understanding of the two data types. It's helpful to have this knowledge so that you can use them correctly when needed. I've also learned that sometimes, the difference between `null` and `undefined` comes up in interviews. 👀

## Introduction 

JavaScript has [7 primitive data types](https://developer.mozilla.org/en-US/docs/Glossary/Primitive), two of which are `null` and `undefined`.

**Null** is an assignment value, which means that you can assign the value `null` to any variable when you want that variable to be *empty*. It is intentionally left blank and will point to an empty value.

```
let hasCat = null;
// nullish
```

**Undefined** is a variable that exists but hasn't been initialized *YET*. Which means that later, I can come back to my variable and assign it a value that it did not have before. So if I declare a variable without a value, it's just considered non-initialized. 

```
let currentJob;
// undefined
```

The way that I understood both of them is that, yes, they are both very similar in that they both don't have a value that you're trying to access. If you were to compare the two in JavaScript, implicitly they're the same because JavaScript considers them both as empty values. But since they are both different data types, if you compare them explicitly, they will result in a falsey value. 

```
null == undefined; 
// truthy

null === undefined;
// falsey

```

## Analogy

Imagine you're moving. You bought a bunch of boxes. You have to pack up your stuff and put them inside of those boxes. But you're disorganized so you forget to label what's in the boxes. You have 5 boxes that are full of things and you have 2 boxes that are left empty. You want to label your boxes but you've already put tape on them, so you tell yourself you'll come back to it later. For now the 5 boxes are TBD. And the 2 boxes are leftover and empty. In code, that would look like:

``` 
let fiveBoxes = undefined;
let twoBoxes = null;
```
The five boxes with a bunch of stuff in them are considered undefined because they have things in them but you don't know what's in it YET. The two boxes left empty are MEANT to not have anything in them.

## Null vs. Undefined

The difference between the two data types is:

### Undefined
- Declared
- Uninitialized
- Engine Assigned

### Null
- Lack of
- Empty/void
- Non-existent
- User assigned

Go to your console, and type in:

```
typeof null
typeof undefined
```

What do you get?

## Conclusion

Null and undefined are not the same. It's important to learn the difference between the two so you avoid any buggy behavior in your code and have a clear understanding of why they exist. It's also cool if you're able to clearly state the difference in an interview too 😉 

Feel free to hit me up on [Twitter](https://twitter.com/zahrakhadijha) if you're still confused! Or if you'd just like to chat.