Simply put, the reduce iterator is used to reduce an array to a single value.The final result is always a single value.
One amazing thing about the reduce iterator is that the reduced value is not limited to a particular data type. It can be a string, a boolean, an array, a number and more. Unlike the other JavaScript iterators, the reduce iterator takes in four parameters.
The second, third and fourth parameters of the callback function in the reduce iterator are: value, array and index just like the other iterators. However, the first parameter is different. It can be called start, previous or accumulator. It is the value that was returned by the callback in the previousiteration.
Let us see an example:
const numbers = [2, 4, 6, 8, 10];
let addedValues = 0;
for(let num of numbers)
addedValues += num;
console.log(addedValues);
In a reduce iterator, the accumulator is the addedValues as it takes an initialized value.
To express this using the reduce iterator, Here it is:
numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
});
Here, this reduce method will get this result and store it in the accumulator.
Next, we need to initialize the accumulator to zero. As the second argument to the reduce.
numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
The first argument is the callback function return accumulator + currentValue;
while the second argument is the initial value of the accumulator.recently added ( 0 ).
Next, we get the result as a single value.
const addedValues =numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
console.log(addedValues);
Your result will be 30. Recall that
const numbers = [2, 4, 6, 8, 10] and addedValues was initially 0;
Let's explain this further: How we arrived at 30.
Here, accumulator = 0;
currentValue = the first value. In this case, the first value is 2
so currentValue = 2;
In the first round,
accumulator = 0;
currentValue = 2;
add them together (2 + 0). This becomes the new initial value(accumulator).
currentValue = 1 => accumulator = 2;
Second round:
accumulator = 2, currentValue = 4 =>
accumulator = 6 (this 2 + 4);
Third round:
accumulator = 6, currentValue = 6 =>
accumulator = 12 (this is 6 + 6);
Fourth round:
accumulator = 12, currentValue = 8 => accumulator = 20 (this is 12 + 8);
Fifth round:
accumulator = 20, currentValue = 10 => accumulator = 30 (this is 20 + 10);
console.log(addedValues);
You can however shorten this process by taking the first value in the array as the accumulator, the second value as the currentValue and proceed from there. You will have 4 rounds instead of 5 rounds with same result.
Also, you can express it like this:
const addedValues =numbers.reduce((accumulator, currentValue) =>return accumulator +currentValue );
Instead of this:
const addedValues =numbers.reduce((accumulator, currentValue) => {
return accumulator + currentValue;
}, 0);
This makes it shorter and more readable.
Using the iterator method is better and newer than the looping method.
check my previous articles on forEach, map and filter which are also JavaScript Iterators.
https://dev.to/michellebuchiokonicha/map-a-javascript-iterator-1oem
https://dev.to/michellebuchiokonicha/filter-a-javascript-iterator-15i6
https://dev.to/michellebuchiokonicha/javascript-higher-order-function-3jeh
My Twitter Handle: https://twitter.com/mchelleOkonicha
My LinkedIn Handle: https://www.linkedin.com/in/buchi-michelle-okonicha-0a3b2b194/