Check if a Value is NaN in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 8, 2022

banner

Photo from Unsplash

Check if a Value is NaN in TypeScript #

To check if a value is NaN, call the Number.isNaN() method, passing it the value 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.ts
const val = Number('hello'); console.log(val); // 👉️ NaN if (Number.isNaN(val)) { // 👇️ this runs only if NaN and type of number console.log('Value is NaN'); }

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

If the value you're passing to the Number.isNaN method is not of type number, you have to convert it before passing it to the method.

index.ts
// 👇️ false, because passed in value is not a number console.log(Number.isNaN('test'));

The Number.isNaN method only returns true if the passed in value has a type of number and is NaN.

index.ts
// 👇️ true console.log(Number.isNaN(Number('test')));
In order to get an accurate result, always convert non-numbers to number before passing them to the method.

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 (and TypeScript).

index.ts
// 👇️ don't do this console.log(Number.NaN === Number.NaN); // 👉️ false
NaN is the only value in JavaScript (and TypeScript) 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.ts
console.log(Number.isNaN('hello')); // 👉️ false console.log(Number.isNaN([])); // 👉️ false console.log(Number.isNaN({})); // 👉️ false console.log(Number.isNaN(undefined)); // 👉️ false console.log(Number.isNaN(null)); // 👉️ false

The Number.isNaN function is very easy to implement.

index.ts
function isNaN(input: unknown) { return typeof input === 'number' && input !== input; }

The function takes a parameter of type unknown, checks whether it is a number and is not equal to itself.

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

You might also see examples online that use the older isNaN function.

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.

Fortunately, the isNaN function is typed to take a parameter of type number in TypeScript, so it is much harder to shoot yourself in the foot.

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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.