How do you check that a number is NaN in JavaScript?

Dissecting NaN Detection

Looping into the concept of NaN (Not-a-Number), we find it's a unique representative for values that aren't actual numbers in JavaScript. But this elusive representative has a quirky persona, requiring us to tread carefully.

Number.isNaN() versus isNaN()

Choosing your weapon for NaN war:

• Number.isNaN(yourValue) verifies if a value is a bona fide NaN. It's a good-natured function that does not engage in coercion, being part of the honorable ECMAScript 6 (ES6) caste.

console.log(Number.isNaN(NaN)); // true (@Infinity left the chat)
console.log(Number.isNaN('geoff')); // false (Geoff insists he's not a number)


• isNaN(yourValue) comes into play when you wish to test whether a value, after being forced to become a number, turns out to be a NaN. It's slightly ruthless in its techniques, dabbling in coercion.

console.log(isNaN('geoff')); // true, Geoff can't be bullied into being a number
console.log(isNaN('100')); // false, '100' succumbs to the numerical conversion


The 'Me vs Me' NaN check

The worst enemy of NaN is itself!:

• The NaN value is the sole entity in JavaScript that doesn't identify with its own reflection. Thus, a self-comparison can shed light on its true identity as NaN:

let value = NaN;
if (value !== value) {
  console.log('Meet Mr. NaN!');
}


While this self-check method belongs to ECMAScript 5 (ES5), it lacks the charm and expressiveness of Number.isNaN().

NaN Detection - Pitfalls and Solutions

Detecting NaN throws curveballs at times, are you ready to hit them back?:

isNaN: The Mimic

Trust issues with isNaN:

• isNaN() can sham around with its coercion, leading to false positives as strings and undefined values as NaN. To steer clear, either assert your value as a number before you call isNaN() or, better yet, trust your ol' friend Number.isNaN().

The parseFloat Debacle

Seems legit? Nope:

• Relying on parseFloat() to identify NaN is as unpredictable as the stock market. parseFloat("geoff") gives you NaN, but parseFloat("123geoff") has 123 up its sleeve. Count on it for NaN detection, and you'll be pulling your hair out in chunks!

console.log(isNaN(parseFloat("geoff"))); // true
console.log(isNaN(parseFloat("123geoff"))); // false, Plot twist!


Polyfill: The Is-NaN Sanity Saver

When dealing with multiple platforms and not all of them support ECMAScript 6, throw in a polyfill for Number.isNaN(). This ensures you get a consistent behaviour across all browsers.

if (!Number.isNaN) {
  Number.isNaN = function(value) {
    return typeof value === 'number' && isNaN(value); // "Polyfill, at your service!"
  };
}


Cross-Browser Compatibility

As geography changes, so does the behaviour of isNaN. With different browsers, especially the older ones, isNaN might perform differently. When in doubt, fall back on our trusty Number.isNaN() or the ever-ready polyfill!