How to check for NaN in JavaScript

How to check for NaN in JavaScript

Checking for NaN (?not a number?) is as simple as checking for self-equality in JavaScript.

Image for postPhoto by Rattap on Unsplash

In JavaScript, the special value NaN (meaning ?not a number?) is used to represent the result of a mathematical calculation that cannot be represented as a meaningful number. ? Joshua Clanton on A Drip of JavaScript

The special value NaN shows up in JavaScript when Math functions fail (Math.sqrt(-37)) or when a function trying to parse a number fails (parseInt(“No integers here”)).

NaN then poisons all other math functions, leading to all other math operations resulting in NaN.

Image for postPhoto by Chris Barbalis on Unsplash

Division by zero

Note that in JavaScript, division by 0 returns Infinity, not NaN:

This result is because of how floating-point is defined, more generally than just Javascript. Why? Roughly, because 1/0 is the limit of 1/x as x approaches zero. And 0/0 has no reasonable interpretation at all, hence NaN.

What is NaN anyway?

NaN is a property of the global object. The initial value of NaN is Not-A-Number ? the same as the value of Number.NaN. ? MDN Docs

Image for postPhoto by Andrew Buchanan on Unsplash

Checking for NaN is harder than it seems

Unfortunately, there are two problems with trying to check for NaN:

  1. The typeof NaN is ?number?
  2. NaN is unequal to every other value in JavaScript

Check out this code example:

So how do we check whether we have a NaN value that will poison math?

Image for postPhoto by Wolfgang Rottmann on Unsplash

Check for NaN with self-equality

?NaN, and only NaN, will compare unequal to itself.? ? MDN Docs

In JavaScript, the best way to check for NaN is by checking for self-equality using either of the built-in equality operators, == or ===.

Because NaN is not equal to itself, NaN != NaN will always return true.

Of course, such a NaN test in your code is not always readable, so it is a good idea to use a comment or to create a wrapper function:

It doesn?t make a difference if you use != or !== to check for NaN.

Image for postPhoto by Erik Mclean on Unsplash

Check for NaN with Object.is()

?The Object.is() method determines whether two values are the same value.? ? MDN Docs

Unlike the strict and loose equality operators, the ES6 helper method Object.is() does not consider NaN to be equal to itself:

So, if you swap out === for Object.is(), you never have to worry about checking for NaN any special way. Problem solved!

I wrote about how to use Object.is() in JavaScript in another article:

ES6: Object.is() vs. === in JavaScript

ES6 (ECMAScript 2015) added a helper function called Object.is() that is slightly different from the === operator.

medium.com

Image for postPhoto by Tony Hand on Unsplash

A word about Number.isNan()

Modern JavaScript already has an implementation to check for NaN called Number.isNan() that works how you think it would. For example:

Note that Number.isNan() is different from the global isNan() function, which is an older implementation whose actual purpose is to check whether a value cannot be coerced to a number.

Here?s the difference, for completeness:

  • isNaN() will return true if the value is currently NaN, or if it is going to be NaN after it is coerced to a number. In other words, if it receives a value that can be coerced to a number, isNaN() will return false.
  • Number.isNaN() will return true only if the value is currently NaN.

So, if you are supporting old browsers (especially Internet Explorer) that don?t support Number.isNan(), then it is best to check for self-equality.

Image for postPhoto by Nick Hillier on Unsplash

Additional resources:

  • The Mozilla Developer Network Docs include details about NaN:

NaN

The global NaN property is a value representing Not-A-Number. NaN is a property of the global object. The initial value?

developer.mozilla.org

  • Kuba Michalski explains null, undefined, and NaN in CodeBurst:

Understanding null, undefined and NaN.

When you start learning JavaScript, one of the first things you need to learn are data types. As long as we talk about?

codeburst.io

  • Kiro Risk takes an in-depth look at NaN in JavaScript Refined:

NaN and typeof

An in-depth look at the NaN property, and why it is considered a number type

javascriptrefined.io

1

No Responses

Write a response