So, found one more Weird JavaScript Behaviour which is quite common. let's get into it
First look at this and you'll understand what weird thing imma talkin about.
JavaScript's seemingly odd behavior when it comes to certain arithmetic operations, particularly with floating-point numbers like 0.2 + 0.1, and its very annoying source of confusion and curiosity for many developers. To understand this, we need to go deeeeeeeeeeeeeep into how JavaScript handles numbers and arithmetic under the hood.
Understanding JavaScript's Number Type
In JavaScript, all numbers are represented in the IEEE 754 double-precision floating-point format. This format is used to approximate real numbers, but it can lead to precision issues, especially with decimal fractions.
The IEEE 754 Double-Precision Format
- Binary Representation: Computers use binary (base-2) representation for numbers, whereas humans typically use decimal (base-10). This difference in representation leads to the core of the issue.
- Limited Precision: In the IEEE 754 format, a number is represented using 64 bits - 1 for the sign, 11 for the exponent, and 52 for the fraction. This limitation means that not all decimal fractions can be represented exactly.
Why 0.2 + 0.1 Does Not Equal 0.3 in JavaScript?
Example: Converting Decimal to Binary
- Decimal Fraction: Consider 0.1 in decimal.
- Binary Equivalent: To convert this to binary, we multiply by 2 and take note of the integer part. However, some decimal fractions, like 0.1, cannot be represented accurately in binary; they result in an infinite binary fraction.
For 0.1, the binary conversion process looks something like this:
0.1 x 2 = 0.2 → 0 (no integer part)
0.2 x 2 = 0.4 → 0 (no integer part)
0.4 x 2 = 0.8 → 0 (no integer part)
0.8 x 2 = 1.6 → 1 (integer part is 1)
0.6 x 2 = 1.2 → 1 (integer part is 1)
... and so on ...
This process never ends, so we have to cut it off at some point, leading to an approximation.
JavaScript, like most languages, follows the IEEE 754 standard for floating-point arithmetic, which dictates how numbers are stored and calculated.
- 64-bit Storage: Each number gets 64 bits, with specific bits allocated for the sign, exponent, and fraction. This means only a finite number of digits can be represented.
- Rounding Errors: When JavaScript stores 0.1, it stores the closest possible binary approximation. The same goes for 0.2. But these approximations are not exact.
So, Why Adding 0.2 and 0.1 is not equal to 0.3 in JavaScript, let's take it as an example
- Approximations:0.2 in binary is an approximation. While 0.1 in binary is also an approximation.
- Addition: When these approximations are added, the result is a bit off from the exact 0.3.
- Comparison: Now, when you compare 0.2 + 0.1 with 0.3, you're comparing two slightly different binary numbers.
Think of it like measuring with a slightly inaccurate ruler. If you measure something that should be exactly 10 cm but your ruler's markings are slightly off, it might measure it as 10.1 cm.
Similarly, in JavaScript, when we add 0.2 + 0.1, due to binary representation and rounding, we might get something like 0.30000000000000004 instead of 0.3.
So, how to devil with this isse?
1. Rounding: If you need to compare these numbers, use rounding:
let sum = 0.2 + 0.1;
sum = sum.toFixed(2); // Rounds the number to 2 decimal places
console.log(sum === 0.3); // Now it will be true
2. Epsilon Comparison: For more precise arithmetic, compare the difference to a small number (epsilon):
let sum = 0.2 + 0.1;
console.log(Math.abs(sum - 0.3) < Number.EPSILON); // True
Hope you understood this wierdo concept. will get back with more such stuff if i find one, till then keep watching primeagen