The isNaN() Function For JavaScript

Dan Romans
Level Up Coding
Published in
3 min readMay 21, 2020

--

A pair of Owl butterflies imitating the face of an owl.
Not an… owl?

In JavaScript, there is a property of the global object called NaN. NaN is an abbreviation, rather, an acronym, of “Not a Number”, and is not to be confused with the delicious flatbread: naan. NaN is rarely used in writing programs or scripts. In modern web browsers it is a non-configureable and non-writeable property. It is most often received as a return value when a mathematic (Math) function fails, or when a function fails to parse a number, e.g. parseInt(). NaN is quirky and uncommon, but is occasionally presented and needs to be handled.

In a recent project, with a React client side, the user account included a portfolio of collected stocks and corresponding prices. The portfolio had to include a gross sum of total earnings. Sounds easy enough: gather all the stock prices from the portfolio and add them together. Of course, things are never quite as easy as first assumed to be.

Upon a returning user logging into their account, the state was loaded with that user’s stocks, but the prices of these stocks—and, consequently, the total earnings—were dynamically rendered by fetching to an external API for current market prices. The difficulty was properly timing and dispatching actions to fetch data from the server side database and external API while properly rendering components on the client side. Within that chain of events, an action is dispatched which calculates the gross sum of the user’s total earnings, resolved by a function called setTotalEarnings.

Best solutions were to first properly sequence the fetches, promises, and component renders, or craft the setTotalEarnings function to better control the return value, or more simply handle a falsy return value while conditionally rendering, but, as I was building this application in a short time frame for an assessment, I pushed ahead and addressed what was needed to just get the thing working in time! Long story short, the setTotalEarnings function was intermittently returning NaN, and I was having trouble handling it to be rendered correctly in the appropriate React component.

I realized that the equality operator could not reliably determine if the return value of setTotalEarnings was NaN because NaN === NaN evaluates to false! This is a bizarre and unique occurrence in JavaScript. NaN is the only value in JavaScript which is not equal to itself. There is a helpful shortcut to more accurately handle NaN: the isNaN() function. It is quite easy to employ. Simply pass an argument to the function:

isNaN(NaN) // true
isNaN({}) // true
isNaN(5) // false

While the function is simple enough, there exists special-case behavior that can still be bizarre and problematic. For example:

isNaN(true) // false

In other words, “Is true not a number?”, which you would expect to be correct, to evaluate true. true is not a number, yet the isNaN() function returns: false, implying that true is not not a number, i.e. true is a number, which is incorrect. This behavior occurs because the isNaN() function is meant to accept numeric values, values of the type number. When a non-numeric value is passed to the isNaN() function, the value is first coerced into a number and then evaluated. Regarding the previous example, the argument true is first coerced to the binary representation of 1. 1 is a number, not NaN, so the function returns false.

To add extra insurance and predictability to the evaluation of NaN values, there is a successor to the isNaN() function: the Number.isNaN() method. This method additively evaluates whether the type of value being evaluated is number before evaluating whether or not it is NaN.

To revisit a previous example:

isNaN({}) // true
Number.isNaN({}) // false

The input value {} is not a number, as the first case confirms, however, in the second case, it evaluates to false since it is of type object, not type number, meaning the input value is not numeric and cannot be properly compared to NaN.

isNaN() and Number.isNaN() are particular tools that you may never have to use, but when the day comes that you do, they are handy tools to properly handle the data. It’s always fun to scrape through the lesser used abilities of a programming language and maximize your resolution when faced with a peculiar scenario!

github.com/dangrammer
linked.com/in/danieljromans
danromans.com

--

--

// fullStackWebDeveloper, # software_engineer, Musician & Woodworker