Everything Important to Know About NaN in JavaScript

NaN (Not-a-Number) is a special value in JavaScript that represents an invalid or undefined numerical operation. Understanding NaN is important for writing robust JavaScript code that handles invalid data gracefully. Here, we have explained important things about NaN in JS.

Man working on two laptops

What is NaN?

So first, you need to understand what is NaN in JS. NaN stands for “Not-a-Number”. It is a property of the global JavaScript object that represents a value that is not a legal number.

Some key things to know about NaN:

  • Its type isnumber (typeof NaN returns “number”)
  • It is the return value from operations that have an undefined or unrepresentable numerical value
  • It compares unequal (via ==, !=, ===, and !==) to any other value — including another NaNvalue

Here are some examples of where NaN can occur:

Math.sqrt(-1); // NaN

 

parseInt(“hello”); // NaN

 

Infinity – Infinity; // NaN

 

0 * Infinity; // NaN

NaN also propagates in further calculations, meaning any math operation on NaN will also return NaN:

NaN + 5; // NaN

 

10 / NaN; // NaN

How to Check for NaN

Since NaN compares unequal to everything, including itself, you cannot use traditional comparison operators like == or === to check if a value is NaN.

You should also check: These 4 Things Are Slowing Your Website Down

Instead, JavaScript provides the global isNaN() function:

isNaN(NaN); // true

However, isNaN() has some tricky behavior to be aware of:

  • It will coerce the value to a number before checking if it’s NaN
  • Values like “hello”, undefined, and []will coerce to NaN, so isNaN() will return true for those

To avoid this, ES6 introduced Number.isNaN() which doesn’t coerce the value:

Number.isNaN(NaN); // true

Number.isNaN(“hello”); // false

Number.isNaN() is considered the most robust way to check for NaN.

An alternative approach is to check if the value is unequal to itself:

const value = NaN;

value !== value; // true

This works because NaN is the only value not equal to itself.

Where NaN Comes From

There are a few main ways that NaN can occur in JavaScript:

1. Parsing Invalid Numbers

NaN is returned from functions like parseInt() and parseFloat() when they are passed values that cannot be converted to numbers:

parseInt(“hello”); // NaN  

parseFloat(“10.5abc”); // NaN

2. Math Operations on Non-Numbers

If you perform math operations on non-number values, NaN is returned:

“hello” – 5; // NaN

Infinity / Infinity; // NaN

3. Indeterminate Forms

Certain forms of math operations have an undefined value, which results in NaN:

0 * Infinity; // NaN

Infinity – Infinity; // NaN

4. Using NaN in Further Math Operations

Since NaN represents an invalid number, any further math done with NaN will also return NaN:

NaN + 5; // NaN

10 / NaN; // NaN

This means NaN can propagate through code if you’re not careful to check for it.

How to Handle NaN in Your Code

Since NaN represents invalid data and it is one of the most common mistakes developers make in JavaScript, you may want to find and handle it appropriately instead of letting it silently propagate through your code.

Here are some tips for properly handling NaN values:

  • Use isNaN()or myValue !== myValue to check if values are NaN
  • Use isFinite()to check if a numeric value is a regular number
  • Catch NaN with ifstatements and either handle it specially or replace it with a defined value like 0
  • UseNaN as the default parameter value for optional numeric parameters to catch undefined values:

function myFunction(n = NaN) {

  if (Number.isNaN(n)) {

    n = 0; // handle if NaN

  }

}

Properly handling NaN will make your code more robust and prevent subtle bugs!

Laptop on desk

Conclusion

NaN is an important concept to understand to write solid JavaScript code:

  • It represents invalid numerical data
  • It propagates through further math operations
  • It compares unequal to everything, including itself
  • isNaN()and isNaN() can detect it
  • It should be handled gracefully instead of propagating

By learning how to test for and handle NaN, you can make your code more resilient to bad data.