Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at CFUNITED 2009 (Lansdowne, VA) with:

JavaScript isNaN() Coerces Values When Testing For Numbers

By Ben Nadel on

Recently, I was tripped up in my JavaScript debugging due to the way that the isNaN() (ie. is "not a number") function treats its argument. I was trying to track down an elusive bug that would occasionally present a numeric ID as the empty string (""). To figure out why this was happening, I put an isNaN() check in place in order to perform logging. Except, the error kept happening and no logging was being performed.

After debugging my debugging code (ironic!), I discovered that calling isNaN() on the empty string actually returned "false"; that is, isNaN() considers the empty string to be a valid number. After reading up on the isNaN() documentation, I found out that isNaN() tries to coerce its argument into a number before returning a result.

Now, with coercion in mind, things started to make more sense:

  • Empty strings can be coerced into a falsey value.
  • Falsey values can be coerced into Zero.
  • Zero is a valid number.
  • Hence, isNaN() sees empty string as a number.

To see this in action, I put together a small demo that runs the empty string and some truthy / falsey values through isNaN(). I also played around with using parseFloat() as a means to bypass numeric coercion:

  • <!doctype html>
  • <html>
  • <head>
  • <meta charset="utf-8" />
  • <title>Testing JavaScript isNaN() Value Coercion</title>
  • <script type="text/javascript">
  •  
  •  
  • // Empty strings can be coerced to falsey values. And all
  • // truthy / falsey values can be coerced to numbers. As such,
  • // truthy / falsey values are *not* not numbers.
  •  
  • console.log( "Empty String isNaN: ", isNaN( "" ) );
  •  
  • console.log( "False isNaN: ", isNaN( false ) );
  •  
  • console.log( "True isNaN: ", isNaN( true ) );
  •  
  •  
  • // -------------------------------------------------- //
  • // -------------------------------------------------- //
  • console.log( ". . . . ." );
  • // -------------------------------------------------- //
  • // -------------------------------------------------- //
  •  
  •  
  • // ParseFloat() coerces arguments to a String value and then
  • // tries to extract the numeric value. As such, it doesn't
  • // fall victim to truthy / falsey coercion.
  •  
  • console.log( "Empty String isNaN: ", isNaN( parseFloat( "" ) ) );
  •  
  • console.log( "False isNaN: ", isNaN( parseFloat( false ) ) );
  •  
  • console.log( "True isNaN: ", isNaN( parseFloat( true ) ) );
  •  
  •  
  • // -------------------------------------------------- //
  • // -------------------------------------------------- //
  • console.log( ". . . . ." );
  • // -------------------------------------------------- //
  • // -------------------------------------------------- //
  •  
  •  
  • // Simply exploring how parseFloat() coerces values (forcing
  • // them to be Strings before it parses them).
  •  
  • var complexObject = {};
  •  
  • // Override the core to-string value.
  • complexObject.toString = function(){
  •  
  • // Return a NUMBER string.
  • return( "012345" );
  •  
  • };
  •  
  • // Test float parsing.
  • console.log(
  • "Complex Object Float: ",
  • parseFloat( complexObject )
  • );
  •  
  •  
  • </script>
  • </head>
  • <body>
  • <!-- Left inentionally blank. -->
  • </body>
  • </html>

When we run the above code, we get the following console log output:

Empty String isNaN: false
False isNaN: false
True isNaN: false
. . . . .
Empty String isNaN: true
False isNaN: true
True isNaN: true
. . . . .
Complex Object Float: 12345

As you can see, all truthy / falsey values are seen as "numbers" by the isNaN() function. Furthermore, trying to use parseFloat() as an intermediary cuts out the numeric type coercion because parseFloat() coerces its values into Strings before parsing them.

I guess this is the documented behavior of isNaN(); but, seeing as I've used the isNaN() function maybe 3 times in my career, I wasn't fully aware of how it worked. But now I know - and knowing is half the battle!




Reader Comments

Thank you vary much. Worked like charm! Just wondering why that issue wasn't fixed in the first place, unless it is not really an issue.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.