Understanding null, undefined and NaN.
When you start learning JavaScript, one of the first things you need to learn are data types. As long as we talk about Numbers, Strings and Booleans things are pretty clear, objects are fine as well but when null and undefined comes to the game it may be a little bit messed up.
If you’d like to follow along with some of the examples, just open DevTools Console by pressing Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).
null
A null value represents a reference that points, generally intentionally, to a nonexistent or invalid object or address (source: MDN). Even though it points to something non existing, nothing, it’s a global object (and one of JavaScript’s primitive values).
Negating null value returns true , but comparing it to false (or either true) gives false.
In basic maths operations, null value is converted to 0.
undefined
The global undefined property represents the primitive value undefined. It is one of JavaScript's primitive types (source: MDN). It basically tells us that something isn’t defined. You get this e.g. by displaying a value of variable which don’t have assigned value.
If you try any arithmetic operations with undefined, you are going to get NaN(you can just trust me with this one or check it out on your own 🙃).
Similar as with null, negating undefined gives true, but comparing it to either true or false gives false.
Alright, so what’s the difference? null vs undefined
Let’s compare the similarities and differences we get after reading the content above.
Similarities:
- both when negated are giving true (falsy values), but none of them equals true or false
- they represent something non existing…
Differences:
- … null represents “nothing”, fully non existing. undefined something which isn’t defined
- undefined has its own data type (undefined), null is only an object
- null is treated as 0 in basic arithmetic operations, undefined returns NaN
Cool, I think it’s not bad already but there is still something we need to point out.
The first statement: undefined == null, gives us true since JavaScript tries its best to convert both values into the same type.
The second one: undefined === null, is different, this time we’re telling “Please, also compare data types” (basically check if both of this things are the same) and JavaScript turns out to be clever enough to see the difference so it says “false”.
The last, third one: !undefined === !null, well… this is actually very simple. Since both values negated return true, we have true on the both sides, so it’s true.
It may seem very fishy and in fact, it is, like all this beautiful language.
NaN (Not a Number)
Since we know what undefined and null are, and its differences, let’s say few words about NaN value.
The global NaN property is a value representing Not-A-Number (source: MDN).
I think the definition is clear enough. JavaScript returns this value when number we’re supposed to get isn’t a number. For example, when you’re trying to subtract a “cucumber” from 10 or divide 12 by “R2D2”.
There are some situations in which you could expect to get this value but you won’t:
- when you’re adding something to the string. If JavaScript sees + sign and a string, it automatically converts second element of addition into string as well.
- when you’re operating with numbers and booleans. Booleans are converted into ones and zeros. True = 1. False = 0.
Now, the tricky (or the trickiest?) part. NaN is actually a number.
Hmm… so we can say it represents the lack of itself, right? And going further, we are coming to the conclusion that it’s basically the opposite of itself.
So if NaN compared to itself returns false, then no matter what we’re going to compare it to, it will always give false. Thankfully we have a function which can check if argument is NaN — isNaN().
Quick Summary
A null value represents nothing, nonexistent or invalid object or address. It converts to 0 in simple arithmetic operations and it’s a global object.
null == false gives us false.
The global undefined property represents the primitive value undefined. It tells us that something has not assigned value; isn’t defined. undefined isn’t converted into any number, so using it in maths calculations returns NaN.
NaN (Not-A-Number ) represents something which is not a number, even though it’s actually a number. It’s not equal to itself and to check if something is NaN we need to use isNaN() function.
All of the above are falsy values so they convert to false.
JavaScript loves converting values so you need to use triple equality signs (===) to make sure both elements are not the same.
I hope this article was helpful for you and you’ve got some understanding what null, undefined and NaN are. If something is unclear or you’d like to point something (maybe a mistake?) I’d be more than glad to respond.
Let the code be with you!
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
