Great question!
It seems to me that ECMA is confusing and it's easy to miss how the modulo operator works (I certainly did). From ECMA-262 §11.5.3 there is a statement that:
The result of a floating-point remainder operation as computed by the % operator…
which infers a remainder operation. It goes on to provide an algorithm:
…where neither an infinity, nor a zero, nor NaN is involved, the floating-point remainder r from a dividend n and a divisor d is defined by the mathematical relation r = n − (d × q) where q is an integer that is negative only if n/d is negative and positive only if n/d is positive, and whose magnitude is as large as possible without exceeding the magnitude of the true mathematical quotient of n and d. r is computed and rounded to the nearest representable value using IEEE 754 round-to-nearest mode.
Applying that to the case of -1 % 4, then:
n = -1
d = 4
trueMathematicalQuotient = -1/4 = -0.25
Therefore q must be negative since n/d is negative. The largest negative integer that d (4) can be multiplied by that is less than or equal to -0.25 in magnitude and that the gives a result less than or equal to n (-1) is -0 (noting that -1 has greater magnitude than -0.25).
The simple way to do that is to truncate q to an integer:
q = -0 // -0.25 truncated
Putting numbers into the equation:
r = -1 - (4 * 0)
r = -1 - 0
r = -1
Which can be put in a function as:
function remainderMod(n, d) {
var q = parseInt(n / d); // truncates to lower magnitude
return n - (d * q);
}
or abbreviated to:
function remainderMod(n, d) {
return n - (d * (n/d | 0));
}
Great question!
It seems to me that ECMA is confusing and it's easy to miss how the modulo operator works (I certainly did). From ECMA-262 §11.5.3 there is a statement that:
The result of a floating-point remainder operation as computed by the % operator…
which infers a remainder operation. It goes on to provide an algorithm:
…where neither an infinity, nor a zero, nor NaN is involved, the floating-point remainder r from a dividend n and a divisor d is defined by the mathematical relation r = n − (d × q) where q is an integer that is negative only if n/d is negative and positive only if n/d is positive, and whose magnitude is as large as possible without exceeding the magnitude of the true mathematical quotient of n and d. r is computed and rounded to the nearest representable value using IEEE 754 round-to-nearest mode.
Applying that to the case of -1 % 4, then:
n = -1
d = 4
trueMathematicalQuotient = -1/4 = -0.25
Therefore q must be negative since n/d is negative. The largest negative integer that d (4) can be multiplied by that is less than or equal to -0.25 in magnitude and that the gives a result less than or equal to n (-1) is -0 (noting that -1 has greater magnitude than -0.25).
The simple way to do that is to truncate q to an integer:
q = -0 // -0.25 truncated
Putting numbers into the equation:
r = -1 - (4 * 0)
r = -1 - 0
r = -1
Which can be put in a function as:
function remainderMod(n, d) {
var q = parseInt(n / d); // truncates to lower magnitude
return n - (d * q);
}
or abbreviated to:
function remainderMod(n, d) {
return n - (d * (n/d | 0));
}
The OP wanted to understand what is going on (not necessarily "fix" it). The short answer is that JavaScript has a "remainder" operator not a "modulo" operator (according to Douglas Crawford). For the full difference, here is a description of modulo vs remainder (specifically referring to C#).
Edit: Finally, the spec has the definitive answer.
All of your code is correct and should work just fine. You need to actually display the result of this using a piece of JavaScript on the page load (for example).
In short, at the moment you have the result of your JavaScript function myModulo(5, 3) stored in the variable x. Now you haven't actually told the browser where to display this returned integer value - or even when to call the function in the DOM.
You might want to try...
window.onload = function() {
var output = document.getElementById("output");
output.innerHTML(myModulo(5, 3));
};
and having a div or p element (for example) which have the output id - i.e. <div id="output"></div>
Your code is just fine. You just need to update the view with the calculation result..
Here is an example of a working Mod calculator.
<!DOCTYPE html>
<html>
<head>
<title>Modulo Calculator</title>
</head>
<body>
<h1>Modulo Caculator </h1>
<label for="dividend">Dividend</label>
<input id="dividend">
<label for="divisor">Divisor</label>
<input id="divisor">
<button id="calcBtn">Calculate</button>
<p>Result is: <span id="result"></span></p>
<script>
// Your modulo function
function myModulo(a,b) {
return a % b;
};
//
var calcBtn = document.getElementById("calcBtn");
var resultElement = document.getElementById("result");
// Set onclick event to run the Mod and update the results
calcBtn.onclick = function(){
// Get values
var dividend = document.getElementById("dividend").value;
var divisor = document.getElementById("divisor").value;
// Run Modulo function
var modResult = myModulo(dividend, divisor);
// Update Result
resultElement.innerText = modResult;
}
</script>
</body>
</html>
Explanation of this code
- First of all we create 2 inputs that will store the dividend and the divisor (your 'a' and 'b'), a button to trigger the calculation action and a span element to display the result.
- Add an onclick event listener that will run each time the calculation button is clicked. This will execute a function that we define.
- Once the calculation button is clicked, our onclick function retrieves both arguments, the dividend and the divisor, and runs your myModulo function.
- After the result is returned, our onclick function displays it.
Hope this helps you understand more about JS and HTML interaction. Good luck
