JavaScript Array reduce() method is used to execute a reducer function on each element of the array and returns a single output value. This method does not change the original array.
Syntax
array.reduce(function(accumulator, currentValue, currentIndex, arr), initialValue)
# or
array.reduce(callback[, initialValue]);
Parameters
- function(required): Each array element is a required parameter. It contains four parameters which are listed below:
- accumulator(required): It is the required parameter used to specify an initialValue or the previously returned value of a function.
- currentValue(required): It determines a current element’s value.
- currentIndex(optional): It is used to specify an array index of the current element.
- arr(optional): It determines an array object to which the current element belongs.
- initialValue(optional): It specifies the value to be passed to the function as an initial value.
Return Value
Each time a function is called, its return value becomes the first argument for the next time it’s called.
Visual Representation
Example 1: How to Use Array reduce() method
If you don’t pass the initial value, the reducer will assume the first item in your array as your initial value.
data = [2, 4, 6, 8, 10]
const reducer = (accumulator, currentValue, currentIndex, array) => accumulator + currentValue
result = data.reduce(reducer)
console.log(result)
Table
Let’s see a descriptive table showing what happens on each iteration.
callback iteration | accumulator | currentValue | currentIndex | array | return value |
---|---|---|---|---|---|
first call | 2 | 4 | 1 | [2, 4, 6, 8, 10] | 6 |
second call | 6 | 6 | 2 | [2, 4, 6, 8, 10] | 12 |
third call | 12 | 8 | 3 | [2, 4, 6, 8, 10] | 20 |
fourth call | 20 | 10 | 4 | [2, 4, 6, 8, 10] | 30 |
The value returned by the function would be that of the last callback invocation 30.
Output
30
Example 2: Passing an initial value
If we pass the initial value as an argument, it will position itself as the first value and then reduce it.
Table
callback iteration | accumulator | currentValue | currentIndex | array | return value |
---|---|---|---|---|---|
first call | 5 | 2 | 0 | [2, 4, 6, 8, 10] | 7 |
second call | 7 | 4 | 1 | [2, 4, 6, 8, 10] | 11 |
third call | 11 | 6 | 2 | [2, 4, 6, 8, 10] | 17 |
fourth call | 17 | 8 | 3 | [2, 4, 6, 8, 10] | 25 |
fifth call | 25 | 10 | 4 | [2, 4, 6, 8, 10] | 35 |
data = [2, 4, 6, 8, 10]
const reducer = (accumulator, currentValue, currentIndex, array) => accumulator + currentValue
result = data.reduce(reducer,5)
console.log(result)
Output
35
Example 3: Flattening arrays
const data = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const flatValues = data.reduce((total, value) => {
return total.concat(value);
}, []);
console.log(flatValues);
Output
[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
Example 4: Finding repeated elements in an array
const pounds = [11, 21, 16, 19, 46, 29, 46, 19, 21];
const count = pounds.reduce( (data, pound) => {
data[pound] = (data[pound] || 0) + 1 ;
return data;
} , {})
console.log(count);
Output
{ '11': 1, '16': 1, '19': 2, '21': 2, '29': 1, '46': 2 }
Example 5: Grouping objects by a property
We can group objects by their property using this method.
let student = [
{ name: 'Rick', enrollment: 60 },
{ name: 'Beth', enrollment: 40 },
{ name: 'Jerry', enrollment: 40 }
];
function groupBy(objectArray, property) {
return objectArray.reduce(function (accumulator, obj) {
let key = obj[property]
if (!accumulator[key]) {
accumulator[key] = []
}
accumulator[key].push(obj)
return accumulator
}, {})
}
let groupedStudent = groupBy(student, 'enrollment')
console.log(groupedStudent)
Output
{
'40': [
{ name: 'Beth', enrollment: 40 },
{ name: 'Jerry', enrollment: 40 }
],
'60': [ { name: 'Rick', enrollment: 60 } ]
}
Example 6: Using sparse array
data = [2, 4, , 8, 10]
const reducer = (accumulator, currentValue, currentIndex, array) => accumulator + currentValue
result = data.reduce(reducer)
console.log(result)
Output
24
Adding up the numbers and undefined in the array.
data = [2, 4, undefined , 8, 10]
const reducer = (accumulator, currentValue, currentIndex, array) => accumulator + currentValue
result = data.reduce(reducer)
console.log(result)
Output
NaN
Browser compatibility
- Google Chrome 3 and above
- Microsoft Edge 12 and above
- Mozilla Firefox 3.0 and above
- Safari 4 and above
- Opera 10.5 and above