Why undefined is the master of all things and null is none

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.

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:

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:

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:

{
  "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!