This article is the tenth of the Array Method Series. In this article, I will explain what the reduce
Array method is.
What is the Reduce Method?
The reduce
method of arrays is a higher-order function that basically reduces the values in an array to a single value. This single value could be a number, a string, an object, or even an array.
This method goes through an iterative-loop process such that the returned value in a loop is applied to the next loop until the end of the array, and the final value is returned.
This method does not modify the array.
Syntax of the Reduce Method
array.reduce(function(previousValue, currentValue, currentIndex, array){
// do something with previousValue and currentValue
// return a value
}, initialValue)
The reduce
method receives two arguments: a callback function and an optional initialValue
.
The callbackFunction passed is applied to each item in the array. The arguments passed to the callback function in each loop are the previousValue
from the previous loop, the currentValue
in the current loop, the index
of the current value, and the original array
.
How the previous value works
If you pass an initialValue
argument, the previousValue
in the first loop will be the initialValue
, and the currentValue
will be the first item in the array. In the second loop, the previousValue
will be the returned value from the callback function in the first loop, and the currentValue
will be the SECOND item in the array. And it goes like that, till the end.
Suppose the initialValue
argument is not provided. In that case, the previousValue
in the first loop will be the first item in the array, and the currentValue
will be the second item in the array. In the second loop, the previousValue
will be the returned value from the callback function in the first loop, and the currentValue
will be the THIRD item in the array.
For an array of 5 elements, passing an initialValue
argument makes it five loops (each loop for each item), but not giving an initialValue
argument makes it four loops (first loop for the first two items, second loop for the third item, and so on)
Without the Reduce Method
The reduce
method is an abstracted function that does an iterative-loop process to reduce an array. Here's an example, imitating the reduce
method.
First, with an initial value:
const array = [1, 2, 3, 4, 5]
let initialValue = 5
let finalValue = initialValue
for (let i = 0; i < array.length; i++) {
const previousValue = finalValue
const currentValue = array[i]
finalValue = previousValue + currentValue
}
console.log(finalValue)
// 20
And without an initial value:
const array = [1, 2, 3, 4, 5]
let finalValue = array[0]
for (let i = 1; i < array.length; i++) {
const previousValue = finalValue
const currentValue = array[i]
finalValue = previousValue + currentValue
}
console.log(finalValue)
// 15
The loop starts from the 1
index because the 0
indexed value has already been used as the initial value.
This loop approach is similar to what the reduce
method does in the background. It loops through each item in an iterative manner by feeding the following item with the value from the previous loop. The next item can use the previous value to do anything--add, multiply, concatenate to form an array, e.t.c
With the Reduce Method
Here's how you achieve the previous result with reduce
:
const array = [1, 2, 3, 4, 5]
const finalValue = array.reduce(function(previousValue, currentValue) {
return previousValue + currentValue
})
console.log(finalValue)
I did not pass an initialValue
, so it only does four loops with the first item as the starting value.
Using the reduce
method makes things easier to read.
You want to use this method to reduce an array of values to a single value. Remember that this single value can still be an array, or it could be an object.
Here's an array single value example:
const array = [1, 2, 3, 4, 5]
const finalValue = array.reduce(function(previousValue, currentValue) {
return [currentValue * 2].concat(previousValue)
})
console.log(finalValue)
// [ 10, 8, 6, 4, 1 ]
For the return value, I returned an array with the current value multiplied by 2, then concatenated it with the previous value, and you can see the single array result.
Top comments (0)