null vs. undefined
I've been coding mainly JavaScript for almost 12 months, and last year some colleague of mine asked “should I use null or undefined?”, when some other pointed something like “you can use both, it doesn't matter”. Since that day I wanted to write this post, because… well… it matters! YES!, null and undefined are not the same in JavaScript!
I understand the reason for someone to make a statement just like that, and it mainly comes from this:
undefined == null; // evaluates to true
or where I see it more often
var foo = undefined; // or = null
if (!foo) {
// evaluates what is inside
}
This particularity caused by coercion, (the ability for a programming language to change a type, to evaluate an expression correctly (it would give another post!!)) leads to such bold statements. Actually, when we type
undefined == null; // evaluates to true
what JavaScript does is basically coerce both values to false (because it's their value as booleans and
== is a comparison, thus JS tries to coerce to booleans to be capable of evaluating a comparison
correctly). So, basically what we're evaluating is something like
false == false;
which is obviously… true. We don't need a degree to understand this one, right?
The tricky part comes when we try again the same evaluation, but with another operator… the mighty === (yes, there are three of them, it isn't a typo). In JavaScript, the three equals comparison disables coercion and you can actually compare the true values, which in this cases, evaluates to false.
undefined === null; // evaluates to false
Because what???…, yes, null and undefined are not the same in JavaScript!!
The true value of these is actually, an “empty” (sorry, I can't find the words) value, and the absence of a defined value. I'll let you reason about which one is which…
Ok, I'll stop bothering you and explain it. When you type something like
var a;
you're not actually defining a value to a (or a type for what it matters). The true value of
a is undefined because its value was never defined! Got it? (un)defined! On another hand, you
could do the following
var a = null;
which in this case would assign a real value to a. This is the main difference between both.
Also, (and this could be more opinionated) I consider that
var a = undefined;
is somehow incorrect in terms of semantics. It works, it does, yes, but undefined is a non-definition of value, which we are actually doing, so… But once again, my opinion… (but since is my post I can and I WILL give my opinion!!)
I hope you understood the difference between null VS undefined, and more than that understood the reason behind the confusion… yes… the evil (and sometimes not so evil) coercion. Follows one neat example where you might have unexpected results if you don't know what you're dealing with. I hope you enjoy it.
Let us have the following function:
function sumValues (a, b = 3) {
return a + b;
}
If you're not familiar with JavaScript or the syntax used we are summing and returning two values passed
(a and b). The = 3 after b, assigns the value 3 to
b, if none is present, as a default value.
So… what would be evaluated from the next expression??
sumValues(4, 6);
You're right. 10 it is. Because 4 assigns to a, and 6 assign to b.
And of this??
sumValues(4);
And the lucky 7 it is!! There is no value present for b so it is 3, the default value.
Now let's raise the bar a little… what about this??
sumValues(4, undefined);
7…? Again…? Well, that's true. And why? Because as we saw before undefined stands for the absence
of a value… which in this case assigns to b the default value. So, in JavaScript passing undefined
or no value at all to a function stands for the same…
But now, the ultimate level, what would you expect from this?
sumValues(4, null);
4 (four)??? (I can hear you shouting this, now, while I'm still writing the post, in the past, considering
that you're reading in the future). Yes, dear reader (or no reader, at all), 4!, and why is that? Again,
your evil(ish) friend coercion! First of all, let us clarify: null IS actually a value! You know that by now
right? (I hope so) So it is more than obvious that b won't be assigned with value 3. But what value does
b has instead? The only value possible for b in the expression 4 + b = 4, is 0.
Yes, Z E R O.
What happens in this last case is that null is actually passed and assigned to b. JavaScript has
now to sum 4 + null, which at the start would look impossible, but again made possible by
your lovely friend coercion. In JavaScript, null coerces to 0 when forced to a number (you can try this
way to check it: Number(null)). And that's why the answer is 4.
Just to finish this post in beauty and to finally prove you that differences between null and undefined matter, try to do
4 + undefined;
Hope you enjoyed it.