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 1

Slide 1

Slide 2

Slide 2

Slide 3

Slide 3

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

Slide 4

Slide 4

What’s in a name

number? Section 1:

Slide 5

Slide 5

@megganeturner • count • measure • label • identify

Slide 6

Slide 6

@megganeturner Classification

Slide 7

Slide 7

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

Slide 8

Slide 8

Slide 9

Slide 9

@megganeturner Representation

Slide 10

Slide 10

@megganeturner 8 C

आठ

Slide 11

Slide 11

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

Slide 12

Slide 12

@megganeturner

Slide 13

Slide 13

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

Slide 14

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

Slide 15

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

Slide 16

Slide 16

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

Slide 17

Slide 17

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

Slide 18

Slide 18

@megganeturner Floating-point arithmetic tries to account for this

Slide 19

Slide 19

@megganeturner 1234567 01000001001100101101011010000111 
 00000000000000000000000000000000

Slide 20

Slide 20

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

Slide 21

Slide 21

@megganeturner

Slide 22

Slide 22

@megganeturner

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

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

Slide 26

Slide 26

@megganeturner How big a problem is this really?

Slide 27

Slide 27

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

Slide 28

Slide 28

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

Slide 29

Slide 29

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

Slide 30

Slide 30

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

Slide 31

Slide 31

@megganeturner Size really does matter Section 2:

Slide 32

Slide 32

@megganeturner A trade off between range

and precision

Slide 33

Slide 33

@megganeturner "

Slide 34

Slide 34

@megganeturner

Slide 35

Slide 35

@megganeturner 3.28 x 10 80

Slide 36

Slide 36

@megganeturner (or ~9 quadrillion)

Slide 37

Slide 37

@megganeturner

Slide 38

Slide 38

@megganeturner

Slide 39

Slide 39

@megganeturner

Slide 40

Slide 40

@megganeturner

Slide 41

Slide 41

@megganeturner

Slide 42

Slide 42

@megganeturner solution: use UUIDs

Slide 43

Slide 43

@megganeturner

Slide 44

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

Slide 45

@megganeturner This just in

Slide 46

Slide 46

@megganeturner

Slide 47

Slide 47

@megganeturner

Slide 48

Slide 48

@megganeturner

Slide 49

Slide 49

@megganeturner

Slide 50

Slide 50

@megganeturner

Slide 51

Slide 51

@megganeturner

Slide 52

Slide 52

@megganeturner

Slide 53

Slide 53

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

Slide 54

Slide 54

@megganeturner Preaching to the converted Section 3:

Slide 55

Slide 55

@megganeturner Number.toString()

Slide 56

Slide 56

@megganeturner Number.toString( base )

Slide 57

Slide 57

@megganeturner Number(string)

Slide 58

Slide 58

@megganeturner +string

Slide 59

Slide 59

@megganeturner -string

Slide 60

Slide 60

@megganeturner parseInt(string)

Slide 61

Slide 61

@megganeturner parseInt(string, radix)

Slide 62

Slide 62

@megganeturner parseFloat(string)

Slide 63

Slide 63

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

Slide 64

Slide 64

@megganeturner Number Object (Properties)

Slide 65

Slide 65

@megganeturner Number Object (Methods)

Slide 66

Slide 66

@megganeturner Number Object (Methods)

Slide 67

Slide 67

@megganeturner Number Object (Methods)

Slide 68

Slide 68

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

Slide 69

Slide 69

@megganeturner

Slide 70

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

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

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

Slide 73

@megganeturner Math Object (Methods)

Slide 74

Slide 74

@megganeturner Math Object (Methods)

Slide 75

Slide 75

@megganeturner Math Object (Methods)

Slide 76

Slide 76

@megganeturner

Slide 77

Slide 77

@megganeturner Context is everything

Slide 78

Slide 78

@megganeturner

Slide 79

Slide 79

@megganeturner Thank you!