Altcademy - a Forbes magazine logo Best Coding Bootcamp 2023

What is % in JavaScript

The Mysterious Percentage Symbol in JavaScript

If you've been exploring the world of JavaScript, you may have come across something that looks a bit like this: 5 % 2. At first glance, it may seem like a strange and unexplored territory, but not to worry! This symbol, %, is actually a very useful operator known as the "modulus" or "remainder" operator.

Understanding the Modulus Operator

In mathematics, the concept of "modulus" is used when we divide numbers. When you divide one number by another, you usually get a quotient and sometimes a remainder. For example, when you divide 10 by 3, you get a quotient of 3 and a remainder of 1.

In JavaScript, this "remainder" is exactly what the modulus operator gives you. It performs division like the / operator, but instead of providing the quotient, it gives you the remainder of the division.

To provide an analogy, think of it as splitting a number of candies among a group of kids. If you have 10 candies and 3 kids, each kid will receive 3 candies, and you'll be left with 1 candy. This "leftover" candy is the "remainder" that the modulus operator will give you.

Modulus in Action

Let's see the modulus operator in action with some JavaScript code:

let remainder = 10 % 3;
console.log(remainder); // Output: 1

In this code, 10 % 3 will give us the remainder of the division of 10 by 3, which is 1. This remainder is stored in the variable remainder, and then printed to the console.

Practical Uses of Modulus Operator

The modulus operator is not just a mathematical curiosity, but a powerful tool in programming. Here are a few practical uses:

Checking for Even and Odd Numbers

If you divide any even number by 2, the remainder is always 0. On the other hand, dividing an odd number by 2 always leaves a remainder of 1. We can use this property to determine whether a number is even or odd:

let number = 7;
if (number % 2 == 0) {
  console.log("The number is even.");
} else {
  console.log("The number is odd.");
// Output: The number is odd.

Creating Cycling Patterns

You can use the modulus operator to create repeating patterns. For instance, you can cycle through an array of colors to create a color pattern on a web page:

let colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
for (let i = 0; i < 100; i++) {
  console.log(colors[i % colors.length]);

In this code, i % colors.length will always return a number between 0 and the length of the array minus 1, which allows you to cycle through the array elements.

The Magic of Modulus

The modulus operator might seem like magic at first, but once you understand it, it's a powerful tool in your JavaScript toolbox. It’s like the secret ingredient in a recipe that adds that extra 'zing'. It lets you perform tasks like determining even or odd numbers, creating cycling patterns, and so much more.

So, next time you see that % symbol in your code or come across a problem where you need the remainder of a division, don't panic! Remember, it's just the modulus operator doing its magic. Embrace it and watch as your code takes on new powers and capabilities.

In Conclusion...

Just like the surprisingly useful screwdriver in a toolbox, the modulus operator is a simple but powerful tool in JavaScript. It's not just about dividing numbers, but about creating patterns, making decisions, and adding a touch of magic to your code. So, next time you find yourself tackling a JavaScript problem, remember the humble modulus operator. It might just be the secret weapon you need to make your code shine!