How to check if a variable is an integer in JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we will learn to check if a variable is an integer in JavaScript. Before we solve the problem, we must have a problem. We can ask ourselves, “why do we need to check if the variable is an integer?”. Let’s understand the answer using a single example. Suppose, we are taking the value from the user using the input text box. It returns the values in the string format, and now think that we are adding values. Will we get the correct result? Obviously, not. So, in such cases, we need to check if the variable is an integer or not.

Also, it often happens that we need to operate with only an integer rather than a float. So, there can be many scenarios where we need to check variable types.

Here are different methods to check if the variable is an integer or any other type.

Using the Number.isInteger() Method
Using the typeof Operator
Using the parseInt() Method

Using the Number.isInteger() Method

The Number isInteger() method takes the variable as a parameter and returns the true if the variable is an integer. Otherwise, it returns false.

Syntax

Users can follow the below syntax to use the isInteger() method.

Number.isInteger( variable );

Parameters

variable − It can be any variable such as float number, string, etc. to check if it is a Integer or not

Example

In the below example, we have used the isInteger() method to check if the variable is Integer or not. We have applied the isInteger() method for the different values, and one of them is Infinity. Users can see the results in the output.


<html>
<head>
   <title>Check if variable is of integer type.</title>
</head>
<body>
   <h2>Check if variable is of integer type in JavaScript using <i> isInteger() </i> method.</h2>
   <h4>output for value 10.</h4>
   <div id = "result1"></div>
   <h4>Output for Infinity.</h4>
   <div id = "result2"></div>
   <h4>output for 0.123</h4>
   <div id = "result3"></div>
   <script>
      let result1 = document.getElementById("result1");
      let result2 = document.getElementById("result2");
      let result3 = document.getElementById("result3");
      let number = 10;
      result1.innerHTML = Number.isInteger(number)
      number = Infinity;
      result2.innerHTML = Number.isInteger(number);
      numer = 0.123;
      result3.innerHTML = Number.isInteger(number);
   </script>
</body>
</html>

In the above output, users can see that, isInteger() method returns ‘false’ for the infinity and float value.

Using the typeof Operator

The typeof operator is useful to check the type of any variable in JavaScript. We will check the type of variable first, if type of the variable is a number, then we will check that it contains the decimal part or not. If the number doesn’t contain the decimal part, it should be an Integer. To check if the number contains the decimal part, we can take the modulo of the number with 1.

Users can follow the below syntax to apply the above method.

Syntax

let number = 10;
// if modulo of number with 1 is 0, it doesn’t contains the decimal part and number is an Integer.
let result = typeof number == "number" && number % 1 == 0 ? true : false;

Example


<html>
<head>
   <title>Check if variable is of integer type.</title>
</head>
<body>
   <h2>Check if variable is of integer type in JavaScript using <i> typeof operator.</i></h2>
   <h4>output for value 10</h4>
   <div id = "result1"></div>
   <h4>Output for 10.10</h4>
   <div id = "result2"></div>
   <script>
      let result1 = document.getElementById("result1");
      let result2 = document.getElementById("result2");
      let number = 10;
      result1.innerHTML = typeof number == "number" && number % 1 == 0
      ? true : false;
      number = 10.10;
      result2.innerHTML = typeof number == "number" && number % 1 == 0
      ? true : false;;
   </script>
</body>
</html>

Using the parseInt() Method

The parseInt() method returns the integer part from the string or float number. We will also parse the integer part from the number and compare it with our real number. If the returned value from the parseInt() method and actual number values is the same, then the number is an Integer.

Also, we will use the strict equality operator in this method to compare the returned values and actual value as it compares the data type of variable also.

Users can follow the below syntax to use the above method.

Syntax

number === parseInt( number );

Example

In the below example, we have used the parseInt() method and strict equality operator to check that number is an Integer. As a second input, we have passed the string value to check whether it is an integer or not. Users can see the result in the output.


<html>
<head>
   <title>Check if variable is of integer type.</title>
</head>
<body>
   <h2>Check if variable is of integer type in JavaScript using <i> parseInt() </i> method.</h2>
   <h4>output for value 14300</h4>
   <div id = "result1"></div>
   <h4>Output for "20"</h4>
   <div id = "result2"></div>
   <script>
      let result1 = document.getElementById("result1");
      let result2 = document.getElementById("result2");
      let number = 14300;
      result1.innerHTML = number === parseInt(number);
      number = "10";
      result2.innerHTML = number === parseInt(number);
   </script>
</body>
</html>

We have learned three approaches to checking if the variable is an Integer. It is better to use the isInteger() method to achieve our goal. However, there are many other approaches we haven’t discussed in this tutorial. One of them is to remove the decimal part from the number, use the Bitwise operator, and compare it with the actual value.