hi@methebe.com

Know this limitation before using JS everywhere - 30/11/2023

JavaScript

Site under construction! Migrated content might be displayed ugly!

medium-to-markdown@0.0.3 convert node index.js https://medium.com/@birnadin/know-this-limitation-before-using-js-everywhere-826ddc03d661

Know this limitation before using JS everywhere

[Enigma Bits

](https://medium.com/@birnadin?source=post_page-----826ddc03d661--------------------------------)

Enigma Bits

·

Follow

3 min read·Nov 30, 2023

Listen

Share

Photo by Ricardo Arce on Unsplash

Welcome, fellow web developers, to the delightful realm of JavaScript, where numbers dance on the thin line between precision and unpredictability.

In this whimsical yet educational journey, we’ll embark on a quest to understand the peculiarities of JavaScript number precision and JSON serialization.

Inspiration is…

The Marvels of JavaScript Numbers

Let’s kick things off with how JavaScript juggles numbers. Imagine our numbers as tightrope walkers, attempting daring feats within the confines of a 64-bit double-precision floating-point format.

Often, we walk with a safety net. Read along.

The Safety Range

2⁵³ (9007199254740992) is the upper limit of the safety range.

const largeInteger = 9007199254740992;   
const jsonString = JSON.stringify({ value: largeInteger });

The Edge of Precision: Where Numbers Take the Plunge

Ah, but what happens when our daring numbers decide to push the limits?

const largerInteger = 9007199254740993;  
const jsonString2 = JSON.stringify({ value: largerInteger });

As you noticed, the value is indifferent. The reason is the inconsistent floating number. Unlike C the value does not roll over, rather cap at the safety range.

The internal working is not jarring calculus, rather boring bit shifts, so I do not go over that; if you want, let me know in the comments, and I will reply with the details.

Strings to the Rescue: Precision in a Different Act

In this section, we introduce a clever workaround-representing large integers as strings. It’s a performance unlike any other, where strings gracefully sidestep the pitfalls of precision loss.

const largeIntegerAsString = "9007199254740993000";   
const jsonString3 = JSON.stringify({ value: largeIntegerAsString });

Strings take center stage, demonstrating how they elegantly handle large integers without compromising precision (sacrificing performance and storage).

Should you note that the problem arises when transmitting the data across networks with different endianness!

To mitigate this, I suggest you use strings as a primitive method. Looking for a more elegant solution?

BigInt

In the vast world of JavaScript precision, BigInt emerges as the hero, addressing the challenges posed by colossal integers.

BigInt is created by either appending n suffix, or using BigInt() constructor.

Unlike traditional numbers, BigInt gracefully handles integers of any size, breaking free from the constraints of the safe integer range. On top of this, all the arithmetic operations are compatible as well.

const largeInteger = BigInt("9007199254740992000123456789");   
console.log(largeInteger);   
  
const result = largeInteger + BigInt(42); c  
onsole.log(result);

BigInt plays well with regular integers as well.

const isGreaterThanRegular = largeInteger > regularNumber;   
console.log(isGreaterThanRegular);

If you’re a curious beginner or a seasoned developer, BigInt offers a reliable ally, reshaping the narrative of numeric precision in JavaScript.

There’s a catch though. BigInt is a modern ECMAScript.

Workaround

You may use a third-party library as polyfill or fallback called bignumber.js

In closing, mastering JavaScript number precision is key for every developer. Whether you’re starting out or a seasoned pro, understanding these intricacies is crucial. For more insights and exclusive content, subscribe(it’s free) and support my college degree.

Stay ahead in the world of web development-subscribe now! 🚀

Till then it’s meTheBE signing off, Bye.