Start learning free

LESSON 269 OF 671 · DESTRUCTURING, SORTING & BUILT-INS

Min, Max and Sum in JavaScript: Math.min, Math.max, reduce

Lesson Read the full explanation

TL ; DR:

Math.min(...arr) gives the smallest value of an array.

Math.max(...arr) gives the largest value.

reduce adds all the values up.


let prices = [4, 9, 2, 7];

console.log(Math.min(...prices));    // 2

console.log(Math.max(...prices));    // 9

let total = prices.reduce((sum, x) => sum + x, 0);

console.log(total);                  // 22

Full lesson:

In Maximum Number In Array, a loop found the largest value. In Sum of Numbers, a loop added numbers up. These jobs come up all the time. JavaScript has ready-made tools for them.

Math.min and Math.max compare separate numbers, as in Math.max(3, 8). You used Math.max this way in Maximum Number In Array. The three dots in ...prices spread the array out into separate numbers. So Math.max(...prices) is the array's largest value.

Don't forget the dots. With two or more prices, Math.max(prices) gives NaN, which means "not a number".

JavaScript has no sum function. The array method reduce does the job:

let total = prices.reduce((sum, x) => sum + x, 0);

The arrow function gets the running sum and the next value x. It returns the new sum. The reduce method calls it once per value, from left to right. The 0 at the end is where the sum starts.

Watch out for an empty array. Math.max(...[]) is -Infinity. Math.min(...[]) is Infinity. You get no error, just a strange number. Check arr.length first.

reduce on an empty array gives its start value, 0. Without that 0, it throws a TypeError. So always pass it.

Your task

minutes holds how many minutes you practiced coding on each day of a week.

Store the shortest day in shortest and the longest day in longest. Store the week's total in total.

Use the built-ins from this lesson. The code at the bottom prints all three.

Expected output:

shortest = 15
longest = 60
total = 235
STEP 1 OF 3
    Ctrl + Enter to check

    JAVASCRIPT · DESTRUCTURING, SORTING & BUILT-INS

    Min Max Sum in JavaScript, explained

    Ready-made tools for common jobs

    Finding the smallest value, the largest value and the total of an array are jobs you could do with a loop. JavaScript has built-in tools for them.

    let prices = [4, 9, 2, 7];

console.log(Math.min(...prices));    // 2
console.log(Math.max(...prices));    // 9

let total = prices.reduce((sum, x) => sum + x, 0);
console.log(total);                  // 22

    Math.min and Math.max

    Math.min and Math.max compare separate numbers: Math.max(3, 8) is 8. They do not take an array. The three dots in ...prices are the spread syntax. They spread the array out into separate numbers, so Math.max(...prices) works like Math.max(4, 9, 2, 7).

    Without the dots you pass the array itself, and the result is usually NaN ("not a number"). For the minutes array in this lesson, Math.max(minutes) gives NaN.

    reduce for the sum

    JavaScript has no sum function. The array method reduce does it. You give it an arrow function with two parameters, the running sum and the next value x. It returns the new sum. reduce calls it once per value, from left to right. The 0 after the function is the value the sum starts with.

    To see what reduce does with the lesson's week of minutes, [25, 40, 15, 60, 30, 45, 20], here is the running sum and the next value each time the arrow function is called:

    sum=0 x=25
sum=25 x=40
sum=65 x=15
sum=80 x=60
sum=140 x=30
sum=170 x=45
sum=215 x=20

    After the last call the function returns 235, and that is the value reduce gives back. The first call starts from the 0 you passed in. This is the same bookkeeping as a loop with a total variable, written as a single expression. Whatever the arrow function returns becomes sum in the next call, so forgetting to return a value, for example by using curly braces without return, makes the next sum undefined. For [1, 2, 3] the whole result is then undefined instead of 6, which is an easy bug to miss when you only glance at the code. The shortest form, with no braces, returns the value automatically.

    Empty arrays

    An empty array has no smallest or largest value, and the built-ins do not raise an error. Math.max(...[]) is -Infinity and Math.min(...[]) is Infinity. They are strange numbers you may not notice, so check arr.length first when the array can be empty.

    With reduce the start value matters. On an empty array, reduce with a start of 0 returns 0. Without the start value, it throws TypeError: Reduce of empty array with no initial value. So always pass the start value.

    One more limit: the spread passes every value as a separate argument, and a very large array (hundreds of thousands of items) can fail with a RangeError: Maximum call stack size exceeded. For the small arrays in this chapter that never happens.

    The lesson's task, step by step

    minutes holds the minutes of coding practice on each day of a week: [25, 40, 15, 60, 30, 45, 20].

    1. Store the shortest day in shortest: Math.min(...minutes).
    2. Store the longest day in longest: Math.max(...minutes).
    3. Store the total in total: minutes.reduce((sum, x) => sum + x, 0).
    let minutes = [25, 40, 15, 60, 30, 45, 20];

let shortest = Math.min(...minutes);
let longest = Math.max(...minutes);
let total = minutes.reduce((sum, x) => sum + x, 0);

console.log("shortest = " + shortest);
console.log("longest = " + longest);
console.log("total = " + total);

    The output is:

    shortest = 15
longest = 60
total = 235

    Key takeaways

    • Math.min(...arr) and Math.max(...arr) need the dots to spread the array.
    • arr.reduce((sum, x) => sum + x, 0) adds the values up.
    • Empty arrays give Infinity and -Infinity from the built-ins, so check the length first.
    • Always give reduce a start value.
    Keep going with JavaScript500+ step-by-step lessons, from your first line of code to coding interviews. Free to start.
    Start learning free