Double the Beyoncé: Navigating Numbers in JavaScript

Slide 1

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

Slide 2

@megganeturner

Slide 3

What’s a number? @megganeturner

Slide 4

Count Measure Label Identify @megganeturner

Slide 5

Classification @megganeturner

Slide 6

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

Slide 7

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

Slide 8

Representation @megganeturner

Slide 9

8 ⼋八 आठ @megganeturner

Slide 10

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

Slide 11

What’s a number in JavaScript? @megganeturner

Slide 12

Standards @megganeturner

Slide 13

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

Slide 14

• 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

Slide 15

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

Slide 16

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

Slide 17

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

Slide 18

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

Slide 19

1234567 01000001001100101101011010000111 00000000000000000000000000000000 @megganeturner

Slide 20

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

1.23 * 6 10 @megganeturner

Slide 21

@megganeturner

Slide 22

@megganeturner

Slide 23

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

Slide 24

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

Slide 25

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

Slide 26

How big a problem is this really? @megganeturner

Slide 27

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

Slide 28

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

Slide 29

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

Slide 30

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

Slide 31

Size really does matter @megganeturner

Slide 32

@megganeturner

Slide 33

A trade off between range and precision @megganeturner

Slide 34

🤔 @megganeturner

Slide 35

@megganeturner

Slide 36

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

Slide 37

(or ~9 quadrillion) @megganeturner

Slide 38

@megganeturner

Slide 39

@megganeturner

Slide 40

@megganeturner

Slide 41

https://jaxsta.com/ @megganeturner

Slide 42

@megganeturner

Slide 43

@megganeturner

Slide 44

@megganeturner

Slide 45

https://jaxsta.com/ @megganeturner

Slide 46

⚠ @megganeturner

Slide 47

New Tab Dev Tools @megganeturner

Slide 48

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

Slide 49

Solution: use UUIDs @megganeturner

Slide 50

https://jaxsta.com/ @megganeturner

Slide 51

@megganeturner

Slide 52

Enter BigInt @megganeturner

Slide 53

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