Floating Point Precision in JavaScript

Working with numbers in JavaScript can sometimes lead to unexpected results due to JavaScript’s floating-point precision issues. These arise because JavaScript uses the IEEE 754 standard for representing numbers, which can introduce rounding errors in calculations. Understanding this behaviour is crucial for developers who need accurate mathematical computations. This blog explores why such errors occur and how to handle them effectively.

Table of Contents:

• Common Floating Point Precision Issues in JavaScript
• Why 0.1 + 0.2 is not Equal to 0.3 in JavaScript?
  • Issue 1: Unexpected Floating Point Calculation Results in JavaScript
  • Issue 2: Rounding Errors in JavaScript Floating Point Arithmetic
• How to Handle Floating Point Precision Errors in JavaScript?
  • Method 1: Fix JavaScript Precision Issues Using toFixed()
  • Method 2: Improve JavaScript Number Precision with toPrecision()
  • Method 3: Avoid Decimal Errors in JavaScript Using Multiply and Divide
  • Method 4: Use JavaScript Libraries to Handle Floating Point Precision
• Best Practices for Handling Floating Point Precision in JavaScript
• Conclusion

Common Floating Point Precision Issues in JavaScript

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

Why 0.1 + 0.2 is not Equal to 0.3 in JavaScript?

1. JavaScript uses IEEE 754 double-precision floating-point numbers, which can’t exactly represent some decimal values.
2. The decimal numbers 0.1 and 0.2 are converted into binary approximations when stored.
3. Adding 0.1 and 0.2 results in a binary value slightly greater than 0.3.
4. The number 0.3 also has its own binary approximation, which differs slightly from the result of 0.1 + 0.2.
5. Because of this tiny difference, comparing them using === returns false.

Issue 1: Unexpected Floating Point Calculation Results in JavaScript

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 in JavaScript Floating Point Arithmetic

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 Errors in JavaScript?

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

Method 1: Fix JavaScript Precision Issues 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: Improve JavaScript Number Precision with 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: Avoid Decimal Errors in JavaScript Using Multiply and Divide

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: Use JavaScript Libraries to Handle Floating Point Precision

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 for Handling Floating Point Precision in JavaScript

• 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.

These resources offer a solid starting point for learning HTML, CSS, and JavaScript for web design and development.

How to affect other elements when one element is hovered in CSS – Provides examples for modifying other elements’ appearance.

How to remove the space between inline-block elements in HTML – Demonstrates HTML structure adjustments to avoid gaps.

How to iterate over a JavaScript object – Provides ES6+ solutions for object traversal.

How to use before or after pseudo element to an input field in CSS – Covers use of position and content in pseudo-elements.

Extract properties from objects as an array in JavaScript – Provides examples for filtering or mapping over object properties.

Detect click outside element in JavaScript – Gives examples with event delegation for better control.

Sort an array of objects in JavaScript – Shows chaining for multi-key sorting.

JavaScript var keyword – Covers legacy usage vs modern alternatives.

Most efficient method to groupBy on an array of objects – Compares forEach() vs reduce() in performance.

Change URL without reloading the page in Next.js – Covers use cases like filter changes and modals.

Equality comparison in JavaScript – Teaches best practices for predictable comparisons.

JavaScript highest integer value – Prevents bugs from exceeding numeric limits.

How to Set Floating Point Number Precision in JavaScript – FAQs