What is Modulus Operator (%) in JavaScript?

JavascriptWeb DevelopmentFront End Technology

In this tutorial, we will learn about the modulus operator in JavaScript. In some languages, the modulus operator is also known as the remainder operator. The remainder operator and the modulus operator both are used to get the remainder of an integer when it is divided by some other integer, but they are different from each other in case of signs of the remainder whether it has to be positive or negative that is returned after the division.

In the expression a % b, a is called dividend, while b is known as divisor. In case of the modulo, the expression ((a % b) + b) % b is used to find out the remainder, where the sign of the resultant remainder will be similar to the sign of the divisor, b in this case. While, the expression a % b can be used to find the remainder using the remainder operator, where the sign of the dividend such that a is considered as the sign of the remainder result. The operation a % b will return NaN in the following cases −

  • If any of the numbers is NaN.

  • If divisor or the denominator is Zero.

Syntax

Following is the syntax to use the modulus operator in JavaScript −

operand1 % operand2

It returns the remainder of an integer division of operand1 by operand2.

Let us understand the modulus operator in JavaScript in detail with help of a code example.

Example 1

You can try to run the following code to learn how to work with Modulus (%) operator.

<html>
<body>
   <script>
      var a = 33;
      var b = 10;

      document.write("a % b = ");
      result = a % b;
      document.write(result);
   </script>
</body>
</html>

Example 2

Below example will explain the behavior of the modulus operator and its result for some user inputs −

<html>
<body>
   <h2> Modulus Operator (%) in JavaScript </h2>
   <p> Enter the operands below −</p>
   <lebel> Operand1: </label>
   <input type = "number" id = "inp1" value = 3> <br> <br>
   <lebel> Operand2: </label>
   <input type = "number" id = "inp2" value = 2>
   <p> Click to see the result of Modulus Operator (%). </p>
   <p id = "result"></p>
   <button onclick = "display()"> Show Result </button>
   <script>
      var result = document.getElementById("result");
      function display() {
         var inp1 = document.getElementById("inp1");
         var val1 = Number(inp1.value);

         var inp2 = document.getElementById("inp2");
         var val2 = Number(inp2.value);
         var mod = ((val1 % val2) + val2) % val2;
         result.innerHTML = " <b> Result: " + mod + " </b> <br> ";
      }
   </script>
</body>
</html>

In the above example, we have used the expression ((val1 % val2) + val2) % val2; to evaluate the result of the modulus operator, which depends upon the sign of the divisor or the denominator, the result will be negative for negative divisor value and will be positive for a positive value.

Let us see one more example, where we will use the simple remainder operator and see its output.

Example 3

The example below will illustrate the use of the remainder operator and will help you understand it better −

<html>
<body>
   <h2> Modulus Operator (%) in JavaScript </h2>
   <p> Enter the operands below −</p>
   <lebel> Operand1: </label>
   <input type = "number" id = "inp1" value = 13> <br> <br>
   <lebel> Operand2: </label>
   <input type = "number" id = "inp2" value = 9>
   <p> Click to see the result of Modulus Operator (%) of above two numbers. </p>
   <p id = "result"></p>
   <button onclick = "display()"> Show Result </button>
   <script>
      var result = document.getElementById("result");
      function display() {
         var inp1 = document.getElementById("inp1");
         var val1 = Number(inp1.value);
         var inp2 = document.getElementById("inp2");
         var val2 = Number(inp2.value);
         var rem = val1 % val2;
         result.innerHTML += "Result : " + rem ;
      }
   </script>
</body>
</html>

In the above example, we have used val1 % val2 expression to evaluate the value of the remainder using the remainder operator and storing the result in the rem variable and then showing it to the user. The resultant value of this operator will depend upon the sign of the dividend or the nominator, if the value of dividend is positive the result will be positive. otherwise, it will be negative.

In this tutorial, we have seen the modulus operator with help of code example, where we practically implement it to try for different values of dividend and divisor and can test it for the negative and the positive values of dividend and the divisor interchangeably. We have also seen the remainder operator with example to differentiate between remainder and the modulus operators.

raja
Updated on 25-Nov-2022 08:07:45

Advertisements