How to Check if Number is NaN in JavaScript

avatar

Borislav Hadzhiev

Thu Oct 14 20212 min read

banner

Photo by Paola Chaaya

Check if Number is NaN in JavaScript #

To check if a number is NaN, call the Number.isNaN() method, passing it the number as a parameter. The Number.isNaN method returns true if the passed in value is NaN and has a type of number, otherwise it returns false.

index.js
const num = 0 / 'test'; console.log(num); // ๐Ÿ‘‰๏ธ NaN if (Number.isNaN(num)) { // ๐Ÿ‘‰๏ธ this runs only if NaN and type of number console.log('Number is NaN'); }

We use the Number.isNaN method to check if a value has a type of number and is NaN.

You should never try the equality operators when checking for NaN, because as confusing as it may seem, NaN is not equal to NaN in Javascript.

index.js
// ๐Ÿ‘‡๏ธ don't do this console.log(Number.NaN === Number.NaN); // ๐Ÿ‘‰๏ธ false
NaN is the only value in JavaScript that is not equal to itself.

The Number.isNaN only returns true if the following conditions are met:

  • the value is of type number
  • the value is NaN

All the following examples return false.

index.js
console.log(Number.isNaN('string')); // ๐Ÿ‘‰๏ธ false console.log(Number.isNaN(undefined)); // ๐Ÿ‘‰๏ธ false console.log(Number.isNaN(null)); // ๐Ÿ‘‰๏ธ false console.log(Number.isNaN([])); // ๐Ÿ‘‰๏ธ false console.log(Number.isNaN({})); // ๐Ÿ‘‰๏ธ false
The Number.isNaN method is not supported in Internet Explorer version 6-11. If you have to support the browser, use the polyfill from the next section.

If you need to support Internet Explorer add the following polyfill to your script, before you try to use the Number.isNaN method.

index.js
Number.isNaN = Number.isNaN || function isNaN(input) { return typeof input === 'number' && input !== input; }

This code is quite intuitive, we first check if the Number.isNaN method is supported by the browser.

If it isn't supported by the browser we implement it by attaching a function to the isNaN property of the Number object.

Our function checks if the type of the provided value is of type number and it's not equal to itself.

Since NaN is the only value in JavaScript that is not equal to itself this is sufficient to determine whether the user input is NaN.

Hopefully they don't come up with other values that are not equal to themselves, that would break our polyfill.

An alternative approach is to use the older isNaN method, which is supported by Internet Explorer.

This is generally a bad practice, because the isNaN method is very unintuitive.

If the argument provided to the isNaN method is not of type number, the method coerces the value to a number, before checking if it's NaN.

This is different from the Number.isNaN method, which doesn't coerce the passed in value.

Here are some examples of using the strange isNaN method:

index.js
console.log(isNaN(0 / 0)); // ๐Ÿ‘‰๏ธ true console.log(isNaN('string')); // ๐Ÿ‘‰๏ธ true console.log(isNaN(undefined)); // ๐Ÿ‘‰๏ธ true console.log(isNaN({})); // ๐Ÿ‘‰๏ธ true console.log(isNaN(null)); // ๐Ÿ‘‰๏ธ false console.log(isNaN([])); // ๐Ÿ‘‰๏ธ false

Had we used the newer Number.isNaN method with these values, the only true response would come from calling the method with 0 / 0.

It is generally advised against using methods that do more than they need to and might surprise you and cause difficult to track bugs in your application.

This is why you should be using the Number.isNaN method instead and add the polyfill if you have to support Internet Explorer.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee