[[TOC]]

Reduce

The reduce() method is used to calculate a single value from an array.
In other terms, the reduce() method reduces an array into a single value.
The most common use cases of reduce (when working with arrays of numbers) are sum & multiplication.
The reduce() method takes a reducer which allows you to configure the logic of how the array will be reduced into a single number.

Basically reduce() is a way to take an entire array, assign some logic to it that reduces it to a single value.

Basic examples:

const grades = [10, 15, 5];

const sum = grades.reduce((total, current) => { 
    return total + current;
}, 0);

The Reducer:

The total is always referring to the last computed value by the reduce function.

this is also called the Accumulator

The current is referring to a single item in the array.

Example:

const grades = [10, 15, 5]; //the array

const sum = grades.reduce((total, current) => { 
    return total + current;
}, 0);

The first time the callback runs, total is assigned 0 (because of the initial value that we'll explain in a bit) and current will be assigned to the first item of the array. So total = 0 and current = 10.
Then we return total + current which is 0 + 10 = 10. Now the new value of total becomes 10.
The callback runs the second time and this time current = 15 (second item of the array) and total = 10. We return total + current which is 10 + 15 = 25. The current value of total becomes 25.
The callback runs the third time and this time current = 5 (third item of the array) and total = 25. We return total + current which is 25 + 5 = 30.
There are no more items in the array, so the result of the reduce is the final value of total which is 30.
Thus the sum is 30.

To sum this up, it takes the total value and then adds the current to it, iterating until the array is empty.

The initial value

Don't confuse these parameters with the (total, current)

The initial value is what you pass in to start. If we take the code above and change it a bit like below, the sum is 33 instead.

const grades = [10, 15, 5];

const sum = grades.reduce((total, current) => { 
    return total + current;
}, 3); //returns 33. 30 from the initial, plus the starting value of 3. 

// run this and visualize what javascript does to understand reduce().
let grades = [10, 5, 15, 20];

let sum = grades.reduce((total, current) => {
    console.log(`Total is ${total}`);
    console.log(`Current is ${current}`);
    console.log("---");
    return total + current;
}, 0);

console.log(`Sum is ${sum}`);

Array Reduce - Multiplication style

const numbers = [5, 2, 10];
const result = numbers.reduce((total, current) => {
    return total * current;
}, 1); // <-- notice the starting value of 1 here.
console.log(result); // 100

The starting value of 1 is simply because you can't multiply anything by zero unless you want the answer to be zero. This is why in multiplication we use a starting value of 1 and in sum, we use a starting value of 0. #bugs. Here's how it runs:

The first time .reduce() callback runs, total will have a value of 1 (coming from the starting value) and current will have a value of 5 (which is the first item of the array).
Then we return total * current which is 1 * 5 = 5 so the next time the callback runs, total will have a value of 5.
The second time the callback runs, total is 5 and current is 2 (second item of the array). We compute 5 * 2 = 10. We return 10.
The third time the callback runs, total is 10 and current is 10 (third item of the array). We compute 10 * 10 = 100. We return 100.
The result of the .reduce() is 100 which is stored in the variable result.

.reduce() Common Mistakes

syntax errors - lots of parenthesis and curly braces
forgetting to return inside of the .reduce() callback
wrong initial value - if you use 0 for multiplication, you'll get 0 at the end.

As a function

const sumNumbers = numbers => {
    let sum = numbers.reduce((total, current) => {
        return total + current
    },0);
    
    console.log(sum);
    return (sum)
}

// Sample usage - do not modify
console.log(sumNumbers([10, 20, 30])) // 60
console.log(sumNumbers([2, 4, 2, 10])) // 18

Multiplication practice

const multiplyNumbers = numbers => {
    let product = numbers.reduce((total, current) => {
        return total * current;
    },1)
    return product;
}

// Sample usage - do not modify
console.log(multiplyNumbers([10, 20, 30])) // 6000
console.log(multiplyNumbers([2, 4, 2, 10])) // 160

Recap

You can use the foreach in place of the reduce - it's not a problem. Different techniques for different types of coding.

// foreach
let sum = 0
numbers.forEach(number => {
    sum = sum + number
});

//reduce
const sum = numbers.reduce((total, current) => {
    return total + current
}, 0);

//with an implicit return
const sum = numbers.reduce((total, current) => total + current, 0);

Video

The Reducer:​

The initial value​