Weird Javascript: Precision of 0.1 + 0.2

Welcome to another mind-scratching exploration of my "Weird JavaScript" series! In my previous articles, we have already explored many enigmatic and mysterious corners of JavaScript, unravelling its peculiar behaviours and uncovering the secrets behind its intriguing quirks. Today we are going to explore another one. Guess what ??? The addition of 0.1 + 0.2 😂. You might be thinking what's weird about that !! There is weirdness and amazing logic here. So, without further ado, let's embark on this mind-bending journey into the realm of "Weird JavaScript"!

In Javascript, many "simple" things don't work in a simple way. So does the addition of 0.1 and 0.2 simply. While exploring and playing with numbers in javascript, I found that the operation 0.1 + 0.2 yields 0.30000000000000004 and not 0.3, also, 0.1 + 0.2 === 0.3 returns false. So why is this ?? Is the Javascript floating point math broken? Well, I tried to investigate and found some serious logic here and the way Javascript is made, makes it do so.

In JavaScript, the above behaviour is due to the way floating-point numbers are represented and handled in binary format. JavaScript uses the IEEE 754 standard, which represents numbers as 64-bit floating-point values (also known as double-precision). The precision of these floating-point numbers is limited, which can lead to small rounding errors in certain arithmetic operations.

When we perform the operation 0.1 + 0.2, the binary representation of these two numbers undergoes some rounding errors due to the limitations of the IEEE 754 representation. The exact decimal representation of 0.1 and 0.2 cannot be represented exactly in binary, leading to a small rounding error in the result. The exact decimal representation of 0.1 in binary is a repeating fraction: 0.1 (in decimal) = 0.00011001100110011001100110011001100110011001100110011010... (in binary), Similarly, the exact decimal representation of 0.2 in binary is also a repeating fraction: 0.2 (in decimal) = 0.001100110011001100110011001100110011001100110011001101... (in binary). So, when we add these two numbers together, the repeating fractions cause a small error in the result. The actual result of 0.1 + 0.2 is approximately 0.30000000000000004. And since 0.1 + 0.2 yields 0.30000000000000004, on the other hand, 0.3 in JavaScript is represented exactly as 0.3. So when we compare 0.1 + 0.2 with 0.3 using the strict equality operator (===), JavaScript checks if both values have the same type and the same value. Since the result of 0.1 + 0.2 is not exactly equal to 0.3, the comparison returns false.

To handle such precision issues, we can use a common workaround, such as rounding the result to a specific number of decimal places using the toFixed() method or a custom rounding function. For example:

const result = (0.1 + 0.2).toFixed(1);
console.log(result); // Output: "0.3"
console.log(result === 0.3); // Output: true

By rounding the result to one decimal place, we get the expected output of "0.3" and the comparison with 0.3 using the === operator returns true. However, we have to keep in mind that using toFixed() converts the result to a string, so be cautious if further calculations are needed with the rounded value.

A simple NOTE here is that this behaviour is seen in many programming languages, so it's not a weirdness of only Javascript but a common weirdness of many programming languages !!!

Alright folks, enough for today!!! Will see you on another quirky exploration of Javascript. Until then, keep coding, keep experimenting, and keep your curiosity alive.