Difference between isNaN vs Number.isNaN in JavaScript
In the previous article, we discussed the mystery of NaN
in javascript. If you haven't read it yet, we recommend you to read that amazing article before going further. It is always better to check if a number
is NaN
or not before moving into the next calculation. In this way we can get rid of failed calculations.
In that article, we said that if we compare NaN
with nan we get false
. If this is the case, how can we check the NaN
? There are multiple ways we can do this. In this article we will discuss the inner mechanism and difference between them.
We know that in JavaScript, only NaN
is the only datatype(number
)in JavaScript that is not equal to itself. So we can take advantage of it, How? Just by reversing the logic. Since NaN
=== NaN
gives us false, we can use !==
. In this it will be true
if our variable is NaN
. The code is not very readable but it can be a way if you want to explore how we can check NaN
without a built-in helper function.
const number1 = NaN
console.log(number1 !== NaN); //true
console.log(number1 === NaN); //false
In ES5, we were introduced with isNaN()
. Oh gosh, here we have another one on the list which is so confusing. By reading the name everyone initially guesses that it will simply check if the given argument is NaN
or not? But isNaN()
isn’t that simple.
Whenever it gets an argument firstly it tries to coerce(type coercion ) it to check for NaN
. If it is convertible to number
then immediately it checks for NaN
. It works like ==
which also type coerce before comparing.
console.log(isNaN(1223)); // false
console.log(isNaN('1223')); // false
console.log(isNaN(true)); // false
console.log(isNaN(false)); // false
console.log(isNaN(null)); // false
If we pass a true(bool)
we will get false
as it is not a NaN
. But if we pass the 'true' number wrapped by quotation symbol we get true
. This is not supposed to be. The fact is as we said earlier isNaN
try to convert an argument and then check NaN
equality.
Here String(‘true’) is first converted to number(1), then we know that a number
is not a NaN
. That is why it also gives true
though ‘true’ isn't a NaN
. Another example is that, we get true for normal string ‘shouts’
but String look like number with quotation ex: ‘1223’
gives us false
. Here give some examples of isNaN()
's weird scenario.
console.log(isNaN(undefined)); // true
console.log(isNaN('true')) // true
console.log(isNaN('false')) // true
console.log(isNaN('null')) // true
console.log(isNaN({})) //true
console.log(isNaN('shouts')) //true
To fix this issue, in ES6, we got our back by Number.isNaN()
which doesn't have those issues. It works straightforward. It takes an argument and returns the result without any type coerce. That means we use Number.isNaN()
we will get true if our passed arguments is only NaN
, everything other that we will be false.
console.log(Number.isNaN(undefined)) //false
console.log(Number.isNaN(null)); //false
console.log(Number.isNaN(false)); //false
console.log(Number.isNaN(true)); //false
console.log(Number.isNaN('shouts')); //false
console.log(Number.isNaN({})); // false
console.log(Number.isNaN(NaN)); //true
console.log(Number.isNaN(0/0)); //true
console.log(Number.isNaN('dev'/10)); //true
console.log(Number.isNaN(parseInt('shouts123'))); //true
Finally our article come to an end. Hope all the confusion around isNaN is now clear. If you find difficulties please do comment.