Understand JavaScript Reduce Method With 5 Examples

The reduce method in JavaScript is used to “reduce” an array to a single value, which can be anything—a number, an object, another array, etc. It accepts a reducer function that will get executed on all the items of the specified array in the left-to-right. The returned single value is stored in the accumulator

Syntax

array.reduce((accumulator, currentValue, index, array) => {
  // Logic to reduce the array
}, initialValue);

Parameters

  • accumulator: This holds the accumulated result of the function so far.
  • currentValue: The current element being processed in the array.
  • index (optional): The index of the current element.
  • array (optional): The array on which reduce was called.

In this article, we’ll explore five examples to illustrate how reduce works –

Find the Maximum Value

const numbers = [5, 2, 9, 1, 5, 6];
// Initialize the accumulator with an object containing initial min and max values.
const minMax = numbers.reduce((acc, current) => {
  if (current < acc.min) acc.min = current;
  if (current > acc.max) acc.max = current;
  return acc;
}, { min: numbers[0], max: numbers[0] });

console.log("Minimum:", minMax.min);
console.log("Maximum:", minMax.max);

This reduce call initializes with an object holding min and max properties. As it iterates, it updates min and max whenever a lower or higher value is found.


The sum of All Elements in an Array

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue; // Add the current value to the accumulator
}, 0); 

console.log(sum); // Output: 15

Here, reduce starts with 0 as the initial accumulator value and adds each element to it sequentially, giving the total sum at the end.


Flattening Nested Arrays

const arr = [1, [2, [3, [4]], 5]];

const flatten = (array) =>
  array.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatten(val) : val), []);

console.log(flatten(arr)); // [1, 2, 3, 4, 5]

This recursive function checks if each element is an array; if so, it flattens it further by calling flatten again. The reduce function concatenates values into a single array, effectively removing nesting.


Filtering Falsy Values from an Array

const array = [0, 1, false, 2, '', 3, null, 4, undefined, 5, NaN];
const filteredArray = array.reduce((acc, curr) => {
  if (Boolean(curr)) {
    acc.push(curr);
  }
  return acc;
}, []);

console.log(filteredArray);  // Output: [1, 2, 3, 4, 5]

This example uses Boolean(curr) to test each item. If it’s true, it’s added to acc, the array that holds the filtered values.


Counting Occurrences of Items in an Array

const array = ['apple', 'banana', 'orange', 'apple', 'orange', 'banana', 'apple'];

const countOccurrences = array.reduce((accumulator, currentValue) => {
  // Check if the current value already exists in the accumulator
  if (accumulator[currentValue]) {
    accumulator[currentValue]++;
  } else {
    accumulator[currentValue] = 1;
  }
  return accumulator; 
}, {});

console.log(countOccurrences);
// Output: { apple: 3, banana: 2, orange: 2 }

Here, reduce checks if the current item already has a key in the accumulator object. If it does, it increments the count; if not, it sets the count to 1.


Wrapping Up

The reduce method in JavaScript can do much more than just sum numbers. It can help find values, flatten arrays, filter elements, and even count occurrences—all in a single pass. Understanding reduce gives you a powerful tool for handling complex array transformations cleanly and efficiently.