Teach with us

How to check whether a value is a number in JavaScript?

Front End TechnologyJavascriptWeb Development

In this tutorial, we will learn to check whether a value is a number in JavaScript. In JavaScript, it is necessary to check the variable's data type while performing some operation. Otherwise, it can create some unknown bugs in your application.

For example, when users use the addition operator with the string, it concatenates the two strings, and in the same way, if users use the addition operator with a number, it adds two numbers. Now, think that the user wants to add two numbers but is concatenating the two strings.

Here, we have three different methods to check whether a variable is of type number or not.

  • Using the typeof Operator

  • Using the isNaN() Method

  • Using the Number.isFinite() Method

Using the typeof Operator

In this approach, we will check the variable type using the typeof operator. It returns the type of variable. If the returned value is ‘number’, the variable is the type of number.

Syntax

Users can use the below syntax to check whether a variable is a number or not using typeof operator.

let number = 20;
if ( typeof number == 'number' ) {
   
   // perform some operation with number.
}

Example

In the below example, we have checked the type of different variables using the typeof operator. It prints the message on the screen according to whether a variable is a number or not.

<html>
<head>
</head>
<body>
   <h2>Check whether a value is number or not in JavaScript.</h2>
   <h4>Using the <i>typeof</i> operator to check value is number or not.</h4>
   <div id = "number1"></div>
</body>
   <script>
      var number1 = document.getElementById("number1");
      function checkNumber(number) {
      return typeof number == "number" ? "is number" : " is not a number";
      }
      number1.innerHTML = "123 " + checkNumber(123) + " <br/> ";
      number1.innerHTML += "true " + checkNumber(true) + " <br/> ";
      number1.innerHTML += "\'Hello\' " + checkNumber("Hello") + " <br/> ";
   </script>
</html>

Using the isNaN() Method

In the second approach to check whether a variable is a number or not, we will use the isNaN() method. The meaning of the NaN is not a number. The isNaN() method returns true if the passed parameter value is not a number; otherwise, it returns false.

To achieve our goal, we will take the negation of the returned value. So, it will return true when a variable is of number type, and the false variable is of another data type.

Syntax

let number = 20;
let result = !isNaN(number);

Parameters

  • number − It is a variable of any data type, for which we want to check whether variable is number or not.

Example

In the example below, we have used the isNaN() method to check whether different variables is number or not. We have also checked for the Boolean values.

<html>
<head>
</head>
<body>
   <h2>Check whether a value is number or not in JavaScript.</h2>
   <h4>Using the <i> isNaN() </i> method for different values.</h4>
   <div id = "number1"></div>
</body>
   <script>
      var number1 = document.getElementById("number1");
      number1.innerHTML = "-32.34 is number : " + !isNaN(-32.34) + " <br/>";
      number1.innerHTML += "false is number : " + !isNaN(false) + " <br/>";
      number1.innerHTML += "TutorialsPoint is number : " + !isNaN("TutorialsPoint") + " <br/> ";
   </script>
</html>

The above method returns the true for the Boolean values, as Boolean values are represented in the form of 0 and 1. So, it is the limitation of the isNaN() method. It will return an accurate result for the Boolean values.

Using the Number.isFinite() Method

The Number.isFinite() method is the built-in JavaScript number library method. It takes a variable as a parameter and returns true for all numeric values, except Infinity values.

Syntax

let variable = 20;
let result = Number.isFinite( variable );

parameters

  • variable − It is a value of any data type, for which users want to check whether value is number or not.

Example

The below example demonstrates the use of the Number.isFinite() method. We are testing for different variables and values to determine that variable is of type number or not.

<html>
<head>
</head>
<body>
   <h2>Check whether a value is number or not in JavaScript.</h2>
   <h4>Using the <i> Number.isFinite() </i> method for different values.</h4>
   <div id = "number1"></div>
</body>
   <script>
      var number1 = document.getElementById("number1");
      number1.innerHTML = "232.14 is number : " + Number.isFinite(232.14) + " <br/> ";
      number1.innerHTML += "Infinity is number : " + Number.isFinite(Infinity) + " <br/> ";
      number1.innerHTML += "Yes is number : " + Number.isFinite("yes") + " <br/> ";
   </script>
</html>

We have learned the three different approaches to checking whether the value is a number. The first approach is the most popular and easy one. The second approach has some limitations for the Boolean values, so it is not recommended. The third approach is also useful as it will work for all variables.

raja
Shubham Vora
Updated on 08-Aug-2022 08:56:59

Previous Page Print Page Next Page  
Advertisements