How is NaN converted to Number in JavaScript?

Front End Scripts Javascript Web Development

In this article, we will learn how to convert NaN to a Number. NaN in Javascript means Not a Number, whose type is Number but actually, it is not a number. To Convert, the NaN to a Number we use Multiple methods some of which are discussed below.

Using the OR (||) operator
Using the isNaN() method
Using the ~~ operator
Using Ternary Operator

Using the OR (||) Operator

The OR operator is represented by the || sign in JavaScript. To convert the NaN into a number we use the OR operator with NaN and any number and the OR operator will return that Number.

Syntax

NaN || 0;

When we compute OR between NaN and 0, the result is 0. In this way we convert the NaN to a number.

Example

In this example, we created a variable num and assigned the value as NaN || 0.


<html>
<head>
   <title> Example: Convert NaN to Number</title>
</head>
<body>
   <p> Convert NaN to Number </p>
   <p id ="output"></p>
   <script>
      let num = NaN || 0;
      document.getElementById("output").innerHTML += num +"<br>";
      document.getElementById("output").innerHTML += typeof num
   </script>
</body>
</html>

Using the isNaN method

The isNaN method is used to check whether a value is NaN or Not. It takes an argument and returns true if the value is NaN and returns false if the value is not NaN. To convert the NaN into Number first check if the variable is NaN or not, if the variable is NaN then assign any number to it.

Syntax

isNaN( num )

Example

In this example, we created a variable num and assigned NaN to it after that we checked if the num is NaN using the isNaN method and assigned 0 after checking if the condition is true.


<html>
<head>
   <title> Example: Convert NaN to Number</title>
</head>
<body>
   <p> Convert NaN to Number </p>
   <p id ="output"></p>
   <script>
      let num = NaN;
      if ( isNaN( num )) {
         num = 0
      }
      document.getElementById("output").innerHTML += num +"<br>";
      document.getElementById("output").innerHTML += typeof num
   </script>
</body>
</html>

Using the ~~ operator

The ~~ operator is also called the double-tilde or double bitwise not operator. It is used to floor the positive numbers which is a short form of the Math.floor() method but only for positive numbers. To convert the NaN to a Number we simply use this operator in front of the NaN.

Syntax

~~NaN

Example

In this example, we are assigning ~~NaN to the variable num and printing the value and type of num.


<html>
<head>
<title> Example: Convert NaN to Number</title>
</head>
<body>
   <p> Convert NaN to Number </p>
   <p id ="output"></p>
   <script>
      let num = ~~NaN;
      document.getElementById("output").innerHTML += num +"<br>";
      document.getElementById("output").innerHTML += typeof num
   </script>
</body>
</html>

Using the Ternary Operator

The conditional operator or ternary operator first evaluates an expression for a true or false value and then executes one of the two given statements depending upon the result of the evaluation.

Syntax

NaN ? NaN : num

In the given example it is clear how to convert NaN to Number using Ternary Operator.

Example


<html>
<head>
   <title> Example: Convert NaN to Number</title>
</head >
<body>
   <p> Convert NaN to Number </p>
   <p id ="output"></p>
   <script>
      let num = NaN ? NaN : 0;
      document.getElementById("output").innerHTML += num +"<br>";
      document.getElementById("output").innerHTML += typeof num
   </script>
</body>
</html>

As we have mentioned four methods to convert NaN to Number, you can use any of the methods according to your need, the third method (using the ~~) is the fastest method but it makes our code a little less readable, if readability is not the concern then you can use this method other-wise ternary operator method and the logical operator methods are best when it comes to readability.