Introduction
The reduce()
array method in JavaScript is a powerful tool for iterating through array elements and performing operations on them. It simplifies the code and produces efficient, optimized results.
You can use it to convert an array into a single value, known as the "accumulator". The reduce()
array method iterates through the elements of the array and runs a give "reducer" function on each element of the array. During each iteration, the reducer function updates the accumulator, which is returned at the end of the method.
In addition to the reducer function, you can also pass an initial value to the accumulator. This allows you to tailor the output according to your specific use case.
Using reduce()
The reduce()
method accepts two arguments:
- a reducer function
- an initial value (optional)
const arr = [1, 2, 3]
arr.reduce((acc, item) => {
// do something with the accumulator
// ...
return acc
}, initialValue)
The reducer function receives two arguments:
- current value of the accumulator
- the current array item
And it returns the updated value of the accumulator. For the first iteration, the value of acc
will be the same as initialValue
.
const arr = [1, 2, 3]
const value = arr.reduce((acc, item) => {
return acc
}, 0)
console.log(value) // 0
If the initial value is not provided in the reduce()
method, then the first element of the array is used as the initial value of the accumulator and the iteration starts from the second element of the array.
const arr = [1, 2, 3]
const value = arr.reduce((acc, item) => {
return acc
})
console.log(value) // 1
Examples
Let us see some examples of reduce()
:
1. Sum of elements of an array
const arr = [1, 2, 3, 4, 5]
const arrSum = arr.reduce((acc, item) => acc + item, 0)
console.log(arrSum) // 15
2. Product of elements of an array
const arr = [1, 2, 3, 4, 5]
const arrProd = arr.reduce((acc, item) => acc * item, 1)
console.log(arrProd) // 120
3. Joining the elements of an array separated by comma
const arr = ['a', 'b', 'c', 'd']
const list = arr.reduce((acc, item) => `${acc}${item},`, '')
console.log(list) // a,b,c,d,