# Double the Beyoncé: Navigating Numbers in JavaScript

A presentation at Web Directions: Code 2019 in June 2019 in Melbourne VIC, Australia by Meggan Turner

#### Slide 1

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

@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

@megganeturner

@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

@megganeturner

#### Slide 33

A trade off between range and precision @megganeturner

🤔 @megganeturner

@megganeturner

#### Slide 36

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

@megganeturner

@megganeturner

@megganeturner

#### Slide 41

https://jaxsta.com/ @megganeturner

@megganeturner

@megganeturner

@megganeturner

#### Slide 45

https://jaxsta.com/ @megganeturner

⚠ @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

@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

@megganeturner

@megganeturner

@megganeturner

#### Slide 57

⚠ No mixed type operations ⚠ @megganeturner

@megganeturner

@megganeturner

@megganeturner

@megganeturner

@megganeturner

@megganeturner

#### Slide 64

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

@megganeturner

#### Slide 66

, ! @megganeturner

#### Slide 67

In Summary @megganeturner

#### Slide 68

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

#### Slide 69

Less @megganeturner

#### Slide 70

More @megganeturner

#### Slide 71

Less @megganeturner

#### Slide 72

More @megganeturner

@megganeturner