A presentation at JSConf.Asia 2019 in in Singapore 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.
Here’s what was said about this presentation on Twitter.
Getting ready for her first big stage talk @megganeturner #backstage pic.twitter.com/KkwSDv0Ase
— JSConf.Asia (@jsconfasia) June 16, 2019
I sprinted for all my tasks this morning just to catch this 🏃@megganeturner on numbers in #JavaScript
— HJ Chen (@hj_chen) June 16, 2019
Also, she has on the most awesome beyoncss shirt ❤❤❤ #jsconfasia pic.twitter.com/esXKK79Upp
So happy to watch my friend @megganeturner deliver a really interesting talk about numbers in JavaScript!! 😃👏🎉#jsconfasia pic.twitter.com/b5cW8gRZx0
— Charlie Gerard 🏳️🌈 (@devdevcharlie) June 16, 2019
It’s time for Meggan ( @megganeturner ) to lead us through how to navigate numbers in Javascript 💯 using @Beyonce woohoo! #jsconfasia pic.twitter.com/wP9eAA52ax
— JSConf.Asia (@jsconfasia) June 16, 2019
“If you have a 33% width, 33% width and 33% width in grid layout they’re not gonna add up to 💯”
— ᴡᴇɪ 👩🏻🌾 (@wgao19) June 16, 2019
May not be exact quote but loving this reference from @megganeturner ‘s talk on numbers at #jsconfasia 🤣 pic.twitter.com/AobhRgWXf0
Numbers scare me but your talk didn't, absorbed precision and range concepts well for once hehe, pls keep speaking !! @megganeturner 👸🏽✨ https://t.co/ATFCcVW1Gj
— Sarah Thiam (@truckerfling) June 16, 2019
Dug deep into javascript numbers with @megganeturner and Beyoncé, looking into the quirks of 0.333333333333333 and 9007199254740991. 😂@jsconfasia #jsconfasia #jsconfasia2019 pic.twitter.com/kgd2WC7OAr
— Elysia Ong (@xevenheaven) June 16, 2019
@megganeturner Thanks for a really interesting talk at #jsconfasia today!
— Mike Low (@myklow) June 16, 2019