Array .reduce() Since: ES5(ECMAScript 2009)
A method that processes all elements of an array in order and combines them into a single value. It is useful for a wide range of tasks, such as calculating a sum or converting an array into an object.
Syntax
// Processes elements from left to right.
var result = array.reduce(function(accumulator, currentElement, index, array) {
return nextAccumulator;
}, initialValue);
// Processes elements from right to left.
var result = array.reduceRight(function(accumulator, currentElement, index, array) {
return nextAccumulator;
}, initialValue);
Methods
| Method | Description |
|---|---|
| reduce(function, initialValue) | Processes elements in order from the beginning to the end of the array, combining them into a single value. |
| reduceRight(function, initialValue) | Processes elements in order from the end to the beginning of the array, combining them into a single value. |
Sample Code
var numbers = [1, 2, 3, 4, 5];
// Calculate the sum.
var sum = numbers.reduce(function(total, num) {
return total + num;
}, 0);
console.log(sum); // Outputs: 15
// Find the maximum value.
var max = numbers.reduce(function(biggest, num) {
return num > biggest ? num : biggest;
}, numbers[0]);
console.log(max); // Outputs: 5
// Convert an array into an object.
var fruits = ["apple", "orange", "grape"];
var obj = fruits.reduce(function(acc, fruit, index) {
acc[index] = fruit;
return acc;
}, {});
console.log(obj); // Outputs: {0: "apple", 1: "orange", 2: "grape"}
// Use reduceRight to concatenate strings from right to left.
var words = ["JavaScript", " ", "Learn"];
var reversed = words.reduceRight(function(str, word) {
return str + word;
}, "");
console.log(reversed); // Outputs: "Learn JavaScript"
Overview
With array.reduce(), the first argument of the callback function receives the result of the previous iteration (the accumulator), and the second argument receives the current element. The return value of the function becomes the accumulator for the next iteration, and the return value of the final iteration becomes the overall result of array.reduce().
The initial value (the second argument) is optional, but if omitted, the first element of the array is used as the initial value and the loop starts from the second element. Calling it on an empty array without an initial value will throw an error, so it is recommended to always specify an initial value.
array.reduceRight() works the same way as array.reduce(), except that it processes elements in the opposite direction. Use it when you need to process elements from the end of the array, such as for string concatenation or flattening nested data. For simple sum or average calculations, array.reduce() is the best fit, but if your goal is to transform or filter an array, array.map() or array.filter() will make the intent of your code clearer.
Browser Compatibility
2 or earlier ×
2 or earlier ×
3.1 or earlier ×
8 or earlier ×
10 or earlier ×
Android Browser
37+ ○
4 or earlier ×
Chrome Android
36+ ○
17 or earlier ×
Firefox Android
79+ ○
3 or earlier ×If you find any errors or copyright issues, please contact us.