What is the NaN type in JavaScript

Unsurprisingly NaN stands for not a number, so I'm sure you can guess what it is supposed to represent. There are however, a few oddities when it comes to NaN so it's not as simple as it seems at first glance. Time to head into the JavaScript console and check NaN out in a bit more detail.

NaN
=> NaN

So NaN itself will return the property of NaN, which is what you would expect. What would you expect the typeof(NaN) to be?

typeof(NaN)
=> "number"

Remember how I said NaN isn't as simple as it seems? The type of NaN is actually a number which is really strange given it's name. NaN is mainly used to define a number that isn't a number, that doesn't really make sense but lets look at an example.

"hello"/10
=> NaN

So you can see here that if we try to perform a mathematical operation on a string such as "hello" the result will be NaN because the string cannot be implicitly coerced to a number. Implicit conversion is when the JavaScript engine attempts to convert things to the correct type. If you had the string "1" and attempted to perform a mathematical operation on it the JavaScript engine will try and convert that string into a number.

"1"/10
=> 0.1

You can see here that the string "1" is converted into a number whereas "hello" cannot be converted into a number so the result is NaN.

One of the most confusing things about NaN is how is compares to other types in JavaScript. You would expect NaN to only return true when comparing it with types other than numbers. However in JavaScript when you compare NaN against anything it will return false.

NaN == 1234
=> false

NaN == true
=> false

NaN == false
=> false

NaN == "Hello World!"
=> false

This even happens when you compare NaN against NaN. Which can often be really confusing as you would expect NaN == NaN to be true. NaN != NaN, remember I did say NaN is a bit odd.

NaN == NaN
=> false

So what do you do if you want to check if something is not a number?

JavaScript has an inbuilt method which isn't exactly perfect...

isNaN(NaN)
=> true

isNaN(100)
=> false

isNaN("100")
=> false

These examples return exactly what we would expect, for the isNaN("100") the string "100" is being implicitly coerced into the number 100, so we are essentially doing isNaN(100). Let's try this again with a string that cannot be coerced into a number.

isNaN("hello")
=> true

Which is a bit odd because NaN and the string "hello" are not the same type. What is actually happening here is "hello" is being coerced into a number by the JavaScript engine.

Number("100")
=> 100

Number("hello")
=> NaN

So when we call isNaN("hello") what is actually happening is

isNaN(Number("hello"))
=> true

or rather

isNaN(NaN)
=> true

Which is a bit confusing and also makes the isNaN function rather useless. As it may return true if the parameter is a string, which is rather unhelpful. Fear not though as there is a way to tell if something is NaN in JavaScript!

So how do we check for NaN?

The best way to check for NaN is to use the fact that NaN is the only type in JavaScript that is treated unequal to itself. Lets check that out.

var notANumber = NaN

notANumber !== notANumber
=> true

Here we are checking that the variable notANumber does not equal itself, so as NaN == NaN returns false we can check that NaN !== NaN and the return value will be true, it's not a number.

var aNumber = 999

aNumber !== aNumber
=> false

aNumber is a number so asking if it does not equal itself will return false.

var aString = "Hello World"

aString !== aString
=> false

var aCoercedNumber = "111"

aCoercedNumber !== aCoercedNumber
=> false

So anything that compares against itself using the !== operator will return false expect NaN which will return true.

var notANumber = NaN

notANumber !== notANumber
=> true

So because of the quirk that NaN does not equal NaN we can determine if something is NaN using !==, as unless it is NaN it will return false.