### Understanding the JavaScript Modulo Operator

- Published on
- Published on

- Blog Post views
- ... Views

- Reading time
- 3 min read

When I was first learning to code, I remember finding the Modulo operator (%) *extremely*
confusing😬

If you don't understand what it's doing, the values it produces seem completely random:

In this blog post, we're going to learn how this operator works by refining our mental model for division. We'll also cover a practical, every-day use case for this curious fella.

## Rethinking division

Suppose we have the following bit of arithmetic:

Division can often feel pretty abstract or theoretical, but there's a practical way to think about it: we want to divide a number into equally-sized groups.

**Drag the slider to see how this operation can be visualized:**

**TODO: Uncomment DivisionGroupsDemo**

`12 ÷ 4`

evaluates to `3`

, because each group holds exactly 3 items. Essentially, we're figuring out
how many items will be held inside each group.

In the example widget above, our dividend (the number to be divided) is 12. 12 is a *remarkably*
clean number when it comes to division; it can be split neatly in lots of different ways.

Suppose we had the following equation instead:

This equation evaluates to `2.75`

. Each group has 2 complete items, and then ¾ths of another item.

This works if we're dividing up pizzas or cakes… **but what if the items are indestructible?** What
if we *can't* break each item up into smaller fractions?

In that case, we'd be able to fit 2 items into each group, and we'd be left with 3 additional items:

**TODO: Uncomment DivisionGroupsDemo**

**This is known as the remainder.** It's what the modulo operator produces.

In cases where the number can be equally divided into groups (eg. `12 ÷ 4`

), there is nothing left
over:

In situations where the dividend (the number to be divided) *can't* be split equally into groups,
the modulo operator lets us know how much is left over:

## A real-world use case

So, I'm not a mathematician, I'm a web developer. All of this math stuff is interesting, but let's talk about how the modulo operator can come in handy on the web.

Specifically, there's one sort of problem that I seem to run into a lot, where the modulo operator
offers the perfect solution: *circular arrays.*

For example, suppose we have an array of 3 colors. Each second, we want to switch to the next color in the list. When we reach the end of the list, we want to jump back to the first item:

**TODO: Uncomment CircularColorsDemo**

This is a surprisingly tricky problem. Suppose we have a variable called `timeElapsed`

that starts
at 0 and increments by 1 every second; we have to somehow map this ever-increasing value to an array
with only 3 items.

Essentially, we need to write a function that produces the following results:

Let's look at how the modulo operator can help us solve this problem:

Miraculously, this does exactly what we need! This method will always return one of the 3 colors, as
long as `timeElapsed`

is an integer. And it'll cycle through the 3 colors as `timeElapsed`

increases.

`COLORS.length`

is equal to `3`

, since there are 3 colors in our array. And so, as `timeElapsed`

increments from 0 to 8, this function winds up performing the following sequence of calculations:

We can then use this `colorIndex`

to look up the color from the `COLORS`

array. It's guaranteed to
always cycle within the range of available indexes for that array.

To understand why this works, it's worth remembering our new model for division: we're trying to
divide `timeElapsed`

into 3 equally-sized groups, without any fractional or decimal values. The
remainder will always be either 0, 1, or 2. It will never be 3+, because if there *was* 3 left, we
could fit 1 more in each group!

Essentially, it's as if we had the ability to create a “circular” array. No matter how large our
underlying `timeElapsed`

value grows, we can have it cycle indefinitely through the colors in the
`COLORS`

array.

In my opinion, this trick alone makes the modulo operator worth learning! I've used this circular-array trick dozens of times over the years, and it's just one of several practical use cases for this handy operator.

Yorumlar