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.
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!
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.