JavaScript Numbers & Math
Math.minandMath.maxfind the smallest and largest of the values you give them.
They take separate arguments, not an array.
Spread is what bridges that gap.
Example
javascript
console.log(Math.min(5, 2, 9));
console.log(Math.max(5, 2, 9));The output is 2 then 9.
Both accept any number of arguments.
An array must be spread with three dots.
With no arguments, min gives Infinity and max gives -Infinity.
Syntax
javascript
Math.max(a, b, c);
Math.max(...array);Passing an array directly gives NaN.
Spreading turns the array into separate arguments.
Example
javascript
const scores = [45, 82, 30, 91];
console.log(Math.max(...scores));
console.log(Math.min(...scores));The output is 91 then 30.
The array becomes a single argument, which cannot be compared.
Example
javascript
const scores = [45, 82, 30];
console.log(Math.max(scores));
console.log(Math.max(...scores));The first gives NaN.
Combining both keeps a number inside a range.
This is used constantly for things like volume or progress.
Example
javascript
function clamp(value, min, max) {
return Math.min(Math.max(value, min), max);
}
console.log(clamp(150, 0, 100));
console.log(clamp(-20, 0, 100));
console.log(clamp(50, 0, 100));The output is 100, 0, 50.
Spreading an empty array passes no arguments at all.
Math.max then returns -Infinity and Math.min returns Infinity, which is rarely what you want.
Example
javascript
const empty = [];
console.log(Math.max(...empty));
console.log(empty.length === 0 ? "check first" : Math.max(...empty));Guard against an empty array before using it.
Spreading a huge array can exceed the argument limit.
reduce is safe at any size.
Example
javascript
const numbers = [45, 82, 30, 91];
const largest = numbers.reduce(function (big, n) {
return n > big ? n : big;
}, numbers[0]);
console.log(largest);For a few thousand values, spread is fine.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Math.min and Math.max</title>
</head>
<body>
<h1>Math.min and Math.max</h1>
<p id="out"></p>
<script>
const scores = [45, 82, 30, 91, 67];
function clamp(value, min, max) {
return Math.min(Math.max(value, min), max);
}
document.getElementById("out").innerHTML =
"Highest: " + Math.max(...scores) +
"<br>Lowest: " + Math.min(...scores) +
"<br>Clamped 150 to 0-100: " + clamp(150, 0, 100);
</script>
</body>
</html>Run the above example in the Try It Editor.
Try without spread:
Remove the three dots and watch NaN appear.
NaN.max, so guard it.The spread requirement is the thing to remember here.
Clamping is a small function worth keeping around.
For very large arrays, reduce is the safer choice.