% 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.


1,158 3 17