
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