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 is one of the iteration methods introduced in ECMAScript 5. 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, current index, and the array itself. A second (optional) argument to the reduce method is an initial value to provide as the first argument to the callback function.

Simple Examples Demonstrating the reduce Method

Most callback functions for the reduce method use only the first two arguments. We include all four in two basic examples to demonstrate the inner workings of the callback function as it iterates through the elements of the array.

The following examples use the reduce method to return the sum of the array element values. They display current values of arguments for each iteration:

var ar = [1, 2, 3, 4, 5];

var sum = ar.reduce( function (x, y, i, ar) {
    console.log('x: ' + x + ', y: ' + y + ', i: ' + i + ', sum: ' + (x + y) );
    return x + y;
} );
/* console.log output for each iteration:
x: 1, y: 2, i: 1, sum: 3
x: 3, y: 3, i: 2, sum: 6
x: 6, y: 4, i: 3, sum: 10
x: 10, y: 5, i: 4, sum: 15
*/

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

The example above 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 passes 0 as the initial value:

var ar = [1, 2, 3, 4, 5];

var sum = ar.reduce( function (x, y, i, ar) {
    console.log('x: ' + x + ', y: ' + y + ', i: ' + i + ', sum: ' + (x + y) );
    return x + y;
}, 0 ); // pass 0 initial value
/*
x: 0, y: 1, i: 0, sum: 1
x: 1, y: 2, i: 1, sum: 3
x: 3, y: 3, i: 2, sum: 6
x: 6, y: 4, i: 3, sum: 10
x: 10, y: 5, i: 4, sum: 15
*/

console.log(sum); // 15

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. The initial value is treated like an element added at the front of the array.

Using reduce Method to Flatten Array of Arrays

The array for our next example consists of elements that are themselves arrays. We use the reduce method to convert it to a single-level array:

var ar = [ [1, 2, 3], ['one', 'two', 'three'], ['a', 'b', 'c'] ];

var ar2 = ar.reduce( function (a, b) {
    return a.concat(b);
}, [] ); // pass empty array as initial value

console.log( ar2 );
// [ 1, 2, 3, "one", "two", "three", "a", "b", "c" ]

As you can see, the callback function uses the concat method to combine each sub-array with the previous.

Using reduce Method to Convert Array of Arrays to String

The following example uses the reduce method to convert an array of arrays to a string:

var ar = [ [1, 2, 3], ['one', 'two', 'three'], ['a', 'b', 'c'] ];

var str = ar.reduce( function (a, b) {
    return a + b.join(', ') + ', ';
}, '' ); // pass empty string as initial value

str = str.slice(0, -2); // use slice to remove trailing comma and space
console.log( str ); // 1, 2, 3, one, two, three, a, b, c

The join method is applied to each sub-array in turn, collecting all their values in a single string to be returned by the reduce method.

Using reduce Method to Convert an Array of Objects to String

The following example uses the reduce method to convert an array of objects to a string:

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

var 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 an initial value for the callback function. It is used as a starting point to concatenate name value pairs in each iteration for the string ultimately returned by the reduce method.

Back to top