How to check if a variable is NaN in JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we will learn to check if the variable is NaN in JavaScript. The full form of the NaN is ‘not a number’. The NaN is the reserved keyword in the JavaScript which we can assign to the variable.

If users are using the below method to check whether a variable is a number or not, it will not work.

var a = "Hello";
let result = a == NaN; // it always returns false.

As we have talked that the above method will not work to check for a number because NaN is the reserved keyword. So, it can’t be equal to any variable’s value. Even though NaN is also not equal to itself if we use it after assigning its value to the variable.

Use the isNaN() Method

In JavaScript, the isNaN() method is useful to check whether is variable is of any other type rather than the number data type. It takes a variable as a parameter and returns a false if the variable is a number. Otherwise, it returns a true Boolean value.

Users can follow the below syntax to check whether a variable is NaN using the isNaN() method.

Syntax

let number = 10;
let result = isNaN(number);

Parameters

number − it takes any variable as a parameter and returns a Boolean value according to variable is NaN or not.

Example

In the below example, we have used the isNaN method to check for NaN. We have taken the different values to observe the output of the isNaN() method.


<html>
<head>
</head>
<body>
   <h2>Check if a variable is NaN in JavaScript.</h2>
   <h4>output of <i> isNaN() </i> method for different values.</h4>
   <div id = "output1"></div>
   <script>
      let output1 = document.getElementById("output1");
      let output = "";
      output = output + isNaN(1000) + " : 1000 <br> ";
      output = output + isNaN("tutorialsPoint") + " : TutorialsPoint <br> ";
      output = output + isNaN(NaN) + " : NaN<br> ";
      output = output + isNaN(-21.2) + " : -21.2 <br> ";
      output = output + isNaN('') + " : '' <br> ";
      output = output + isNaN(0) + " : 0 <br> ";
      output = output + isNaN(true) + " : true <br> ";
      output1.innerHTML = output;
   </script>
</body>
</html>

In the above output, users can see that isNaN() method returns false for the number values and true for the non-number values. The ‘true’ Boolean value is also 1, so it is a number. Furthermore, value of ‘’ is 0, so isNaN() method returns false for that.

Use the Number.isNaN() method

The Number.isNaN() is the pretty similar to isNaN() method in JavaScript but both has a minor difference. The isNaN() method checks for all types of variables whether a variable is NaN or not. The Number.isNaN() method checks for only the number types of the variable. It means that if we pass variables of any other data type rather than number, it always returns a false value.

Follow the below syntax to use the Number.isNaN() to check for the NaN.

Syntax

let number = 10;
let result = Number.isNaN( number ); // returns false for all non-numeric values

Example

In the below example, we have used the Number.isNaN() method to check for the variable is NaN or not. We have taken the same value as we have in the above example. We will observe the difference between the output of isNaN() and the Number.isNaN() method.


<html>
<head>
</head>
<body>
   <h2>Check if a variable is NaN in JavaScript.</h2>
   <h4> output of <i> Number.isNaN() </i> method for different values.</h4>
   <div id = "output1"></div>
   <script>
      let output1 = document.getElementById("output1");
      let output = "";
      output = output + Number.isNaN(1000) + " : 1000 <br> ";
      output = output + Number.isNaN("tutorialsPoint") + " : TutorialsPoint <br> ";
      output = output + Number.isNaN(NaN) + " : NaN <br> ";
      output = output + Number.isNaN(-21.2) + ": -21.2 <br>";
      output = output + Number.isNaN('') + " : '' <br> ";
      output = output + Number.isNaN(0) + " : 0 <br> ";
      output = output + Number.isNaN(true) + " : true <br> ";
      output1.innerHTML = output;
   </script>
</body>
</html>

In the above output, users can see that for string value “TutorialsPoint”. It is changed to false. As we have passed the non-numeric values as a parameter of Number.isNaN() method returns false.

We have learned to check whether a variable is NaN or not. The first approach is the standard approach to checking for the NaN. The second method is deprecated in some browsers. It is recommended to use the isNaN() method as it works for all types of variables.