Skip to main content

JavaScript Numbers & Math

JavaScript Math.min and Math.max

Written by Published

Math.min and Math.max find the smallest and largest of the values you give them.

They take separate arguments, not an array.

Spread is what bridges that gap.

Example

Example

javascript

console.log(Math.min(5, 2, 9));
console.log(Math.max(5, 2, 9));

The output is 2 then 9.

How They Work

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

Syntax

javascript

Math.max(a, b, c);
Math.max(...array);

Passing an array directly gives NaN.

Using an Array

Spreading turns the array into separate arguments.

Example

Example

javascript

const scores = [45, 82, 30, 91];

console.log(Math.max(...scores));
console.log(Math.min(...scores));

The output is 91 then 30.

Passing the Array Directly Fails

The array becomes a single argument, which cannot be compared.

Example

Example

javascript

const scores = [45, 82, 30];

console.log(Math.max(scores));
console.log(Math.max(...scores));

The first gives NaN.

Clamping a Value

Combining both keeps a number inside a range.

This is used constantly for things like volume or progress.

Example

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.

Empty Arrays

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

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.

Very Large Arrays

Spreading a huge array can exceed the argument limit.

reduce is safe at any size.

Example

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

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>

Try It Yourself

Run the above example in the Try It Editor.

Try without spread:

Remove the three dots and watch NaN appear.

Important Points

  • Both take separate arguments, not an array.
  • Spread the array with three dots.
  • Passing an array directly gives NaN.
  • Combining both clamps a value into a range.
  • An empty array gives -Infinity from max, so guard it.

Conclusion

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.