Is 'floating-point arithmetic' 100% accurate in JavaScript?

Javascript Web Development Front End Technology

Floating point

A number which is either positive or negative whole number with having a decimal point to it is called floating point. Let’s consider these numbers, 1.52, 0.14 and also -98.345 are considered as floating point numbers. Whereas 77, 56, 90 and 0 are not considered as floating point numbers.

In JavaScript this format will store the numbers in 64 bits. The numbers which are in fraction are stored in 0 to 51 bits. Coming to exponent, they are stored in 52 to 62 bits. And the sign bits will be stored in 63^rd bit.

Floating point arithmetic

Floating point arithmetic is never been 100% perfect in JavaScript. Let’s consider a fraction value which is 1/6 that is 0.16666……. In this scenario the value of .1666 will get rounded at some point. If we try to add another decimal value to the above value, We may not the expected result as because when two decimal values got added definitely there will be rounding errors. These rounding errors will not be a concern as those are some minute errors and won’t affect the output of the code.

Example 1

In this below example, we were trying to add two decimal values 0.2 and 0.4. The general output will be 0.6. But, the desired output is not the actual output due to rounding error.


<html>
<head>
   <title>Rounding Errors</title>
</head>
<body>
   <h3 id=heading></h3>
   <h3>Thus, Floating point arithmetic will not show 100% accuracy in JavaScript.</h3>
   <script>
      let f_p_a = 0.2 + 0.4;
      document.getElementById("heading").innerHTML = "0.2 + 0.4 = " + f_p_a;
   </script>
</body>
</html>

Example 2

The following example having one decimal value and non-decimal value which are 2.14 and 2. The actual will be different from the desired output just because of rounding error.


<html>
<head>
   <title>Rounding Errors</title>
</head>
<body>
   <h3 id=heading></h3>
   <h3>Thus, Floating point arithmetic will not show 100% accuracy in JavaScript.</h3>
   <script>
      let a = 2.14;
      let b = 2;
      let c = a + b;
      document.getElementById("heading").innerHTML = "2.14 + 2 = " + c;
   </script>
</body>
</html>

Example 3

In the example below, we are trying to do sum of one decimal value and another non decimal value. This non decimal values is of 16 digits because the integers will be accurate till they are upto 15 digits. Also here we ended up with the output having rounding error.


<html>
<head>
   <title>Rounding Errors</title>
</head>
<body>
   <h4 id=heading></h4>
   <p>Integers will be accurate till they are upto 15 digits.</p>
   <p>Thus, Floating point arithmetic will not show 100% accuracy in JavaScript.</p>
   <script>
      var a = 2.14;
      var b = 9999999999999999; /*It will be 10000000000000000 (1e+16) at the time of execution */
      var c = a + b;
      document.getElementById("heading").innerHTML = " 2.14 + 9999999999999999 = " + c;
   </script>
</body>
</html>

Example 4

In this example below, we have done two operations. First is rounding error and second is correction factors.

To use correction factors we need to perform multiplication by a suitable power of 10 so that the arithmetic happens between integers.

Consider the below example values 0.1 and 0.2, the correction factor will be 10. And we performed the correction factor


<!DOCTYPE html>
<html>
   <title>Online Javascript Editor</title>
<head>
   <script>
      function test() {
         let a = 0.1;
         let b = 0.2;
         let c = a*b;
         document.write("Rounding error: ");
         document.write(c, "<br>");
         let x = 10;
         let cf = (a * x) * (b * x) / (x * x);
         document.write("After using correction factor: ");
         document.write(cf);
      }
      test();
   </script>
</head>
<body>
</body>
</html>

Nikhilesh Aleti

Updated on: 19-Sep-2022

356 Views

Kickstart Your Career

Get certified by completing the course

Get Started