DEV Community

mmvergara
mmvergara

Posted on

JavaScript NaN Quirks: Features, Not Flaws.

NaN, or "Not-a-Number," is one of those JavaScript quirks that can trip you up if you're not paying attention. But here's the thing: NaN isn't just a quirky value—it's a sentinel value that represents an invalid number. It's not the absence of a number, and it's definitely not zero. It's a specific, intentional signal that something went wrong in a numeric operation. (or i don't know, i didn't create the language)

What is NaN?

NaN comes from the IEEE 754 spec, which defines how numbers work in JavaScript. It's not a bug or a mistake—it's a deliberate part of the language. Think of NaN as a red flag that says, "Hey, this operation didn't make sense mathematically."

For example:

console.log(Math.sqrt(-1)); // NaN
Enter fullscreen mode Exit fullscreen mode

You can't take the square root of a negative number (at least not in real numbers), so JavaScript gives you NaN. It's like asking, "What's the color of happiness?"—it's a question that doesn't have a meaningful answer.

NaN's Quirky Behavior

Here's where things get weird. NaN is the only value in JavaScript that is not equal to itself:

console.log(NaN === NaN); // false
Enter fullscreen mode Exit fullscreen mode

This isn't a bug—it's by design. According to the ECMAScript spec, NaN is "unordered" with respect to other values, including itself. This means you can't use === to check for NaN. Instead, you need to use Number.isNaN():

console.log(Number.isNaN(NaN)); // true
console.log(Number.isNaN("Hello")); // false
Enter fullscreen mode Exit fullscreen mode

Why NaN is a Number

Here's the weird thing. NaN is technically a number type. Yes, you read that right. The typeof NaN is "number". This is because NaN is part of the IEEE 754 spec, which defines numeric operations. When a numeric operation fails, it doesn't make sense to return undefined, null, or -1—those aren't numbers. Instead, JavaScript returns NaN, which is still a number, just an invalid one.

Example

Let's say you're building a function to calculate the average of an array of numbers. What happens if the array contains non-numeric values?

function calculateAverage(arr) {
  const sum = arr.reduce((acc, val) => acc + val, 0);
  return sum / arr.length;
}

console.log(calculateAverage([1, 2, "three", 4])); // NaN
Enter fullscreen mode Exit fullscreen mode

Here, the string "three" can't be added to the sum, so the result is NaN. This is a great example of how NaN can sneak into your code and cause unexpected behavior.


Despite all of this weirdness, NaN is a powerful tool. It's the only value that makes sense to return when a numeric operation fails, we have to learn how to work with the language.

NaN is a unique and important concept in JavaScript. It's not just a value—it's a signal that something went wrong in your calculations.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay