99 lines
4.0 KiB
Plaintext
Raw Normal View History

== Why is this an issue?
2023-06-09 11:25:23 +02:00
Numbers in JavaScript are stored in https://en.wikipedia.org/wiki/Double-precision_floating-point_format[double-precision 64-bit binary format IEEE 754]. Like any other number encoding occupying a finite number of bits, it is unable to represent all numbers.
2023-06-01 14:51:27 +02:00
The values are stored using 64 bits in the following form:
2023-06-01 14:51:27 +02:00
* 1 bit for the sign (positive or negative)
2023-06-06 16:55:51 +02:00
* 11 bits for the exponent (2^n^). -1022 ≤ n ≤ 1023
* 52 bits for the significand (or mantissa)
2023-06-08 17:24:19 +02:00
// When images can be added, add image based on to this one
2023-06-06 16:55:51 +02:00
//image::IEEE_754_Double_Floating_Point_Format.svg.png[]
The actual value of the stored number will be `pass:n[(-1)^sign^ * (1 + significand) * 2 ^exponent^]`
2023-06-06 16:55:51 +02:00
Given this structure, there are limits in both *magnitude* and *precision*.
2023-06-01 14:51:27 +02:00
Due to the 52 bits used for the significand, any arithmetic in need of more precision than 2^-52^ (provided by `Number.EPSILON`) is subject to rounding.
2023-06-01 14:51:27 +02:00
In terms of magnitude, the largest number the 64 bits of the format can store is 2^1024^ - 1 (`Number.MAX_VALUE`).
However, because the 52 bits of the significand, only integers between -(2^53^ - 1) (`Number.MIN_SAFE_INTEGER`) and 2^53^ - 1 (`Number.MAX_SAFE_INTEGER`) can be represented exactly and be properly compared.
2023-06-08 17:24:19 +02:00
[source,javascript]
----
2023-06-09 11:25:23 +02:00
Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2; // true
2023-06-08 17:24:19 +02:00
----
JavaScript provides the `bigint` primitive to represent values which are too large to be represented by the number primitive. BigInts are created by appending `n` to the end of an integer literal, or by calling the `BigInt()` function (without the new operator), with an integer or a string.
2023-06-08 17:24:19 +02:00
[source,javascript]
----
const myBigInt = BigInt(Number.MAX_SAFE_INTEGER);
2023-06-09 11:25:23 +02:00
myBigInt + 1n === myBigInt + 2n; // false
2023-06-08 17:24:19 +02:00
----
2023-06-06 16:55:51 +02:00
== How to fix it
2023-06-01 14:51:27 +02:00
2023-06-08 17:24:19 +02:00
For large numbers, JavaScript provides the helper function `Number.isSafeInteger()` to test if a number is between the safe limits.
2023-06-06 16:55:51 +02:00
When you need to store a large number, use `BigInt`. `bigint` and `number` primitives can be compared between them as usual (e.g. `>`, `==`), but pay attention that arithmetic operations (`+` `pass:[*]` `-` `%` `++**++`) between both types raise an error unless they are converted to the same type. Use the `BigInt` and `Number` functions to convert between both types:
2023-06-08 17:24:19 +02:00
[source,javascript]
----
const myNumber = Number(myBigInt);
const myBigInt = BigInt(myNumber);
----
2023-06-01 14:51:27 +02:00
Be careful converting values back and forth, however, as the precision of a `bigint` value may be lost when it is coerced to a `number` value.
2023-06-08 17:24:19 +02:00
2023-06-09 12:00:28 +02:00
=== Code examples
==== Noncompliant code example
[source,javascript]
----
2023-06-01 14:51:27 +02:00
const foo = 2312123211345545367 // Noncompliant: will be stored as 2312123211345545000
2023-06-06 16:55:51 +02:00
const bar = BigInt(2312123211345545367); // Noncompliant: parameter is first parsed as an integer and thus rounded
----
2023-06-09 12:00:28 +02:00
==== Compliant solution
[source,javascript]
----
2023-06-06 16:55:51 +02:00
const foo = BigInt('2312123211345545367');
const bar = 2312123211345545367n;
2023-06-09 11:25:23 +02:00
----
When in need of more decimal precision, it is recommended to use a dedicated library to ensure that calculation errors are not introduced by rounding.
2023-06-01 14:51:27 +02:00
2023-06-09 12:00:28 +02:00
==== Noncompliant code example
2023-06-09 11:25:23 +02:00
[source,javascript]
----
const baz = 0.123456789123456789 // Noncompliant: will be stored as 0.12345678912345678
----
2023-06-09 12:00:28 +02:00
==== Compliant solution
2023-06-09 11:25:23 +02:00
[source,javascript]
----
2023-06-06 16:55:51 +02:00
// use a library like decimal.js for storing numbers containing many decimal digits
2023-06-08 17:24:19 +02:00
import { Decimal } from 'decimal.js';
2023-06-01 14:51:27 +02:00
const bar = new Decimal('0.123456789123456789');
----
//=== Pitfalls
//=== Going the extra mile
== Resources
=== Documentation
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number#number_encoding[Number encoding]
* MDN web docs - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt[BigInt]
* Wikipedia - https://en.wikipedia.org/wiki/Double-precision_floating-point_format[Double-precision floating-point format]
* Wikipedia - https://en.wikipedia.org/wiki/IEEE_754[IEEE 754 Standard]
//=== Articles & blog posts
//=== Conference presentations
//=== Standards