How do I convert a float number to a whole number in JavaScript?

Front End TechnologyJavascriptWeb Development

In this tutorial, we will learn to convert a float number to a whole number in JavaScript. The whole number is the number that doesn’t contain the fractional part. For example, 5.22 is the float number containing the fractional part, and the whole number doesn’t contain a decimal part. So, our goal in this tutorial is to remove the fractional part from the number.

We can have various methods to cut out the decimal part from the float number to make it whole, and some of them we have discussed here.

  • Using the Math.trunc() and Math.round() Methods

  • Using the parseInt() Method

  • Using the Bitwise OR (|) Operator

  • Subtracting the Fractional Part from the Float Number

Using the Math.trunc() and Math.round() Methods

The Math.trunc() method cuts the fractional part from the float numbers and makes it the whole number.

The Math.round() method rounds the fractional number towards the nearest whole number. For example, if the fractional part is less than 0.5, it returns the nearest smaller number than the current number, and if the fractional part is greater than 0.5, it returns the nearest greater number than the float number.

Syntax

Users can follow the below syntax to use the Math.trunc() and Math.round() method.

let result = Math.trunc ( number );
let result = Math.round ( number );

Parameters

  • number − It is a float number which we need to convert to the whole number.

Example

In this example, we will use the Math.trunc() and Math.round() method to convert the float number to the whole number.

<html>
<head>
   <title>convert a float number to a whole number in JavaScript</title>
</head>
   <body>
   <h3>Convert a float number to a whole number in JavaScript</h3>
   <p>Converting 42.99 to whole number using Math.trunc() method:</p>
   <div id="output1"></div>
   <p>Converting 42.99 to whole number using Math.round() method:</p>
   <div id="output2"></div>
   <script>
      let output1 = document.getElementById("output1");
      let output2 = document.getElementById("output2");
      let number = 42.99;
      let result = Math.trunc(number);
      output1.innerHTML = result;
      number = 42.99;
      result = Math.round(number);
      output2.innerHTML = result;
   </script>
</body>
</html>

In the above output users can see that Math.trunc() method has removed the decimal part and Math.round() method has rounded the number to nearest integer.

Using the parseInt() Method

In this approach, we will use the parseInt() method. The parseInt() method extracts the whole number from the float number or string in JavaScript. The other easiest solution is to get the whole number part from the float number.

Syntax

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

let result = parseInt( number );

Example

In the below example, we have used the parseInt() method to convert the float number to whole number.

<html>
<body>
   <h2>Convert a float number to a whole number in JavaScript</h2>
   <h4>Converting 22.19234 to whole number using parseInt() method:</h4>
   <div id="outputDiv"></div>
   <script>
      let outputDiv = document.getElementById("outputDiv");
      let number = 22.19234;
      let res = parseInt(number);
      outputDiv.innerHTML = res;
   </script>
</body>
</html>

Using the Bitwise OR (|) Operator

When we perform the Bitwise OR (|) operation of 0 with the float number, it removes the decimal part from the current number and converts it to the whole number. Similarly, users can also use other Bitwise operators, such as the Double Not operator (~~), Right shift, and left shift operators.

Syntax

let result = number | 0; // number is the float number

Example

In the given example, we are performing the Bitwise OR operation of 209.54321 with the 0 and converting it into the whole number. After that, we have rendered the output using JavaScript.

<html>
<body>
   <h2>Convert a float number to a whole number in JavaScript</h2>
   <h4>Converting 209.54321 to whole number using Bitwise OR (|) operator:</h4>
   <div id="outputDiv"></div>
   <script>
      let outputDiv = document.getElementById("outputDiv");
      let number = 209.54321;
      let res = number | 0;
      outputDiv.innerHTML = res;
   </script>
</body>
</html>

Subtracting the Fractional Part from the Float Number

This method will find the fractional part of the float number. To find the fractional part of the float number, we just need to take the modulo of the number with 1. Next, we will subtract the fractional part from the number.

Syntax

let fractionalPart = number%1;
let result = number – fractionalPart;

Example

In the below example, we are finding the fractional part of the number by taking the modulo of number with 1. After that, we are subtracting the fractional part from the number to remove decimal part from it.

<html>
<body>
   <h4>Converting 856.24657 to whole number by removing the fractional part:</h4>
   <div id="outputDiv"></div>
   <script>
      let outputDiv = document.getElementById("outputDiv");
      let number = 856.24657;
      let fractionalPart = number % 1;
      let result = number - fractionalPart;
      outputDiv.innerHTML = result;
   </script>
</body>
</html>

Conclusion

We have discussed the four approaches to converting the float number to a whole number. The second approach is the easiest one as it parses the integer only from the float number. However, the user should use the third approach as it is the fastest one.

raja
Updated on 20-Jul-2022 08:17:30

Advertisements