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.

Table of Contents

  1. Checking NaN
  2. Understanding isNaN()
  3. Understanding Number.isNaN()

Checking NaN

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

Understanding isNaN

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

Understanding Number.isNaN()

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.