The .reduce() Method

Another widely used iteration method is .reduce(). The .reduce() method returns a single value after iterating through the elements of an array, thereby reducing the array. Take a look at the example below: 

Here are the values of accumulator and currentValue as we iterate through the numbers array: 

Now let’s go over the use of .reduce() from the example above:

• numbers is an array that contains numbers.

• summedNums is a variable that stores the returned value of invoking .reduce() on numbers.

• numbers.reduce() calls the .reduce() method on the numbers array and takes in a callback function as argument.

• The callback function has two parameters, accumulator and currentValue. The value of accumulator starts off as the value of the first element in the array and the currentValue starts as the second element. To see the value of accumulator and currentValue change, review the chart above.

• As .reduce() iterates through the array, the return value of the callback function becomes the accumulator value for the next iteration, currentValue takes on the value of the current element in the looping process.

The .reduce() method can also take an optional second parameter to set an initial value for accumulator (remember, the first argument is the callback function!). For instance:

Here’s an updated chart that accounts for the second argument of 100: 

Instructions

1.Let’s practice calling .reduce() and using console.log() to check the values as .reduce() iterates through the array.

In main.js, there is an array of numbers, newNumbers.

To start, declare a new variable named newSum using the const keyword. Assign to newSum the value of calling .reduce() on newNumbers. You don’t need to provide any arguments to .reduce() yet.

You’ll also see a TypeError: undefined is not a function but we’ll fix that after we add our callback function in the next step!

2.Provide .reduce with an argument of a callback function. The callback function has two parameters. The first parameter is accumulator and the second parameter is currentValue. Use either a function expression or an arrow function.

3.To check the value being used as we iterate through the array, add three statements to the function body of the callback:

• console.log('The value of accumulator: ', accumulator);

• console.log('The value of currentValue: ', currentValue);

• a return statement that adds accumulator to currentValue.

4.Log the value of newSum to the console to see the return value of calling .reduce() on newNumbers.

5.While we have this code set up, let’s also check what happens if you add a second argument to .reduce(). The second argument acts as an initial value for the accumulator.

Add a second argument of 10 to .reduce().

app.js