The Array.reduce Method Part 1 - Intro

Greetings, friends! The Array.reduce method is probably one of the toughest functions to learn in JavaScript. However, when used correctly, this method is very powerful and can help solve a variety of problems in a clean way. I'll try my best to explain the reduce method, but it's a good idea to look at as many examples as possible to see how versatile this method can really be.

The "Sum" Example

The most common example of using the reduce method is to add together all numbers in an array and return the sum.

const array = [10, 20, 30, 40];
const initialValue = 1;

// sum = 1 + 10 + 20 + 30 + 40 = 100
const sum = array.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
);

console.log(sum);
// OUTPUT: 101

Let me explain what is happening. The reduce method uses a concept known as an "accumulator" to store values. It starts with initialValue, which is set equal to one. Then, the reduce method iterates through each element in an array while accumulating a new value. Since the array has a length of 4, we will have index #0, index #1, index #2, and index #3.

At index #0, the accumulator will be set equal to initialValue, which is set to one in this case. The currentValue equals the element at index #0, which is equal to 10. We will return a value of accumulator + currentValue which equals 1 + 10. This return value will then be set as the new accumulator value during the next iteration of the array.

array = [10, 20, 30, 40]
We are at index 0:

initialValue = 1
accumulator = initialValue = 1
currentValue = array[0] = 10
return accumulator + currentValue = 1 + 10 = 11 = next accumulator value

At index #1, we use the return value from the previous iteration which was 1 + 10, which equals 11. The currentValue now equals the element at index #1, which is equal to 20. We will now return accumulator + currentValue again, which is 11 + 20.

array = [10, 20, 30, 40]
We are at index 1:

accumulator = 11
currentValue = array[1] = 20
return accumulator + currentValue = 11 + 20 = 31 = next accumulator value

At index #2, we use the return value from the previous iteration which was 11 + 20, which equals 31. The currentValue now equals the element at index #2, which is equal to 30. We will now return accumulator + currentValue again, which is 31 + 30.

array = [10, 20, 30, 40]
We are at index 2:

accumulator = 31
currentValue = array[2] = 30
return accumulator + currentValue = 31 + 30 = 61 = next accumulator value

At index #3, we use the return value from the previous iteration which was 31 + 30, which equals 61. The currentValue now equals the element at index #3, which is equal to 40. We will now return accumulator + currentValue again, which is 61 + 40.

array = [10, 20, 30, 40]
We are at index 3:

accumulator = 61
currentValue = array[3] = 40
return accumulator + currentValue = 61 + 40 = 101 = final value

We have now reached the end of the array. The final value of the accumulator is 61 + 40 which equals 101. We then set this value to the variable, sum, and log it to the console.

array = [10, 20, 30, 40]

sum = 1 + 10 + 20 + 30 + 40
console.log(sum);

Here is a tabular breakdown of what happens during each iteration of the reduce method:

We can prove that four iterations occur by logging a statement from within the reducer callback function.

const array = [10, 20, 30, 40];
const initialValue = 1;

const sum = array.reduce((accumulator, currentValue) => {
  console.log('Reducer called!');
  return accumulator + currentValue;
}, initialValue);

You should see Reducer called! logged four times to the console.

Function Definition for Array.reduce

The reduce method has the following function declaration according to MDN:

reduce(callbackFn, initialValue)

In the "sum" example we discussed earlier, callbackFn is a callback function equal to the following:

(accumulator, currentValue) => accumulator + currentValue

We commonly refer to a callback function passed into the reduce method as a "reducer" callback function. This entire line is the first parameter we pass into the reduce method.

The second parameter we pass into the reduce method is initialValue. This parameter is actually optional. Let's look what happens if we run the "sum" example without passing in initialValue.

const array = [10, 20, 30, 40];

// sum = 10 + 20 + 30 + 40 = 100
const sum = array.reduce((accumulator, currentValue) => accumulator + currentValue);

console.log(sum);
// OUTPUT: 100

The sum is now equal to 100, since we no longer set initialValue equal to one. When we don't pass in an initial value, the accumulator will be equal to the first element of the array during the first iteration of the reduce method, which is equal to 10 in this case. This also means we'll have one less iteration occur.

We can prove that only three iterations occur by logging a statement from within the reducer callback function.

const array = [10, 20, 30, 40];

const sum = array.reduce((accumulator, currentValue) => {
  console.log('Reducer called!');
  return accumulator + currentValue;
});

You should see Reducer called! logged three times to the console.

Using a Callback Function with Three or Four Parameters

The reduce method can accept a callback function with two, three, or four parameters.

reduce((accumulator, currentValue) => { /* ... */ }, initialValue )
reduce((accumulator, currentValue, currentIndex) => { /* ... */ }, initialValue )
reduce((accumulator, currentValue, currentIndex, array) => { /* ... */ }, initialValue )

The currentIndex is the current index of the element when the reduce method iterates through the array. The array parameter is a reference to the array the reduce method is being called on.

const initialValue = 1;

const newArray = [10, 20, 30, 40].reduce((accumulator, currentValue, currentIndex, array) => {
  console.log(`Current value of [${array}] at index ${currentIndex} equals ${currentValue}`);
  return accumulator + currentValue;
}, initialValue)

/* OUTPUT:
Current value of [10,20,30,40] at index 0 equals 10
Current value of [10,20,30,40] at index 1 equals 20
Current value of [10,20,30,40] at index 2 equals 30
Current value of [10,20,30,40] at index 3 equals 40
*/

Conclusion

This has been a short introduction to the Array.reduce method in JavaScript, but we've only scratched the surface! This is only Part 1 of my tutorial series on the reduce method. In Part 2, I will discuss more applications of this method and show how we can rely less on the map and filter methods.

Resources

• Array.reduce
• Callback Functions