# When your code does a number on you: Navigating numbers in JavaScript

A presentation at DDD Sydney in August 2018 in Sydney NSW, Australia by Meggan Turner

#### Slide 3

@megganeturner When Your Code Does a Number on You Navigating Numbers in Javascript

#### Slide 4

What’s in a name

number? Section 1:

#### Slide 5

@megganeturner • count • measure • label • identify

#### Slide 6

@megganeturner Classification

#### Slide 7

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

#### Slide 9

@megganeturner Representation

#### Slide 10

@megganeturner 8 C

आठ

#### Slide 11

@megganeturner • 1234567 • 0b100101101011010000111 • 0o4553207 • 0x12D687 • 1.234567e6

@megganeturner

#### Slide 13

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

#### Slide 14

@megganeturner • Specifies the implementation of floating-point arithmetic • Allows us to represent real numbers as an approximation, to support a trade off between range & precision

#### Slide 15

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

#### Slide 16

@megganeturner 01001000 01100101 01101100 01101100 01101111 00101100 00100000 01000100 01000100 01000100 00100001 “Hello, DDD!”

#### Slide 17

@megganeturner But we can’t have decimal points in binary "

#### Slide 18

@megganeturner Floating-point arithmetic tries to account for this

#### Slide 19

@megganeturner 1234567 01000001001100101101011010000111   00000000000000000000000000000000

#### Slide 20

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

@megganeturner

@megganeturner

#### Slide 23

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

#### Slide 24

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

#### Slide 25

@megganeturner 0.1 (decimal)
0.000110011001100110011001100 1100110011001100110011001101 (binary) 0.10000000000000000555 (decimal)

#### Slide 26

@megganeturner How big a problem is this really?

#### Slide 27

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

#### Slide 28

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

#### Slide 29

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

#### Slide 30

@megganeturner in most cases, this degree of accuracy is not going to be that important

#### Slide 31

@megganeturner Size really does matter Section 2:

#### Slide 32

@megganeturner A trade off between range

and precision

@megganeturner "

@megganeturner

#### Slide 35

@megganeturner 3.28 x 10 80

#### Slide 36

@megganeturner (or ~9 quadrillion)

@megganeturner

@megganeturner

@megganeturner

@megganeturner

@megganeturner

#### Slide 42

@megganeturner solution: use UUIDs

@megganeturner

#### Slide 44

@megganeturner Expecting Numbers? • check them to make sure they’re not larger than MAX_SAFE_INTEGER • get them passed through as strings

#### Slide 45

@megganeturner This just in

@megganeturner

@megganeturner

@megganeturner

@megganeturner

@megganeturner

@megganeturner

@megganeturner

#### Slide 53

@megganeturner Caveats • Integers only • V8 (Chrome) only • Very new! Minimal documentation

#### Slide 54

@megganeturner Preaching to the converted Section 3:

#### Slide 55

@megganeturner Number.toString()

#### Slide 56

@megganeturner Number.toString( base )

#### Slide 57

@megganeturner Number(string)

#### Slide 58

@megganeturner +string

#### Slide 59

@megganeturner -string

#### Slide 60

@megganeturner parseInt(string)

#### Slide 62

@megganeturner parseFloat(string)

#### Slide 63

@megganeturner Number Object (Properties) Number.MAX_SAFE_INTEGER Number.MAX_VALUE Number.MIN_SAFE_INTEGER Number.MIN_VALUE

#### Slide 64

@megganeturner Number Object (Properties)

#### Slide 65

@megganeturner Number Object (Methods)

#### Slide 66

@megganeturner Number Object (Methods)

#### Slide 67

@megganeturner Number Object (Methods)

#### Slide 68

@megganeturner Number Object (Methods) Number.parseFloat() Number.parseInt()

@megganeturner

#### Slide 70

@megganeturner Math Object (Properties) Math.E Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E Math.PI Math.SQRT1_2 Math.SQRT2

#### Slide 71

@megganeturner Math Object (Methods) Math.abs(x) Math.acos(x) Math.acosh(x) Math.asin(x) Math.asinh(x) Math.atan(x) Math.atanh(x) Math.atan2(y, x) Math.cbrt(x) Math.ceil(x) Math.clz32(x) Math.cos(x) Math.cosh(x) Math.exp(x) Math.expm1(x) Math.floor(x) Math.fround(x) Math.hypot([x[, y[, …]]]) Math.imul(x, y) Math.log(x) Math.log1p(x) Math.log10(x) Math.log2(x) Math.max([x[, y[, …]]]) Math.min([x[, y[, …]]]) Math.pow(x, y) Math.random() Math.round(x) Math.sign(x) Math.sin(x) Math.sinh(x) Math.sqrt(x) Math.tan(x) Math.tanh(x) Math.trunc(x)

#### Slide 72

@megganeturner Math Object (Methods) Math.abs(x) Math.acos(x) Math.acosh(x) Math.asin(x) Math.asinh(x) Math.atan(x) Math.atanh(x) Math.atan2(y, x) Math.cbrt(x) Math.ceil(x) Math.clz32(x) Math.cos(x) Math.cosh(x) Math.exp(x) Math.expm1(x) Math.floor(x) Math.fround(x) Math.hypot([x[, y[, …]]]) Math.imul(x, y) Math.log(x) Math.log1p(x) Math.log10(x) Math.log2(x) Math.max([x[, y[, …]]]) Math.min([x[, y[, …]]]) Math.pow(x, y) Math.random() Math.round(x) Math.sign(x) Math.sin(x) Math.sinh(x) Math.sqrt(x) Math.tan(x) Math.tanh(x) Math.trunc(x)

#### Slide 73

@megganeturner Math Object (Methods)

#### Slide 74

@megganeturner Math Object (Methods)

#### Slide 75

@megganeturner Math Object (Methods)

@megganeturner

#### Slide 77

@megganeturner Context is everything

@megganeturner

#### Slide 79

@megganeturner Thank you!