JavaScript isNaN() Function: Checking for NaN

The isNaN() function in JavaScript is a global function used to determine whether a value is NaN (Not-a-Number). NaN is a special numeric value representing an unrepresentable or undefined numerical operation, such as dividing zero by zero or parsing a string that cannot be converted into a number. This function is fundamental in handling situations where numerical input might be invalid. Understanding isNaN() is crucial for writing robust and reliable JavaScript code.

Purpose of the isNaN() Function

The primary purpose of the isNaN() function is to check if a value is NaN. This is particularly important when:

• Receiving user input that is expected to be a number.
• Performing mathematical operations where an intermediate result might be NaN.
• Handling data from external sources that might contain non-numeric values.

Syntax

The syntax for the isNaN() function is straightforward:

isNaN(value)

Where value is the value you want to test. The function returns:

• true if the value is NaN or can be coerced into NaN.
• false if the value is not NaN and cannot be coerced into NaN.

Important Note about isNaN() Behavior

A crucial thing to understand about the global isNaN() function is that it performs type coercion on its input. This means that it tries to convert the value to a number before checking if it’s NaN. This behavior can sometimes lead to unexpected results. For a more predictable check for NaN, the Number.isNaN() method (introduced in ES6) is preferred, which will be covered in the next article.

Examples

Let’s look at some practical examples of how the isNaN() function behaves:

Basic NaN Check

console.log(isNaN(NaN)); // Output: true

This is the most direct case – checking if the NaN value is indeed NaN.

Checking Numeric Values

console.log(isNaN(123)); // Output: false
console.log(isNaN(0)); // Output: false
console.log(isNaN(-45)); // Output: false
console.log(isNaN(3.14)); // Output: false

Standard numeric values are correctly identified as not being NaN.

String Values

console.log(isNaN("123")); // Output: false (string is converted to the number 123)
console.log(isNaN("hello")); // Output: true  (string cannot be converted to a number)
console.log(isNaN("3.14")); // Output: false (string is converted to the number 3.14)
console.log(isNaN("")); // Output: false (empty string is converted to the number 0)
console.log(isNaN("   ")); // Output: false (string with spaces is converted to the number 0)

Here, the string values are implicitly converted to a number where possible. Empty strings and strings with spaces are converted to 0, which is not NaN.

Boolean and Other Values

console.log(isNaN(true));  // Output: false (converted to 1)
console.log(isNaN(false)); // Output: false (converted to 0)
console.log(isNaN(null));  // Output: false (converted to 0)
console.log(isNaN(undefined));  // Output: true (converted to NaN)
console.log(isNaN({})); // Output: true (object is converted to NaN)
console.log(isNaN([])); // Output: false (empty array is converted to 0)
console.log(isNaN([1,2])); // Output: true (non-empty array is converted to NaN)

Boolean values are converted to 1 and 0, and therefore are not NaN. Similarly, null is converted to 0. However, undefined and objects coerce to NaN. Empty arrays get coerced to 0 but array with values are coeerced to NaN.

Math Operations

console.log(isNaN(0 / 0)); // Output: true
console.log(isNaN(Math.sqrt(-1))); // Output: true
console.log(isNaN(Number("abc"))); // Output: true

Mathematical operations that result in NaN are correctly identified by the function.

Use Case Example: Validating User Input

Here’s a practical use case of the isNaN() function to validate numeric input received from a user, where invalid input can lead to errors if not handled properly.

<label for="userInput">Enter a number:</label>
<input type="text" id="userInput" />
<button onclick="checkInput()">Check Input</button>
<p id="outputMessage"></p>

<script>
    function checkInput() {
      const inputElement = document.getElementById("userInput");
      const inputValue = inputElement.value;
      const numValue = Number(inputValue);
      const outputElement = document.getElementById("outputMessage");

      if (isNaN(numValue)) {
        outputElement.textContent = "Invalid input: Please enter a valid number.";
      } else {
        outputElement.textContent = "Valid input: " + numValue;
      }
    }
</script>

Here’s how the code works:

1. HTML Setup: The HTML includes an input field for users to enter a number, a button to trigger the input validation, and a paragraph to display messages.
2. Input Validation:
   • The checkInput() function gets the value entered by the user from the input field.
   • It uses the Number() constructor to try to convert the input to a number.
   • The isNaN() function is then used to check if the conversion resulted in NaN.
   • If isNaN() returns true, it means the input is not a valid number and an error message is shown.
   • If isNaN() returns false, it means the input is a valid number and the numeric value is displayed.

This example illustrates how the isNaN() function can help ensure that your application can handle incorrect user inputs, and provide proper feedback.

Comparison with Number.isNaN()

It is important to note that the global isNaN() function behaves differently than the Number.isNaN() method which was introduced in ECMAScript 2015 (ES6). The Number.isNaN() method does not perform type coercion. It directly returns true only if the value is exactly the NaN value. This behavior is often more what you want for accurate NaN detection. It prevents some of the quirks of the global function, where it returns true for values like undefined, objects, and strings that cannot be converted into numbers. The next article will delve deeper into how Number.isNaN() works and how it’s superior to isNaN() in most use cases.

When to Use isNaN()

Despite its quirks, the global isNaN() function can still be useful in scenarios where:

• You need to check if a value can be coerced to NaN.
• You are aware of its type coercion behavior and can handle the cases accordingly.
• You are working in older environments that may not support the Number.isNaN() method.

However, as a best practice, using Number.isNaN() for explicit NaN checks is recommended whenever possible to avoid unexpected behavior caused by implicit type coercion. ✅

Browser Support

The isNaN() function is supported by all major browsers and has been available since the beginning of JavaScript.

Conclusion

The isNaN() function is an essential part of JavaScript for handling NaN values. While it’s important to be aware of its implicit type coercion behavior, this function is useful for validating user inputs and checking results from mathematical operations, and handling data coming from external sources. Understanding the difference between isNaN() and Number.isNaN(), is key to writing robust and reliable JavaScript code. The next article will cover Number.isNaN() and will highlight how it’s different from global isNaN() and why it is the preferred choice in modern JavaScript.