To answer this question we will play a game! In this game we'll ask JavaScript what it thinks about null and undefined, Does it think they are same? Or does it not? What do they exactly mean? When to use them? Ugh! Too many questions, Let's find out!

So let's bring in my friend JavaScript first!

Me : Hey JavaScript!🙋🏻‍♂️

let reply = 'Hello ProCode';

Me : We all want to know what do you think about Null and Undefined?

let reply = 'Hello ProCode';

Me : Yes! Hello, Tell us about Null and Undefined!

let reply = 'Hello ProCode';

Me : YEAH! HELLO, Can we go beyond that????

let reply = 'Hello ProCode';

🤦🏻‍♂️ JavaScript can't speak! What to do now😕? WAIT don't go anywhere! I got an idea. Even if JavaScript can not speak by itself, we can make it talk to us, By writing code! Let's see if that works.🤞

Let's think about how do we get to know what JavaScript thinks about null and undefined 🤔. Should we add null or add undefined to something to see how JavaScript interprets it? OH NO WAIT! I got another idea. We can know if JavaScript thinks null and Undefined are equal or not! Here's how👇

console.log(null == undefined);

head over to your console and try the above code and see if JavaScript thinks null and undefined are equal or not!

I am pretty sure you got a true on that one and hey! JavaScript is now talking to us. So it thinks that null is equal to undefined Hmm🤔...is it hiding anything? Well, we can find that out! How? We just have to think crazy! Remember when you think/do crazy stuff, you often break/discover something crazy. Okay, so what can we do now? Let's try adding null with a number, you might think why the hell will anyone do that? Told you, think crazy!

console.log(1 + null);
//  Output
//  1

What should be added to 1 so that we get a 1? 0 right? So does JavaScript interprets null as 0? That's our best guess for now. So now as JavaScript told us that null is equal to undefined, so adding undefined with 1 should also result to 1 right?, Or should it? Let's find out!

console.log(1 + undefined);
//  Output
//  NaN

I knew something was wrong! It was hiding something all this time. Do you feel betrayed? Actually, the fault is our's, How? We were checking for loose equality(==), but we didn't check if null and undefined were strictly equal(===) to each other. Well, let's do that now!

console.log(null === undefined);
//    Output
//    false 

That was expected! Now let's just validate our previous assumption that null is interpreted as 0, so if null is interpreted as 0, what should !null(NOT null) interpret to?

console.log(1 + !null)!
//    Output
//    2

Okay, so that results in 2, which means !null is interpreted as 1 in expressions! Have we seen this kind of behaviour by any other token in JavaScript?

console.log(1 + false);
//    Output
//    1
console.log(1 + true);
//    Output
//    2

Pretty identical to what null does right? But try to not come to any conclusions quite yet, surely, we are starting to get to one, but not yet.

What does the definitions say?

Let's see what the traditional definitions of null and undefined are, and see if that makes any sense.

Null

Null literally means empty, and in terms of coding the meaning is quite the same, EMPTY! Null means the absence of anything. So if a variable contains null, that means it doesn't contain anything, which again can be interpreted as 0. Makes sense?

Undefined

Undefined literally means something which is not defined. In terms of coding if a variable is declared but nothing is assigned to it. The the variable is then undefined. So (1 + undefined) is not a valid expression so it results to NaN(Not a Number).

Let's Clear the Cloud!

Up untill now I was talking about what JavaScript thinks and what the definitions say. But now we are going to talk about how I understand this concept and be confident about it. Few days ago I posted poll in Twitter asking people to rate there understanding about the concept of null and undefined. 6 of them voted, 3 of them had chosen 0% , 2 of them had chosen 33% and only one of them had chosen 100%.

So we can observe that in this small set of 6 people too, the majority aren't really sure about their understanding of null and undefined. So the first step towards complete understanding of something should be to believe that you can understand it. I mean don't be in a fallacy but be confident.

The clear difference! (Season finale)

I use this image to remind myself about what is null and undefined. I think of null as a value that is assigned to a variable. Always Remember JavaScript never assigns null to any variable untill we do it ourselves!. Where as undefined is a state of a variable, which means that when a variable is declared but not defined/initialized with some value(not even null), that state of a variable is called undefined.Or "The variable is undefined" is what we say. And in the picture we can see that the circle never intersect each other, which means that they are in no ways equal. Now you might raise a question that JavaScript resulted/returned true when we loosely checked the equality(==)between null and undefined, so why are they different in every aspect? Well the answer is in the question itself. We loosely checked for equality, and JavaScript has it's own ways of doing that. While executing an expression it tries to type convert null and undefined to some values that it can check equality for.
Let's see how JavaScript might solve the expression null == undefined

Why null == undefined is considered true by JavaScript?

Let's say JavaScript got this expression and it has to evaluate it. First it sees that null is present in the expression, it knows that null means nothing/void so it type converts it to false type, and then in case of undefined it also type converts it to false. And it is left with false == false which is then evaluated to true. But when we check for Strict equality(===), JavaScript doesn't convert the types and so when it checks if type null is strictly equal to type undefined or not, it evaluates it as false. Remember that null and undefined can be interpreted as false type values

Use of null and undefined in mathematical expressions

If you see null and undefined in mathematical expressions, Remember this one Mantra:
"Null means nothing and is a valid value which can be interpreted as 0 in a mathematical expressions, but undefined is the state variable, a state of a variable in a mathematical expression just doesn't make sense so the expression will result to NaN(Not a Number)." Now go try out some expression using null and undefined and see what they results to.

Conclusions

• Null is an assigned value
• Undefined can be considered a state of a variable
• Null and undefined both can be interpreted as false type values
• Null can be interpreted as 0 in a mathematical expression.
• Undefined in a mathematical expression doesn't make sense so it will result to NaN
• I now understand null and undefined
• JavaScript can not talk by itself!

Who am I?

I am a self-taught coder, Coding my life.
If you like my educational blogs Consider buying me a coffee😊 or support me in patreon so that I can continue spreading education for free.

let reply = 'Hmm...🤔That was a nice explaination'

Wait what?? JavaScript!! You can speak??