ProgrammingSoup

JavaScript: Remainder (%) Operator

by Nicklas Envall

The remainder (%) operator returns the remainder of a division. To refresh our memory, a division looks like this, Dividend / Divisor = Quotient. The remainder is the amount that doesn't completely go into the divisor.

So, the remainder will always be 0 if the quotient is an integer. The example below does not have a remainder:

 4
--- = 2
 2

It does not have a remainder because 2 goes two times into 4 while leaving nothing behind. You can view it as:

 4     2     2
--- = --- + --- = 1 + 1 = 2
 2     2     2

Now, the next example below does have a remainder of 2. Because 4 can go into 6 once, leaving us with a remainder of 2. Note that we still use the remainder to compute the final answer 1.5:

 6     4     2
--- = --- + --- = 1 + 0.5 = 1.5
 4     4     4

Consequently, that remainder is what the remainder operator returns. The operator works like dividend % divisor. Let's illustrate it with our two examples from above:

4 % 2; // 0
6 % 4; // 2

We can create our own remainder function (though % is recommended):

const remainder = (dividend, divisor) => {
  const quoitent = Math.trunc(dividend / divisor);
  return dividend - quoitent * divisor;
};

The Math.trunc(dividend / divisor) part will remove any decimals that might've occurred. Then we multiply that with the divisor again to get everything except the remainder. Lastly, by subtracting that from the original dividend, we get the remainder. We would have created the modulo operator if we swapped trunc to floor. Remainder and modulo are almost identical to each other, but what separates them is how they handle negative numbers.

Example 1: Even and odd numbers

The remainder operator is commonly used to figure out if a number is odd or even. The reason for that is that the quotient of any even number divided by 2 will always be an integer. Additionally, all odd numbers are not divisible by 2:

const isEven = num => num % 2 === 0;
isEven(2); // true
isEven(3); // false

const isOdd = num => num % 2 === 1;
isOdd(2); // false
isOdd(3); // true

Example 2: Seconds to HH:MM:SS

Let's define a problem that's solvable with the remainder operator:

Write a program that can convert N seconds to the format hh:mm:ss. For example, the function input 3667s should output 1:1:7.

The somewhat tricky part of the problem is that we must distribute the seconds correctly. First, let's note that:

  • 1 minute is 60 seconds.
  • 1 hour is 60 minutes.

Now, let's look at the code I created and examine it:

const convertFromSecondsToHHMMSS = (s) => {
  const HOURS = Math.floor((s / 60) / 60); // 1
  const MINUTES = Math.floor((s / 60) % 60); // 2
  const SECONDS = s % 60; // 3
  
  return `${HOURS}:${MINUTES}:${SECONDS}`;
}
  1. Divide the seconds by 60 to convert seconds into minutes. Then divide the minutes by 60 to get the hours. Use floor to discard decimals.
  2. The remaining seconds are now in the discarded decimals from 1. So, divide the seconds by 60 to convert seconds into minutes. Then, this time use the remainder operator with a divisor of 60 to get the remaining minutes. Lastly, yet again, discard all possible decimals with floor.
  3. Use the remainder operator to get the remaining seconds by having 60 as a divisor. Note that seconds divided by 60 gives us all possible minutes. So the remainder will be the remaining seconds.

Perhaps a more readable example would use the fact that 3600 seconds equal to 1 hour. Let's try again:

const convertFromSecondsToHHMMSS = (s) => {
  const HOURS = Math.floor(s / 3600); // 1
  const MINUTES = Math.floor((s % 3600) / 60); // 2
  const SECONDS = (s % 3600) % 60; // 3
  
  return `${HOURS}:${MINUTES}:${SECONDS}`;
}
  1. Convert seconds into hours, and then discard possible decimals with floor.
  2. Get the discarded seconds from step one, with the remainder operator. Then divide that by 60 to convert those seconds into minutes. Lastly, discard any possible decimals.
  3. Get remaining seconds after "to hour conversion," then use those to get all remaining seconds by having 60 as a divisor (just doing seconds % 60 also works).

Example 3: FizzBuzz

You've probably heard of Fizzbuzz and perhaps even implement it. But here's the problem:

Write a program that prints the numbers from 1 to 100. But, only print "Fizz" if numbers are multiples of 3. Also, only print "Buzz" if numbers are multiples of 5. Lastly, only print "FizzBuzz" if numbers are multiples of 3 and 5.

Let's break down the problem before we start coding. The description pretty much gives us the operations required to solve the problem. I identified the following constraint, only print one thing per increment, and the following operations:

  • If the number is a multiple of 3 print "Fizz".
  • If the number is a multiple of 5 print "Buzz".
  • If the number a multiple of 3 and 5 print "FizzBuzz".
  • Print the number.

So what is a multiple? Well, a multiple is a result of multiplying a given number by another number. So how do we figure out if a number is a multiple of a number like 3? The answer is that we can use the remainder operator. Now look at the following example:

// multiples of 3 (3, 6, 9):
1 * 3; // 3
2 * 3; // 6
3 * 3; // 9

// remainder operator
3 % 3; // 0
4 % 3; // 1
5 % 3; // 2
6 % 3; // 0
7 % 3; // 1
8 % 3; // 2
9 % 3; // 0

Do you see the pattern? If the dividend is a multiple of 3, it'll return 0. Meaning that, in this case, the only non-multiple of 3 is 4. Finally, we can start can implementing the operations:

for (let i = 1; i <= 100; i++) {
   if (i % 3 === 0 && i % 5 === 0) {
       console.log('FizzBuzz');
   } else if (i % 3 === 0) {
       console.log('Fizz');
   } else if (i % 5 === 0) {
       console.log('Buzz');
   } else {
       console.log(i);
   }
}

Of course, there are hundreds of different solutions to FizzBuzz, and this is just an example to illustrate the remainder operator in JavaScript.