A presentation at DDD Sydney in in Sydney NSW, Australia by Meggan Turner
@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
@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
@megganeturner
@megganeturner
@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
@megganeturner
@megganeturner
@megganeturner
@megganeturner
@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)
@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) 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 Math Object (Methods)
@megganeturner Math Object (Methods)
@megganeturner
@megganeturner Context is everything
@megganeturner
@megganeturner Thank you!
What happens when the numbers you’re working with are too big for JavaScript? How do numbers behave beyond JavaScript’s integer limit?
In a talk which promises to be more interesting than your typical high school math class, I’ll be bringing you down the rabbit hole that is numbers in JavaScript. We’ll explore how they’re implemented, how we can best write, format, convert & calculate them, and what to do when we’re forced to handle really big (or really small) numbers.
Here’s what was said about this presentation on social media.
for free. You
can too.