Precise Decimal Math in JavaScript with Fraction.js

Ever tried to do precise calculations in JavaScript? These issues can cause serious problems, especially when dealing with money, percentages, or any calculations that need to be exact.

1
// Basic arithmetic issues
2
0.1 + 0.2                            // 0.30000000000000004
3
1.0 - 0.9                            // 0.09999999999999998
4
0.7 + 0.1                            // 0.7999999999999999
5

6
// Division problems
7
1/3                                  // 0.3333333333333333
8
1/6                                  // 0.16666666666666666
9

10
// Multiplication can be surprising
11
0.3 / 0.1                            // 2.9999999999999996
12
1/98 * 98                            // 0.9999999999999999
13

14
// Money calculations break
15
19.99 * 0.1                          // 1.9989999999999999

This isn’t a JavaScript bug. It’s a fundamental limitation of how computers store decimal numbers, and it affects nearly every programming language. To understand why we need Fraction.js, we first need to understand what’s really happening under the hood.

Computers store numbers in binary (base-2). While this works perfectly for whole numbers, it creates problems with decimals.

In base-10 (our decimal system), we can represent 1/10 simply as 0.1. But in binary, 0.1 is a repeating fraction - like trying to represent 1/3 in decimal (0.333333…). When this gets stored in JavaScript’s 64-bit floating-point format (IEEE 754), it has to be truncated, leading to tiny rounding errors.

You might think BigInt could solve this problem, but it has its own limitations:

1
// BigInt only works with whole numbers
2
BigInt(1) / BigInt(3)  // Error: Cannot divide BigInts
3
BigInt(0.1)            // TypeError: Cannot convert decimal to BigInt

BigInt solves precision for whole numbers but can’t handle decimals at all. It’s designed for different use cases like cryptography or very large integer calculations.

A common workaround is to multiply everything by 100 to avoid decimals entirely:

1
// Common attempt: multiply to remove decimals
2
const dollars = 19.99 * 100  // 1999 cents
3
const tax = 8.5 * 100       // 850 basis points
4

5
// Still breaks down
6
console.log((dollars * tax) / 10000) // 169.91499999999996 - More rounding errors

This approach looks simple but falls apart with complex calculations or multiple operations.

Working with Fractions Instead of Decimals

Let’s solve these precision problems using Fraction.js:, a library that handles numbers as fractions instead of floating-point decimals. Just like we learned math in school: 1/3 is more precise than 0.333333.

1
➜ npm i fraction.js

Fraction.js uses a BigInt representation for both the numerator and denominator, ensuring minimal performance overhead while maximizing accuracy. Its design is optimized for precision, making it an ideal choice as a foundational library for other math tools, such as Polynomial.js and Math.js

1
import Fraction from 'fraction.js';
2

3
// Basic arithmetic is now exact
4
new Fraction(0.1).add(0.2).toString(2)       // "0.30"
5
new Fraction(1.0).sub(0.9).toString(2)       // "0.10"
6
new Fraction(0.7).add(0.1).toString(1)       // "0.8"
7

8
// Division with controlled precision
9
new Fraction(1, 3).toString(2)               // "0.33"
10
new Fraction('1/6').toString(2)              // "0.17"
11

12
// Money calculations stay precise
13
const price = new Fraction('19.99')
14
const tax = new Fraction('0.085')  // 8.5% tax
15

16
const total = price.add(price.mul(tax))
17
total.toString(2)                            // "21.69"
18

19
// For fractions, we might want the actual fraction representation
20
new Fraction('0.333333').toFraction()        // "1/3"
21
new Fraction('1.4166666').toFraction()       // "17/12"

Instead of trying to represent decimals in binary, which causes those rounding errors we saw earlier, Fraction.js stores each number as a ratio of whole numbers. For example, 0.1 becomes 1/10 internally. This means our calculations stay exact, just like they would on paper.

Understanding the Limitations

Fraction.js is powerful, but it’s not magic. It works with rational numbers - numbers that can be expressed as a ratio of integers (like 3/4 or 22/7). This makes it perfect for money calculations or simple fractions, but not so great for irrational numbers like π or √2.

While it uses BigInt internally, you’re still working with JavaScript’s number system at the edges.

This means you get more precision than regular decimals, but not infinite precision. Some operations have limitations too. Square roots give approximations rather than exact values, and transcendental functions like sin or cos aren’t supported. Complex numbers are also off the table.

Even with these limitations, Fraction.js is incredibly useful. You can use it to calculate exact values ahead of time, handle money calculations without rounding errors, build educational software that works with fractions, or solve any problem where decimal precision really matters. The key is knowing when to use it and when something else might be more appropriate.

• https://raw.org/article/rational-numbers-in-javascript/
• https://github.com/rawify/Fraction.js