The reduce Method for JavaScript Arrays

The reduce method for JavaScript arrays provides the means of reducing the elements of an array to a single value. It uses a callback function that you provide to iterate through the elements of the array and gradually combine their values into a final return value for the method.

The callback function passed to the reduce method accepts four arguments. The first argument serves to accumulate the values while iterating through the array. The second, third, and fourth arguments are the current element's value, its index, and the array itself. An optional second argument to the reduce method is an initial value to provide as the first argument (the accumulator) to the callback function on the first iteration through the array.

Simple Examples Demonstrating the reduce Method

The following example uses the reduce method to return the sum of the array element values. Current values of arguments are displayed for each iteration:

let ar = [2, 4, 6, 8];

// arguments to callback function: 
// accumulator (acc), current element's value (v) and index (i)
let sum = ar.reduce( function(acc, v, i) { 
    console.log( `acc: ${acc}, v: ${v}, i: ${i}, sum: ${acc + v}` );
    return acc + v;
} );

/* console.log output for each iteration:
acc: 2, v: 4, i: 1, sum: 6 
acc: 6, v: 6, i: 2, sum: 12 
acc: 12, v: 8, i: 3, sum: 20 
*/

// display return value of reduce method
console.log(sum); // 20

The example above[1] does not include an initial value (i.e., the optional second argument to the reduce method). So the first argument to the callback function on the first iteration is the first element in the array. On subsequent iterations, the first argument to the callback function is the return value of the previous iteration.

Example Demonstrating the Initial Value Argument

The following example includes the optional second argument to the reduce method, passing 1 as the initial value:

let ar2 = [3, 5, 7, 9];

// arguments to callback function: 
// accumulator (acc), current element's value (v) and index (i)
let sum2 = ar2.reduce( function(acc, v, i) { 
    console.log( `acc: ${acc}, v: ${v}, i: ${i}, sum: ${acc + v}` );
    return acc + v;
}, 1 ); // pass 1 as initial value

/* console.log output for each iteration:
acc: 1, v: 3, i: 0, sum: 4 
acc: 4, v: 5, i: 1, sum: 9 
acc: 9, v: 7, i: 2, sum: 16 
acc: 16, v: 9, i: 3, sum: 25
*/

// display return value of reduce method
console.log(sum2); // 25

When you pass an initial value as a second argument to the reduce method, that value becomes the first argument to the callback function on the first iteration. After the first iteration, the first argument to the callback function is the return value of the previous iteration.

Notice that this example requires one more iteration than the previous. When no initial value is passed to the reduce method, iteration essentially begins with the second element of the array.

reduce an Array of Objects to a String

The following example uses the reduce method to build a string consisting of the properties and values of an array of objects:

let arObj = [
    { 'name': 'Jon', 'age': 24 },
    { 'name': 'Mark', 'age': 32 },
    { 'name': 'Kacy', 'age': 22 }
];

let str = arObj.reduce( function (a, b) {
   return a + b.name + ' is ' + b.age + '. ';
}, '' ); // pass empty string as initial value

console.log(str); // Jon is 24. Mark is 32. Kacy is 22.

An empty string is passed as the initial value for the callback function to enable access to the properties and values of the first array element.

Back to top


  1. The example uses JavaScript's relatively new template literal syntax to generate the output to console.log which would otherwise be long and difficult to read. MDN provides documentation on the subject for those who are unfamiliar. ^