The big and Small of JavaScript numbers

For all its warts, JavaScript has some novelties few other languages have. In this post I want to share about JavaScript numbers, which both acknowledge normal mathematics and the fact that they are represented by an imperfect data format.

Summary

JavaScript numbers are all internally represented by a double-precision floating-point value, which means that there are perfect and imperfect representations of whole numbers as well as normal double-type floating-point values. Additionally, this is augmented by a few special values representing infinities and impossible numbers. Numbers do not overflow in JavaScript: they become positive or negative infinity. Division-by-zero does not throw an exception: it returns infinity (the limit rule). Nonsense math does not yield nonsense answers: it returns “not a number.”

Show me!

While I encourage you to read the MDN article on Number, I want to provide a few patterns I have found useful when working in JavaScript that I can’t often use in other languages. In many cases we can turn iffy code (code with conditional branching) into code that simply always works regardless of the input. Here is a list of a few of those patterns. Do you have others up your sleeve?

Safe Division

If we end up dividing by zero we get Infinity as the result. Often we’ll see something like this written to prevent that:

const quotient = dividend / ( divisor + 0.0001 )

This is often good enough but there are pathological cases that should make us consider this code a bug. What happens if the divisor is small compared to that 0.0001? As long as it’s sufficiently large the little extra doesn’t affect the outcome much, but if divisor === 0.0001 then this value will cause our result to be half as large as it should be. Solution? We could descend further and further until we’re “sufficiently safe.” Maybe we could put it in a named constant for reuse.

const EPSILON = 1e-16
const quotient = dividend / ( divisor + EPSILON )

Why EPSILON? Because mathematicians agreed that ε is the smallest unit number. It’s the number which cannot be reached by adding or subtracting, multiplying or dividing. Well, 1e-16 isn’t small enough for us, but luckily, JavaScript has us covered.

const quotient = dividend / ( divisor + Number.EPSILON )

See what just happened? It’s already defined for us, and the value is a bit technical but perfect: “the difference between one and the smallest value greater than one that can be represented as a Number.” It’s the smallest difference in values representable by the language. If that value made a significant difference in our calculations then we would have other major problems in our code to take care of.

Clamping

We often want to limit numbers within certain bounds.

let a = 15
if ( a > 10 ) {
a = 10
}

This is a noisy and mutable approach. It introduces needless branching (to our eyes, not the computer’s). Thankfully, math has a solution for us.

const a = Math.min( 10, 15 ) // a === 10

In one line of code we have expressed something that will always conform and we had no if in there. This means fewer lines of code to maintain and fewer opportunities to accidentally break apart the logic of what a should be. And a minimum?

const clamp = ( min, max, value ) => Math.min( max, Math.max( min, value ) )
const a = clamp( 3, 8, 15 ) // a === 8
const a = clamp( 3, 8, -9 ) // a === 3

Again, we have a single expression valid for all inputs which also indicates our intention: to constrain a within certain bounds (the if provides no such context apart from reading the code within).

Clamping selections

We often index into lists with a separate indexing variable. Recently I came across a need to grab the last item in the list if no index were provided but to grab the indexed item if it had been.

let item
if ( selectedIndex !== undefined ) {
item = list[ selectedIndex ]
} else {
item = list[ list.length - 1 ]
}

Get’s the job done, but it’s also a bit ugly and noisy. Couldn’t we make more immutable and clean declarations?

const index = clamp( 0, list.length - 1, selectedIndex )

There, not so bad again – one line. Oh wait, you see a bug? That’s right; what if selectedIndex is undefined? Here we can set a default. Let’s expand our code view…

const getItem = ( list, selectedIndex = Infinity ) => {
const index = clamp( 0, list.length - 1, selectedIndex )
return list[ index ]
}

We have used Infinity as the default because it will always be bigger than any index we pass in and get clamped down to the last element in the array.

Fun Facts

Anything divided by Infinity is 0. In this example we’re counting how many groups we would need to split a list into n-sized chunks. This is safe with negative numbers, zero, and beyond (we’ll assume we will always need at least one group, even for an empty list).

const countGroups = ( list, groupSize = Infinity ) =>
Math.max( 1, Math.ceil( list.length / groupSize ) )

Everything is smaller than Infinity (except other infinities). Using Infinity as a default value thus allows trivial operations to grab the larger or smaller of a given number or the provided number if it’s provided.

const getHardMax = ( softLimit = Infinity ) => Math.min( softLimit, 1000 )
const getHardMin = ( softLimit = -Infinity ) => Math.max( softLimit, 10 )

Like most languages, we can know if a number is negative or positive with Math.sign(). This is a relative of Math.abs(). We can use it to indicate direction or to enforce the sign at the end of an expression.

const delta = next - prev
const message = {
[ -1 ]: `decreased by ${ Math.abs( delta ) }º`,
[ 0 ]: 'stayed the same',
[ 1 ]: `increased by ${ Math.abs( delta ) }º`,
}[ Math.sign( delta ) ]
return `The temperature ${ message }`.

The Math.max() and Math.min() operations are associative, commutative, and idempotent, meaning that they can be done in any order any number of times and come to the same result. Honestly; it doesn’t matter how we get to the destination – all the paths bring us to the same place.

if ( a > runningMax ) {
return a
}
return runningMax

How redundant! If the value hasn’t changed, running it through Math.max() again won’t hurt. It will return the same value.

return Math.max( a, runningMax )

Notice that we can choose to put a wherever makes more sense reading the code because of the commutativity. It could be before runningMax or after. In fact, you may be noticing a pattern here for finding the largest value in an array…

const max = list => list.reduce( Math.max, -Infinity )
const min = list => list.reduce( Math.min, Infinity )

Our old friend Infinity is showing up again. This list reduction will iterate over the list and compare the previous value (starting at the smallest possible number) with the next item in the list. It will propagate forward to the end when the highest-valued number will be returned (same accordingly for min()).

Making impossible states impossible

There are many more patterns like this that will be valuable in our code which can prevent accidentally getting into invalid states. if-assignements can be easy to break since they decouple a value’s logic from its definition or binding. In most cases where we think we need conditional assignment, however, we can use higher-order functions to get around that, such as with clamp().

Oftentimes we neither have to resort to some clever snippet of code nor to a mangled nesting of branches in order to get a value we want. A pause to think about what we are doing and some basic math can usually clarify the logic in ways we probably didn’t expect. JavaScript’s number system helps us out here too because of how it supports things like EPSILON and Infinity.

Let’s keep an eye out for these cases where the conditionals and the loops and the ternaries open up opportunities for bugs (by us or by future modifications to our code). In those place, maybe a single expression can return our valid desired output no matter what comes in (assuming the types are right: numbers in, numbers out).