Double the Beyoncé: Navigating Numbers in JavaScript

Double the Beyoncé !! Navigating Numbers in JavaScript Meggan Turner - Software Engineer @ Jaxsta @megganeturner

@megganeturner

What’s a number? @megganeturner

Count Measure Label Identify @megganeturner

Classification @megganeturner

Natural 1, 2, 3, 4… Integer -2, -1, 0, 1, 2… Rational ½, ⅓, ¼… Irrational π, √2… Real 1, ½, 0.7, π, √2… @megganeturner

Complex Transcendental Imaginary Infinity (& —infinity) Infinitesimals Surreal … ¯_(ツ)_/¯ @megganeturner

Representation @megganeturner

8 ⼋八 आठ @megganeturner

Base 10 1234567 Binary 0b100101101011010000111 Octal 0o4553207 Hexadecimal 0x12D687 Scientific Notation 1.234567e+06 (or 1.234567 * 106) @megganeturner

What’s a number in JavaScript? @megganeturner

Standards @megganeturner

IEEE-754 IEEE Standard for Floating Point Arithmetic Or why 0.1 + 0.2 !== 0.3 @megganeturner

• Specifies the implementation of floatingpoint arithmetic in JavaScript (how we represent decimal points in binary) • Allows us to represent real numbers as an approximation, to support a trade off between range & precision @megganeturner

Range -9007199254740991 — +9007199254740991 Precision 17 decimal places (e.g. 0.30000000000000004) @megganeturner

01001000 01100101 01101100 01101100 01101111 00101100 00100000 01010011 01101001 01101110 01100111 01100001 01110000 01101111 01110010 01100101 00100001 Hello, Singapore! @megganeturner

We can’t have decimal points in binary 🤔 @megganeturner

Floating-point arithmetic tries to account for this 💪 @megganeturner

1234567 01000001001100101101011010000111 00000000000000000000000000000000 @megganeturner

64 bits 1 bit 11 bits 52 bits 0 10000010011 0010110101101000011100000000000000000000000000000000 Sign Exponent Significand / Mantissa

1.23 * 6 10 @megganeturner

@megganeturner

Integers Fractions -2, -1, 0, 1, 2 ½, ⅓, ¼, ⅕… 🎉 % @megganeturner

⅓ = 0.333… 0.33 + 0.33 + 0.33 !== 1.0 @megganeturner

0.1 (decimal) 0.00011001100110011001100110011001 10011001100110011001101 (binary) 0.10000000000000000555 (decimal) @megganeturner

How big a problem is this really? @megganeturner

0.00000000000000004cm = 0.0000000003 times as long as a Glucose Molecule 🔬 @megganeturner

0.00000000000000004km = 0.0000000000000000000001 times as long as The Distance from Earth to the Moon 🌏 🌝 @megganeturner

0.00000000000000004ly = 38.38cm, or about the height of a standard bowling pin 🎳 @megganeturner

In most cases - this degree of accuracy is not going to be that important @megganeturner

Size really does matter @megganeturner

@megganeturner

A trade off between range and precision @megganeturner

🤔 @megganeturner

@megganeturner

✨ ✨ ✨ ✨ 3.28 x ✨ ✨ ✨ 80 10 ✨ ✨ ✨ @megganeturner

(or ~9 quadrillion) @megganeturner

@megganeturner

https://jaxsta.com/ @megganeturner

@megganeturner

https://jaxsta.com/ @megganeturner

⚠ @megganeturner

New Tab Dev Tools @megganeturner

• Correct, unparsed integer in new tab • Parsed integer in dev tools • Parsed integer in new tab ¯_(ツ)_/¯ • Parsed integer in dev tools @megganeturner

Solution: use UUIDs @megganeturner

https://jaxsta.com/ @megganeturner

@megganeturner

Enter BigInt @megganeturner

• New numeric primitive (introduced in 2018) • Available in Chrome, Firefox (68 beta), Edge • We can represent numbers beyond the MAX_SAFE_INTEGER @megganeturner

@megganeturner

⚠ No mixed type operations ⚠ @megganeturner

@megganeturner

• Not ready for production apps (yet) • Not available in all browsers • Not a lot of documentation available @megganeturner

@megganeturner

, ! @megganeturner

In Summary @megganeturner

🎯 • 64 bit floating points • Precision errors • Round! 🐳 • Max Safe Integer • BigInt @megganeturner

Less @megganeturner

More @megganeturner

Less @megganeturner

More @megganeturner

@megganeturner