Dmitri Pavlutin
Thoughts on Frontend development

NaN in JavaScript

Posted January 8, 2020

The number type in JavaScript holds integers and floats:

const integer = 4;
const float = 1.5;

typeof integer; // => 'number'
typeof float;   // => 'number'

Plus there are 2 special number values: Infinity (a number bigger than any other number) and NaN (representing “Not A Number” concept):

const infinite = Infinity;
const faulty = NaN;

typeof infinite; // => 'number'
typeof faulty;   // => 'number'

While working directly with NaN is rare, it can appear surprisingly after a failed operation on numbers.

Let’s take a closer look at NaN special value: how to check if a variable has NaN, and importantly understand the scenarios that create “Not A Number” values.

1. NaN number

The number type in JavaScript is a set of all number values, including “Not A Number”, positive infinity and negative infinity.

“Not A Number” can be accessed using a special expression NaN, or as a property of the global object or Number function:

typeof NaN;        // => 'number'
typeof window.NaN; // => 'number'
typeof Number.NaN; // => 'number'

“Not a Number” is a value that does not represent a real number, despite having number type. NaN is useful to represent faulty operations on numbers.

For example, multiplying a number with undefined is not a valid operation, thus the result is NaN:

1 * undefined;     // => NaN

Also trying to parse an invalid numeric string like 'Joker' results in NaN too:

parseInt('Joker', 10); // => NaN

The section 3. Operations resulting in NaN details into the operations that generate NaN.

2. Checking for equality with NaN

The interesting property of NaN is that it doesn’t equal to any value, even with the NaN itself:

NaN === NaN; // => false

This behavior is useful to detect if a variable is NaN:

const someNumber = NaN;

if (someNumber !== someNumber) {  console.log('Is NaN');
} else {
  console.log('Is Not NaN');
}

// logs "Is NaN"

someNumber !== someNumber expression is true only if someNumber is NaN. Thus the above snippet logs to console "Is NaN".

JavaScript has bult-in functions to detect NaN: isNaN() and Number.isNaN():

isNaN(NaN); // => true
isNaN(1);   // => false

Number.isNaN(NaN); // => true
Number.isNaN(1);   // => false

The difference between these functions is that Number.isNaN() doesn’t convert its argument to a number:

isNaN('Joker12');        // => true
Number.isNaN('Joker12'); // => false

isNaN('Joker12') converts the argument 'Joker12' into a number, which is NaN. Thus the function returns true.

On the other side, Number.isNaN('Joker12') checks without conversion if the argument is NaN. The function returns false because 'Joker12' doesn’t equal NaN.

3. Operations resulting in NaN

3.1 Parsing numbers

In JavaScript you can transform numeric strings into numbers.

For example, you could easily transform the '1.5' string into a 1.5 float number:

const numberString = '1.5';
const number = parseFloat(numberString);

number; // => 1.5

When the string cannot be converted to a number, the parsing function returns NaN: indicating that parsing has failed. Here are some examples:

parseFloat('Joker12.5'); // => NaN
parseInt('Joker12', 10); // => NaN
Number('Joker12');       // => NaN

When parsing numbers, it’s a good idea to verify if the parsing result is not NaN:

let inputToParse = 'Invalid10';
let number;

number = parseInt(inputToParse, 10);
if (isNaN(number)) {  number = 0;
}

number; // => 0

The parsing of inputToParse has failed, thus parseInt(inputToParse, 10) returns NaN. The condition if (isNaN(number)) is true, and number is assigned to 0.

3.2 undefined as an operand

undefined used as an operand in arithmetical operations like addition, multiplication, etc. results in NaN.

For example:

function getFontSize(style) {
  return style.fontSize;
}

const fontSize = getFontSize({ size: 16 }) * 2;
const doubledFontSize = fontSize * 2;

doubledFontSize; // => NaN

getFontSize() is a function that accesses the fontSize property from a style object. When invoking getFontSize({ size: 16 }), the result is undefined (fontSize property does not exist in { size: 16 } object).

fontSize * 2 is evaluated as undefined * 2, which results in NaN.

“Not A Number” is generated when a missing property or a function returning undefined is used as a value in arithmetical operations.

Making sure that undefined doesn’t reach arithmetical operations is a good approach to prevent NaN. Feel free to check “7 Tips to Handle undefined in JavaScript”.

3.3 NaN as an operand

NaN value is also generated when an operand in aritemtical operations is NaN:

1 + NaN; // => NaN
2 * NaN; // => NaN

NaN spreads across the arithmetical operations:

let invalidNumber = 1 * undefined;
let result = 1;
result += invalidNumber; // appendresult *= 2;             // duplicate
result++;                // increment

result; // => NaN

Operations on result variable are broken after invalidNumber value (which has NaN) is appended to result.

3.4 Indeterminate forms

NaN value is created when arithmetical operations are in indeterminate forms.

The division of 0 / 0 and Inifinity / Infinity:

0 / 0;               // => NaN
Infinity / Infinity; // => NaN

The multiplication of 0 and Infinity:

0 * Infinity; // => NaN

Additions of infinite numbers of different signs:

-Infinity + Infinity; // => NaN

3.5 Invalid arguments of math functions

The square root of negative number:

Math.pow(-2, 0.5); // => NaN
(-2) ** 0.5;       // => NaN

Or the lograrithm of a negative number:

Math.log2(-2); // => NaN

4. Conclusion

“Not A Number” concept, expressed in JavaScript with NaN, is useful to represent faulty operations on numbers.

NaN doesn’t equal to any value, even with NaN itself. The recommended way to check if a variable contains NaN is to use Number.isNaN(value).

Transforming numeric strings to numbers, when failed, could result in “Not A Number”. It’s a good idea to check whether parseInt(), parseFloat() or Number() don’t return NaN.

undefined or NaN as an operand in arithmetical operations usually result in NaN. Correct handling of undefined (providing defaults for missing properties) is a good approach to prevent this situation.

Indeterminate forms or invalid arguments for mathematical functions also result in “Not A Number”. But these cases happen rarely.

Here’s my pragmatic advice: “Got NaN? Search for undefined!”

Like the post? Please share!

Quality posts into your inbox

I regularly publish posts containing:

  • Important JavaScript concepts explained in simple words
  • Overview of new JavaScript features
  • How to use TypeScript and typing
  • Software design and good coding practices

Subscribe to my newsletter to get them right into your inbox.

Join 1356 other subscribers.

About Dmitri Pavlutin

I'm a passionate software developer, tech writer and coach. My daily routine consists of (but not limited to) drinking coffee, coding, writing, coaching, overcoming boredom 😉.