isNaN is a nice function that checks if a value is not a number but has been the source of many sleepless nights and wasted weekends for developers. The reason for this is that isNaN is not a reliable way to check if a value is not a number. Let me show you some examples:
Example 1
This is the expected behavior of isNaN. It returns true if the value is not a number and false if it is a number. In this case, 'hello' is not a number so isNaN returns true. So far so good.
isNaN('hello') // true
Example 2
This is where things start to get weird. The value is not a number but isNaN returns false.
isNaN('123') // false
This is because isNaN converts the value to a number before checking if it is not a number. In this case, '123' is converted to 123 which is a number so isNaN returns false. So if you want to check if a value is not a number, you can use the following function:
Example 3
How about null? It is not a number so isNaN should return true right? Wrong. It returns false.
isNaN(null) // false
null is converted to 0 before checking if it is not a number. Since 0 is a number, isNaN returns false.
Example 4
What if your value happens to be undefined?
isNaN(undefined) // true
This is because undefined is converted to NaN before checking if it is not a number. Since NaN is not a number, isNaN returns true. In this case, isNaN works as expected.
Example 5
What if your value happens to be true or false which are not numbers or so you thought?
isNaN(true) // false
isNaN(false) // false
isNaN will "helpfully" convert true to 1 and false to 0 before checking if they are not numbers. Since 1 and 0 are numbers, isNaN returns false.
Example 6
Have you ever mistakenly passed in "" or " " to isNaN? You are in for a surprise.
isNaN("") // false
isNaN(" ") // false
The "brilliant" isNaN function will convert "" and " " to 0 before checking if they are not numbers. Since 0 is a number, isNaN returns false.
Example 7:
So for whatever reason, you find yourself checking if a Date object is not a number. What do you think will happen?
isNaN(new Date()) // false
That's right. isNaN will convert the Date object to a number before checking if it is not a number. Since the Date object is converted to the number of milliseconds since January 1, 1970, 00:00:00 UTC, it is definitely a number so isNaN returns false.
Example 8
[] and {} behave differently when passed to isNaN further adding to the confusion.
isNaN({}) // true
isNaN([]) // false
{} is converted to NaN before checking if it is not a number. Since NaN is not a number, isNaN returns true. On the other hand, [] is converted to 0 before checking if it is not a number. Since 0 is a number, isNaN returns false.
Conclusion:
If you want to save yourself from a lot of headaches, you should know that isNaN is a very unreliable way to check if a value is not a number. If you want to check if a value is not a number, you can use the following function:
function isNotANumber(value) {
return typeof value === 'number' && isNaN(value);
}
This function checks if the value is a number and if it is, it checks if it is NaN. If it is NaN, it returns true. Otherwise, it returns false.
isNotANumber('hello') // true
isNotANumber('123') // true
isNotANumber(null) // true
isNotANumber(undefined) // true
isNotANumber(true) // true
isNotANumber(false) // true
isNotANumber("") // true
isNotANumber(" ") // true
isNotANumber(new Date()) // true
isNotANumber({}) // true
isNotANumber([]) // true
Top comments (0)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.