Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What are the different use cases of remainder operator (%) in JavaScript?
In this tutorial, we will explore the different use cases of the remainder operator (%). The % operator returns the remainder when one number is divided by another and takes the sign of the dividend (the first operand).
What is Remainder?
When dividing two numbers, if the dividend is not completely divisible by the divisor, there is always a remainder. The remainder is what's left over after the division.
10 ÷ 2 = 5 (remainder 0, completely divisible) 6 ÷ 4 = 1 (remainder 2, not completely divisible)
The remainder operator works as: dividend % divisor = remainder.
Basic Remainder Operations
Let's explore how the remainder operator behaves with different number combinations:
<!DOCTYPE html>
<html>
<head>
<title>Remainder Operator (%) Use Cases</title>
</head>
<body>
<div id="output"></div>
<script>
var outDiv = document.getElementById("output");
var remainder;
// When dividend >= divisor
remainder = 10 % 4;
outDiv.innerHTML += "10 % 4 = " + remainder + "<br>"; // 2
remainder = -10 % 4;
outDiv.innerHTML += "-10 % 4 = " + remainder + "<br>"; // -2
remainder = 10 % -4;
outDiv.innerHTML += "10 % -4 = " + remainder + "<br>"; // 2
remainder = -10 % -4;
outDiv.innerHTML += "-10 % -4 = " + remainder + "<br>"; // -2
// When dividend < divisor
remainder = 4 % 10;
outDiv.innerHTML += "4 % 10 = " + remainder + "<br>"; // 4
remainder = -4 % 10;
outDiv.innerHTML += "-4 % 10 = " + remainder + "<br>"; // -4
// Special cases
remainder = NaN % -2;
outDiv.innerHTML += "NaN % -2 = " + remainder + "<br>"; // NaN
remainder = Infinity % 4;
outDiv.innerHTML += "Infinity % 4 = " + remainder + "<br>"; // NaN
// Float values
remainder = 4.5 % 3;
outDiv.innerHTML += "4.5 % 3 = " + remainder + "<br>"; // 1.5
remainder = -4.5 % 3;
outDiv.innerHTML += "-4.5 % 3 = " + remainder + "<br>"; // -1.5
</script>
</body>
</html>
10 % 4 = 2 -10 % 4 = -2 10 % -4 = 2 -10 % -4 = -2 4 % 10 = 4 -4 % 10 = -4 NaN % -2 = NaN Infinity % 4 = NaN 4.5 % 3 = 1.5 -4.5 % 3 = -1.5
Practical Use Case: Checking Even and Odd Numbers
A common use of the remainder operator is to determine if a number is even or odd. Any number divided by 2 with remainder 0 is even, otherwise it's odd.
<!DOCTYPE html>
<html>
<body>
<h3>Even/Odd Checker</h3>
<input type="number" id="val" placeholder="Enter a number" />
<input type="button" value="Check" onclick="checkOddEven()" />
<h4 id="result"></h4>
<script>
function checkOddEven() {
var val = document.getElementById("val").value;
var resultDiv = document.getElementById('result');
if (val % 2 === 0) {
resultDiv.innerHTML = val + " is even";
} else {
resultDiv.innerHTML = val + " is odd";
}
}
</script>
</body>
</html>
Common Use Cases
| Use Case | Formula | Purpose |
|---|---|---|
| Even/Odd Check | num % 2 | Returns 0 for even, 1 for odd |
| Circular Array Index | index % array.length | Wraps index within array bounds |
| Time Calculations | seconds % 60 | Convert seconds to minutes/seconds |
| Hash Distribution | value % buckets | Distribute values across buckets |
Remainder vs Modulo
While often confused, remainder and modulo operations can differ with negative numbers. JavaScript's % operator is a remainder operator, not a true modulo.
JavaScript remainder: -7 % 4 = -3 True modulo: -7 mod 4 = 1
To calculate true modulo in JavaScript, use this formula:
function modulo(dividend, divisor) {
return ((dividend % divisor) + divisor) % divisor;
}
Key Points
- The remainder operator (%) takes the sign of the dividend
- Useful for cyclic operations and range constraints
- Returns NaN when used with Infinity or NaN
- Works with both integers and floating-point numbers
Conclusion
The remainder operator is essential for mathematical operations, especially for checking divisibility, creating cyclic behavior, and constraining values within ranges. Understanding its behavior with negative numbers and special values is crucial for effective JavaScript programming.
499 Views
