Floating Point Precision in JavaScript

If you have ever worked with floating-point numbers in JavaScript, then you might have found weird results sometimes, the addition of 0.1 and 0.2 would have given you 0.30000000000000004, not exactly 0.3. This unexpected behaviour happens because JavaScript uses the IEEE 754 standard for representing numbers, and this can create small precision errors in floating-point number calculations. In this blog, you will learn why these errors occur and how you can deal with them efficiently.

Table of Contents:

• Common Issues With Floating-Point Number Precision
  • Issue 1: Unexpected Results
  • Issue 2: Rounding Errors
• How to Handle Floating-Point Precision in JavaScript
  • Method 1: Using toFixed()
  • Method 2: Using toPrecision()
  • Method 3: Multiplication and Division Trick
  • Method 4: Using External Library
• Best Practices
• Conclusion

Common Issues With Floating-Point Number Precision

JavaScript stores numbers as 64-bit floating-point numbers or IEEE 754 format. Some decimal numbers like 0.1 and 0.2 cannot be represented accurately in binary. As a result, calculations of such floating-point numbers may produce small inaccuracies in results. Here are some common issues with floating-point number precision:

Kickstart your career in tech with hands-on web development training.

Start Your Web Development Journey Today!

Explore Program

Issue 1: Unexpected Results

The addition of two floating-point numbers like 0.1 and 0.2 cannot give you 0.3. Instead of the value 0.3, it will give 0.30000000000000004.

Issue 2: Rounding Errors

Multiplication and division with floating-point numbers do not produce accurate results every time.

Example:

Output:

Explanation: Another common issue of using floating-point numbers in the calculations is that whenever you’re using them in multiplications and divisions, they might produce incorrect results. For example, console.log(1.007 * 100) can print the result as 100.69999999999999, not 100.70.

How to Handle Floating-Point Precision in JavaScript

Here are a few methods to set the floating-point number precision in JavaScript:

Method 1: Using toFixed()

The toFixed() method is one of the simplest ways to set the precision of floating-point numbers in JavaScript. The toFixed(n) method rounds a number to n decimal places and returns the string.

Example:

Output:

Explanation: In this example, the toFixed(1) operator is used to print a result with a precision of up to 1 decimal place. You can change this value as you want.

Method 2: Using toPrecision()

The toPrecision(n) method formats a number to n significant digits. It is useful for controlling the total number of digits rather than just decimals.

Example:

Output:

Explanation: In this example, the toPrecision() method is used to set the precision value for floating-point numbers. In this case, the .toPrecision(4) prints the value of length 4.

Method 3: Multiplication and Division Trick

A logical way to set the precision for floating-point numbers is to use multiplication and division both, when you are doing calculations using floating-point numbers.

Example:

Output:

Explanation: In this example, Math.round((0.1 + 0.2) * 100) can calculate the result as 30, and when 30 is divided by 100, it prints the result as 0.3.

Method 4: Using an External Library

Sometimes, you require the result with strict precision. Then, the external libraries like Big.js, Decimal.js, and Math.js, which support high-precision calculations, are useful.

Example:

Output:

Explanation: Using an external library like Big.js is very helpful when you are dealing with high-precision calculations.

Best Practices

• Always round numbers before using them in calculations.
• Use toFixed() or toPrecision() if you want to print results only.
• For financial calculations, consider using external libraries like Big.js or Decimal.js

Conclusion

Floating-point number precision issues are common in JavaScript due to its use of IEEE 754 floating-point arithmetic. However, by understanding the issues and the methods to solve this issue, like toFixed(), toPrecision(), and the Big.js library, you can efficiently manage floating-point number precision in your applications.

How to Set Floating Point Number Precision in JavaScript – FAQs