The NaN number value in JavaScript

NaN in JavaScript stands for "Not-a-Number". It is a special value that results from an operation that cannot be performed, such as division by zero or parsing a non-numeric string where a number was expected.

For example, consider the following cases:

console.log(0 / 0) // Outputs: NaN
console.log(parseInt('hello')) // Outputs: NaN
console.log(Math.sqrt(-1)) // Outputs: NaN

In the above examples, NaN is the result of operations that do not produce a well-defined number. Division by zero doesn't yield a meaningful result, trying to parse the string 'hello' as an integer fails because 'hello' isn't a valid number, and the square root of a negative number is not a real number.

NaN can also appear in real-world scenarios. For instance, consider the following cases:

  1. An API response that doesn't contain the expected numerical data:

    const response = { totalPrice: 'not-a-number' }
const totalPrice = parseFloat(response.totalPrice)
console.log(totalPrice) // Outputs: NaN

  2. A bug in a food ordering app where an invalid input leads to NaN:

    const itemPrice = 10
const quantity = 'five' // User inputs a non-numeric value
const totalCost = itemPrice * quantity
console.log(totalCost) // Outputs: NaN

In these examples, NaN is the result of unexpected or invalid data being processed in computations.

NaN can often sneak into your code in various ways, causing unexpected behavior if not properly handled. Therefore, it's crucial to understand how to check for NaN to ensure your applications run smoothly. Let's explore the methods for checking NaN and understand the differences between them.

Checking for NaN

To determine if a value is NaN, JavaScript provides two functions: Number.isNaN() and isNaN(). The difference between these two functions lies in how they handle the type conversion of the argument passed to them.

  1. Number.isNaN(value):

    • This method does not perform type conversion. It strictly checks if the value is of type Number and is NaN.
    • Example: 
      Number.isNaN('123') // false
Number.isNaN(NaN) // true
Number.isNaN(123) // false
Number.isNaN('abc') // false

  2. isNaN(value):

    • This function performs type conversion. It first tries to convert the value to a number and then checks if the resulting value is NaN.
    • Example: 
      isNaN('123') // false (because '123' can be converted to the number 123)
isNaN(NaN) // true
isNaN(123) // false
isNaN('abc') // true (because 'abc' cannot be converted to a number, resulting in NaN)

Summary:

  • Number.isNaN only returns true if the value is of type Number and is NaN. No type conversion is performed.
  • isNaN converts the value to a number first and then checks if it is NaN.

Using Number.isNaN is generally safer for avoiding unexpected results due to type conversion.

Unique Properties of NaN

It's important to note that NaN is the only JavaScript value that is not equal to itself. This means that (NaN === NaN) will return false.

console.log(NaN === NaN) // Outputs: false

Additionally, the typeof NaN returns "number", which reflects that NaN is considered a special type of number in JavaScript.

console.log(typeof NaN) // Outputs: "number"

Why is this Important?

Because NaN is not equal to itself, traditional comparison operators cannot be used to check for NaN. This unique property necessitates the use of functions like isNaN() or Number.isNaN() to accurately determine if a value is NaN. This understanding helps prevent bugs that arise from incorrect assumptions about equality comparisons in your code.

Fixing Real-World Scenarios

After understanding how to check for NaN, let's revisit the real-world scenarios and see how to fix them:

  1. Fixing the API response issue:

    When dealing with API responses, ensure you validate the data before processing it. Here's how you can handle the case where totalPrice is not a number:

    const response = { totalPrice: 'not-a-number' }
const totalPrice = parseFloat(response.totalPrice)

if (Number.isNaN(totalPrice)) {
  console.log('Invalid total price received from API')
  // Handle the error accordingly, perhaps set a default value or notify the user
} else {
  console.log(totalPrice) // Process the valid total price
}

  2. Fixing the food ordering app issue:

    Validate user inputs to ensure they are numeric before performing calculations. Here's how to handle the case where quantity is a non-numeric value:

    const itemPrice = 10
const quantity = 'five' // User inputs a non-numeric value
const numericQuantity = parseInt(quantity, 10)

if (Number.isNaN(numericQuantity)) {
  console.log('Invalid quantity input')
  // Handle the error accordingly, perhaps prompt the user to enter a valid number
} else {
  const totalCost = itemPrice * numericQuantity
  console.log(totalCost) // Outputs the correct total cost
}

Understanding NaN can help you avoid common pitfalls and ensure your applications run smoothly—no more surprise totals in your food orders!

The NaN number value in JavaScript - AlexWebLab in Hong Kong 香港