# The modulus operator %

## % in JavaScript - the remainder

Similar to nth-child we can apply an array as a repeating pattern.

We can also create something practical like alternating 4 animations and 3 colours between 7 divs.

Lets start with this.

` ````
7%3 = 1
```

3 can fit into 7 two times with a remainder of 1.

The modulus operator is the **remainder**.

The remainder, is what's left over.

Let's break down 7%3 a little bit more. Let's say 3 people share 7 apples.

` ````
7%3 = 1
apples = 7 // Apples
people = 3 // People
result = apples - people * (apples / people)
```

We can start, with dividing the apples by the number of people.

` ````
Step 1: 7 / 3 = 2.33
// 7 apples, 3 people, 2.33 each
```

To double check, we multiple how many apples each person got, by how many people there are.

` ````
Step 2: 2.333 * 3 = 7
// We determined 3 people got 2.33 apples each.
// Its true, that adds up to 7
```

To determine if all the apples were distributed fairly, we'll subtract that from the initial number of apples.

` ````
Step 3: 7 - 7 = 0.
// Checks out, everyone got their apples.
```

So how does 7%3 = 1 with the modulus operator?

There is a crucial missing part that separates us from computers. We're fortunate in our lack of consideration for decimals when we instinctively know the remainder in this context.

` ````
"3 can fit into 7 two times with a remainder of 1."
```

In order to have a **remainder**, numbers must be **whole**.

There cannot be a decimal. There **has** to be **rounding**.

**More importantly**. It always **rounds down**. Why?

2.333 rounded is **2**.

3 can fit into 7 **twice** with a remainder of 1.

But

` ````
7%4 = 3
```

How many times does 4 go into 7?

Well, only once, with a remainder of 3.

However. 7/4 = 1.75.

If we round in general 7/4 would be **2**.

And we both know 4 can't go into 7 **twice**.

7/4 rounded down is **1**.

4 fits into 7 **one** time. and the remainder is 3.

In order to ensure a remainder, it always has to round down. It cannot be over.

Let's go back to our equation here, with a new rule, no one can split any apples this time.

` ````
7%3 = 1
apples = 7 // 7 apples
people = 3 // 3 people
result = apples - people * RoundDown(apples / people)
Step 1: RoundedDown( 7 / 3 ) = 2 //RoundedDown(2.333)
// The three people would each get 2 apples.
Step 2: 3 * 2 = 6
// If we multiple the number of apples each person got by the number of people
// A total of 6 apples were given out.
Step 3: 7 - 6 = 1
// How many apples are left over from how many apples were given out
// 1 apple left over.
```

Let's clarify a confusing example.

We know that 3 fits into 7 twice with a remainder of 1.

` ````
7%3 = 1
```

Reversed however, if we ask how many times 7 fits into 3.. the remainder is 3.

` ````
3%7 = 3
```

7 doesn't fit into 3 **3 times** but when we round down we can see why.

` ````
3%7 = 3
apples = 3
people = 7
result = apples - people * RoundDown(apples / people)
Step 1: RoundedDown( 3 / 7 ) = 0.42857142857 Rounded down to 0.
// When there are 7 people and 3 apples we can't give any to anyone
Step 2: 7 * 0 = 0
// The multiplication of 0 may make this strange in this context.
// But it means there are no apples left even though none were given out.
Step 3: 3 - 0 = 3
// Subtracting the number of people by how many apples are left over gives us 3
// Your only left over with the number of people.
// It's math. ¯\_(ツ)_/¯
```

That's the modulus operator.

In JavaScript

` ````
n%d
```

Could also be wrtten like this.

` ````
n - d * Math.floor( ( n / d ) )
```

**Math.floor** always rounds down.

**Math.ceil** (the ceiling) always rounds up.

**Math.round** rounds in general:

**.5** is up

**.4** is down.

Hi Brandon, nice write-up! BTW there's a fix;

`Math.ceiling`

should be`Math.ceil`

.Thanks a lot there Abhishek, and great catch, thanks for that. I've updated the post. Thanks again.

Awesome! Great explanation. I have been confused about how the modulus operator works. This was SUPER helpful.