All About JavaScript's Mysterious NaN

In every programming language, there is something called NaN, which stands for "Not a Number". When working with calculations, we need several data types to calculate perfectly. In JavaScript, we have the number datatype, which can accommodate integers, floats, and doubles.

However, when we get unusual results, we need a special number datatype to present those results. That's where NaN comes in, but things aren't as simple as that. There is a lot of confusion about NaN out there. In today's topic, we will dive deep into the inner workings of NaN in JavaScript. So hold onto your coffee and enjoy the ride.

Table of Contents

  1. What is NaN?
  2. Why NaN === NaN is false?
  3. Bonus

What is NaN?

First things first, if you console log the type of NaN, you will get "number". People who are new to programming or the mathematical domain might wonder why something called "Not a Number" is actually considered a number? Because, 

console.log(typeof(NaN)); // number

As we mentioned earlier, when we do calculations in programming, we might get results that are undefined, meaning that we can't express those results as a number. For example, in real life, we can't get a result when we try to find the square root of a negative number. For a simpler example, think about the scenario where we try to divide a string by 5 in JavaScript.

This is not a valid calculation, right? But we still need to represent that value. That's where NaN comes in. In this type of scenario, JavaScript will return NaN. It means that our result is actually a number(datatype) but not valid number(actual value). We can't do any further calculations with NaN. 

 console.log('JS'/3) => NaN
 console.log(Math.sqrt(-1)) => NaN

Why NaN === NaN is false?

Let's move on to a more interesting part. If we try to compare NaN with NaN in JavaScript, we will get false. In JavaScript, we can compare similar data types just like comparing a string with a string or a number with a number.

In those cases, we get true as a result. But in the case of NaN, we get false. This may seem weird, but it's not entirely surprising. Let's say we got NaN because we tried to find the square root of -1. Then we tried to divide 0/0, and we will also get NaN. 

 let calculation_1 = 0/0
 let calculation_2 = Math.log2(-2)
 
 let calculation_compare = calculation_1 === calculation_2 
 console.log(calculation_compare) => false

Now think for a moment. Although both calculations result in NaN, the actual results are completely different, and therefore represented by different NaN values. That's why we can't check the equality of NaN with NaN. Not only the equality operator (==), but other comparison operators like '>', '<', '!=' will also return false when comparing NaN values.

Bonus

It is time for some real life example when we might get NaN. 

console.log(1 * undefined) => NaN
console.log(parseInt('john123')) => NaN
console.log(1 NaN) => NaN
console.log(0 * Infinity) => NaN
console.log(Math.pow(-3, 0.5)) => NaN

In real-world applications, we may encounter failed calculations that can lead to undefined or NaN values. If we continue with these values without checking for NaN, we might not get our desired results.

That's why it's essential to understand the behavior of NaN and its use cases, so we can properly handle these undefined values and ensure that our calculations and functions are working correctly.

That's it today. Hoped you enjoyed the article. ๐Ÿ‘