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

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

What’s in a name

number? Section 1:

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

@megganeturner 8 C

आठ

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

@megganeturner

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

@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

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

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

@megganeturner But 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 0 Sign 11 bits 10000010011 Exponent 52 bits 0010110101101000011100000000000000000000000000000000 Significand / Mantissa

@megganeturner

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

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

@megganeturner 0.1 (decimal)
0.000110011001100110011001100 1100110011001100110011001101 (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 Section 2:

@megganeturner A trade off between range

and precision

@megganeturner "

@megganeturner

@megganeturner 3.28 x 10 80

✨

@megganeturner (or ~9 quadrillion)

@megganeturner

@megganeturner solution: use UUIDs

@megganeturner

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

@megganeturner This just in

@megganeturner

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

@megganeturner Preaching to the converted Section 3:

@megganeturner Number.toString()

@megganeturner Number.toString( base )

@megganeturner Number(string)

@megganeturner +string

@megganeturner -string

@megganeturner parseInt(string)

@megganeturner parseInt(string, radix)

@megganeturner parseFloat(string)

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

@megganeturner Number Object (Properties)

@megganeturner Number Object (Methods)

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

@megganeturner

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

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

@megganeturner Math Object (Methods)

@megganeturner

@megganeturner Context is everything

@megganeturner

@megganeturner Thank you!