Why undefined is the master of all things and null is none
Tags: javascript, webdev, programming, productivity
Published: 2022-03-30 13:41:03

Do you like to repeat yourself? In any way, text, speech, or code?
No right? Me too

To be phenomenal developers, we need to maintain a level of complexity and variations which are more accessible to the devs taking over after us.

Let's start with the difference between **`null`** and **`undefined.`**
When a variable or a property on an object does not have a value, it is **`undefined.`**
Whereas for a variable to be **`null,`** we need to assign it a null value. 
So, when the variable already has no value, there is no point in declaring it again with another type. In the end, both have the same meaning.

So repeating yourself is pointless. 
More often, we will encounter a situation where we need to check for both types, **`null`** and **`undefined,`** to tell them apart from other falsy values like **`0,`** **`''`**, or **`false.`**

```javascript
if (value === undefined || value === null) {
  // Write some fallback code
}
```
What do you think will happen if we check other values in the same "if" statement?
The number combinations explode, right?

A question for you.
What does **`document.querySelector('badtagname')`** return?
If you can't answer, here's the spoiler alert.

*SPOILER!*
It returns **`null.`**
Now, that's a pain. 
But we can bypass it into something like this:

```javascript
const element = document.querySelector('badtagname') || undefined;
```
This way, we prevent any null values from leaking into the rest of the code.
Similarly, other functions that fetch values from the DOM tree can be managed.

Be careful when working with numeric values or booleans. They would convert **`0`** to **`undefined.`**
For cases like that, use **`typeof`**:

```javascript
value = typeof value === 'number' ? value : undefined;
```
My friend had a question while I was figuring this blog out.
I use **`null`** in other languages, and it's familiar to me. 
In addition to that, it's just 4 letters compared to **`undefined.`**
So why not continue using it in JavaScript?

I had only one solution to that.
We as developers need to adopt the ways of the language or tech that we are currently working on. 
**`undefined`** will always be there. 
For example, if we are trying to access some property that might be missing like, **`myObject.iDoNotExist,`**
And if we assign it a **`null`** value, we will create a mixed mess.

JavaScript, since its inception, created both **`null`** and **`undefined`** for some reason, while other languages don't distinguish both. If you have the answer to this, please comment down below!

Well, one last question to be answered, I guess.
Can we use **`null`** in JSON?
The simple answer **`undefined`** type does not exist in JSON structures.

What we can do is hover-assign **` null`** to a property **`{"someProperty": null}.`**
Although, if the property **someProperty** has no value, it's better to exclude it.
Such properties don't give us extra benefits but increase the payload size, which will be sent over a network or stored in a file.

The following code might add an additional check for you to keep using **`undefined.`**
Add it to your .eslintrc:
```javascript
{
  "plugins": [
    "no-null"
  ],
  "rules": {
    "no-null/no-null": 2
  }
}
```
That is all!
If you got some value from this, share it with your friends and let me know if I missed something!