JavaScript Reduce() Method Explained

This article explains how the reduce() method works with code samples. The reduce() method operates on the items of an array and returns a single value. Let’s go straight to the examples to see how it works.

Syntax
reduce(callback)
reduce(callback, initialValue)

initialValue parameter is optional. If you don't specify an initial value, it will be the first item of the array.

Summing an Array of Numbers

Consider we have the following array of numbers and we want to find the sum of all items.

const numbers = [1, 3, 5, 7];

According to reduce(callback) syntax, we need to define a callback function (aka reducer function). Our reducer function sumReducer() takes 2 parameters and returns the sum of these numbers.

function sumReducer(accumulator, currentValue) {
  return accumulator + currentValue;
}

Now that our reducer function is ready, we can use it on the numbers array. The code below sums all items in numbers array (1+3+5+7=16) and prints the result to the console.

let sum = numbers.reduce(sumReducer);
console.log(sum); //output:16

Now, let’s take a closer look at how the code works.

How Reduce() Method Works?

The reduce() method runs callback function (sumReducer() function in our example) for each item in the array. It holds the value returned from the callback function and uses this accumulated value in the next iteration.

numbers = [1, 3, 5, 7]

Step 1:
[1, 3, 5, 7]
First item of the array is the accumulated value: 1
Iteration starts with the second item. Current item:3

1 + 3 = 4 ───────────────────────────────┐
                                         │
Step 2:                                  │
[1, 3, 5, 7]                             ▼
Accumulated value from previous step is: 4
Current item: 5

4 + 5 = 9 ───────────────────────────────┐
                                         │
Step 3:                                  │
[1, 3, 5, 7]                             ▼
Accumulated value from previous step is: 9
Current item: 7

9 + 7 = 16 ──────────────────────────────┐
                                         │
                                         ▼
                          Array is reduced to a single value (16)

Reduce() Method with an Initial Value

We can also assign an initial value with ruduce() method. If an initial value is specified, it will be the first accumulated value.

Syntax
  reduce(callback)
► reduce(callback, initialValue)

Let’s give an initial value to our reduce call and see what happens. Reducing starts with initial value (1000) and iteration continues with other items in the numbers array (1000 + 1 + 3 + 5 + 7 = 1016).

let sum = numbers.reduce(sumReducer, 1000);
console.log(sum); //output:1016

Reducer Function with ES6 Syntax

In modern JavaScript (ES6), we can write functions using fat arrow (=>) notation. A function created using fat arrow notation is called arrow function. Below we have rewritten sumReducer(accumulator, currentValue) function as an arrow function.

const numbers = [1, 3, 5, 7];

// sumReducer is rewritten using arrow function
const sumReducer = 
   (accumulator, currentValue) => accumulator + currentValue;

let sum = numbers.reduce(sumReducer);
console.log(sum);         // output: 16

Instead of creating the reducer function explicity, you can also type your arrow function inside reduce method as a function parameter.

const numbers = [1, 3, 5, 7];

let sum = 
   numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(sum);         // output: 16

Complete Syntax of Callback Function

In previous examples we have used 2 paramters in our callback function sumReducer(accumulator, currentValue). You can include index and array parameters in function definition to get more information.

The index parameter gives the current index of item being processed in the array. The array parameter is the original array.

Syntax
  callback(accumulator, currentValue)
  callback(accumulator, currentValue, index)
► callback(accumulator, currentValue, index, array)

In the following code callback function sumReducer is updated to include index and array parameters.

const numbers = [1, 3, 5, 7];

function sumReducer(accumulator, currentValue, index, array) {
  console.log("Step " + (index + 1) + 
              " of " + array.length);

  console.log("  Accumulator: " + accumulator + 
              ", currentValue: " + currentValue);

  return accumulator + currentValue;
}

let sum = numbers.reduce(sumReducer, 0);
console.log("=> Reduced Value is: " + sum);

// Output:
// Step 1 of 4
//   Accumulator: 0, currentValue: 1
// Step 2 of 4
//   Accumulator: 1, currentValue: 3
// Step 3 of 4
//   Accumulator: 4, currentValue: 5
// Step 4 of 4
//   Accumulator: 9, currentValue: 7
// => Reduced Value is: 16