A presentation at Web Directions: Code 2019 in in Melbourne VIC, Australia by Meggan Turner
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
@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
@megganeturner
@megganeturner
https://jaxsta.com/ @megganeturner
@megganeturner
@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
@megganeturner
@megganeturner
⚠ No mixed type operations ⚠ @megganeturner
@megganeturner
@megganeturner
@megganeturner
@megganeturner
@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
Do you lie awake at night wondering why you can’t count up past 9 quadrillion in JavaScript? Have you ever been troubled by numbers that don’t add up correctly or do what you expect (looking at you, 0.1 + 0.2)?
JavaScript’s numbers can behave a little… unexpectedly at times, and cause bugs that can have you scratching your head for hours on end. From incorrect arithmetic to Beyoncé showing up on your page twice as often as you expect, in this talk we’ll take a look at the quirks that come from numbers in JavaScript & the strange issues they can cause.
**Video available on Conffab: https://conffab.com/video/double-the-beyonce-navigating-numbers-in-javascript/ **
Here’s what was said about this presentation on social media.
for free. You
can too.