The JavaScript reduce method is one of the more challenging JavaScript methods to understand. This article will simplify it for you and provide you with several examples.

The reduce method is performed on arrays. It allows us to reduce an array using a reducer function. The reducer function performs an accumulation of an array's values in order to reduce that array to a single result.

The reduce method

The reduce method accepts two arguments.

const result = array.reduce(callback, initialValue);

The first argument is a callback function that performs the reduce operation. The second argument is an optional argument for the initial value of the operation.

When applied to an array, the callback function is called for each item of the array.

Four optional arguments are available to the callback function.

array.reduce((accumulator, item, index, array) => {
  // ...
})

The first argument is the accumulator value that collects the function's accumulated result. The second argument is the current array item of the iteration. The third argument is the current array item's index, and the last argument is the array itself. The first two arguments are most commonly used. The third and fourth arguments are often omitted.

The reduce method will not change the original array that it executes on. Also, the reduce function won't run if the array has no elements.

Calculating the sum of an array

Calculating the sum of an array is the easiest example of a reduce operation. The array [1, 2, 3] will get reduced to a sum of 6.

const numbers = [1, 2, 3];
const sum = numbers.reduce((sum, number) => {
  return sum + number;
}, 0);
console.log(sum); // 6

The callback function

(sum, number) => {
  return sum + number;
}

The arrow function above is the callback function that gets invoked for every item in the array.

The accumulator

Notice that the second argument of reduce is set to 0. This initializes the accumulator with an initial value.

sum is the accumulator. It starts with the initial value of 0. The return value of each reduce call is used as the new accumulator value for the next iteration.

const numbers = [1, 2, 3];
const sum = numbers.reduce((sum, number) => {
  console.log(sum); // 0, then 1, then 3, then 6
  return sum + number;
}, 0);

Without an initial value

The second argument of reduce, the initial value, is optional. This means we can omit it.

const numbers = [1, 2, 3];
const sum = numbers.reduce((sum, number) => {
  return sum + number;
});
console.log(sum); // 6

When we omit the initial value, the reduce method will initialize the accumulator with the first item of the array instead. Iteration will then start with the second item of the array. In this case, the accumulator was initialized with the array item 1 and iteration started with the array item 2.

Finding the maximum value

The reduce method can be used to find the max value in an array.

const numbers = [1, 2, 3];
const sum = numbers.reduce((max, item) => {
  return item > max ? item : max;
});
console.log(sum);

max is the accumulator. It starts with the first array item of 1 since no initial value was provided to the reduce method for the accumulator. The return value of each reduce call will be the new accumulator value for the next iteration.

For the first iteration, max will be 1 and item will be 2, since iteration starts with the second array item when no initial value is provided for reduce. 2 is greater than 1, so 2 is returned as the new accumulator value. For the last iteration on the numbers array, max is 2 and item is 3. 3 is greater than 2, so 3 is returned as the final reduced value.

The sum of an array of objects

The reduce method can also help with finding the sum of an array of objects.

const items = [{ n: 1 }, { n: 2 }, { n: 3 }];
const sum = items.reduce((accumulator, currentItem) => {
    return accumulator + currentItem.n;
}, 0);
console.log(sum); // 6

Flattening an array of arrays

The reduce method can also help with flatting an array of arrays so that a flat, one-dimensional array is returned as the result.

const items = [[0, 1], [2, 3], [4, 5]];
const result = items.reduce((accumulator, currentItem) => {
  // concat() merges two or more arrays
  return accumulator.concat(currentItem);
}, []); 
console.log(result); // [0, 1, 2, 3, 4, 5]

The initial value for the accumulator of reduce is set to an empty array and the concat method is used to merge the accumulator array and the current array per iteration.

Removing duplicates in an array

The reduce method can also help with removing duplicate entries from an array.

const items = [1, 2, 1, 2, 3, 4];
const result = items.reduce((accumulator, current) => {
  if (accumulator.indexOf(current) === -1) {
    accumulator.push(current)
  }
  return accumulator;
}, []);
console.log(result); // [1, 2, 3, 4]

The accumulator is used as the array that groups unique items. If the array item for the current iteration is not in the accumulating array, then and only then, does it get added. The accumulating array is then returned after each iteration to serve as the accumulator value for the next iteration.

Counting occurrences

The reduce method can also help with counting the occurrences of values.

const items = [1, 2, 1, 2, 3];
const result = items.reduce((accumulator, current) => {
  if (current in accumulator) {
    accumulator[current]++;
  } else {
    accumulator[current] = 1;
  }
  return accumulator;
}, {});
console.log(result); // { 1: 2, 2: 2, 3: 1 }

The accumulator is initialized as an empty object {}. Each unique array value becomes a key of that object in order to track the number of occurrences of each. For the first iteration, current will not be found as a key of the accumulator object, so execution will enter the else clause and set the current value's occurrences to 1. When the current array value is found as a key in the accumulator, then that value's occurrences is incremented by one.

Grouping objects

The reduce method can also help with grouping objects in an array of objects.

const items = [
  { name: 'Mario', gender: 'M' },
  { name: 'Luigi', gender: 'M' },
  { name: 'Peach', gender: 'F' },
];

const result = items.reduce((acc, item) => {
    const key = item['gender'];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(item);
    return acc;
}, {});
console.log(result);

The accumulator is initialized as an empty object {}. During each iteration of the reduce method, the gender value is retrieved from each object in the array. If the accumulator object does not contain the gender value as a key, it is added to it and initialized with an empty array. In the following iterations, if the current items array object's gender key is found in the accumulator object, then its corresponding array gets the current object added to it.

The result is:

{
  F: [
    {
      gender: "F",
      name: "Peach"
    }
  ],
  M: [
    {
      gender: "M",
      name: "Mario"
    }, 
    {
      gender: "M",
      name: "Luigi"
    }
  ]
}

Conclusion

We saw how to use the JavaScript reduce method to apply a reducer callback function to each element of an array. After working through the examples that we covered, you will be able to use the reduce method with confidence.