Using the Modulo Operator in JavaScript

Hero image for Using the Modulo Operator in JavaScript. Image by Ali Rezaei.
Hero image for 'Using the Modulo Operator in JavaScript.' Image by Ali Rezaei.

You wouldn't be the first developer to look at the modulo operator (represented by the percentage symbol: %) and not have the briefest ideas on what it is or how to use it. It stems from mathematics and number theory, so you can be forgiven if you aren't that kind of a developer. Nevertheless, the modulo operation is a fundamental concept in JavaScript, and understanding what it is, what it does, and how to use it can make your life much easier when it comes to various calculations and logical operations.


What is Modulo?

The modulo operation, often referred to as mod, provides the remainder of a division between two numbers.

Consider trying to find the remainder when you divide 10 by 3. In mathematical terms, we'd express this as 10 modulo 3, and write it as 10 % 3 in programming. When you divide 10 by 3, it fits into 10 three times, which leaves a remainder of 1 since 10 is not perfectly divisible by 3.

So, 10 % 3 = 1.

Syntax

const result = a % b;
  • a: The dividend.
  • b: The divisor.
  • result: The remainder of dividing a by b.

Origins of Modulo

As I mentioned at the start of this article, the concept of modulo comes from arithmetic and number theory in mathematics. It's a way to deal with remainders in division operations and has always been a part of programming languages to allow developers to handle scenarios where understanding the remainder is crucial.


Using Modulo in JavaScript

In JavaScript, modulo is a versatile tool that can be used in scenarios randing from simple calculations to far more complex operations and algorithms.

A Basic Example: Even/odd Numbers

Here's a really common task in frontend development: determining whether a number is odd or even. Using modulo this is very straightforward:

const isEven = (num: number): boolean => num % 2 === 0;console.log(isEven(4));  //=> trueconsole.log(isEven(5));  //=> false

Here, we're using the modulo operator to check if a number is even by seeing if it has a remainder of 0 when it is divided by 2.


A More Complex Example: Circular Lists

Circular lists (or wrapping array indices) can be notoriously tricky. For many of us, the first exposure may well have been in attempting to develop an infinite carousel, for example.

const getNextIndex = (currentIndex: number, arrayLength: number): number =>  (currentIndex + 1) % arrayLength;const currentIndex: number = 4;const arrayLength: number = 5;console.log(getNextIndex(currentIndex, arrayLength));  //=> 0

Here, I'm using modulo to calculate the following index in an array, rolling back to 0 if we've reached the end of the array.


Wrapping up

The modulo operator in JavaScript is a simple yet powerful tool that extends beyond basic arithmetic. It's extremely useful for scenarios like checking divisibility, looping through circular structures, and implementing periodic actions.

As a fundamental part of JavaScript, understanding and utilizing modulo can significantly enhance problemsolving capabilities and algorithmic implementation.


Categories:

  1. Development
  2. Front‑End Development
  3. Guides
  4. JavaScript
  5. React