Array.prototype.reduce() made Simple
A quick field guide on .reduce(), with demos and use cases
To Reduce or not to Reduce ... ๐ค
Reduce is an accumulator. We can think of this higher order function as a snowball, which "reduces" all the elements of an array down to a single value.
It takes two arguments, the first being a function itself and the second being the point in which you'd like the numerical value that you'd like the accumulation to begin.
Let's take a look at the function that reduce takes in by reviewing the following code:
const sampleArray = [1, 1, 1, 1, 1];
const consoleLogMe = sampleArray.reduce(function(acc, curr, i, arr) {
console.log('This is the current accumulated value:', acc);
return acc + curr;
});
console.log(consoleLogMe);
acc in .reduce(function(acc, curr, i, arr));
acc
is the hypothetical "snowball" value. By running the above code in the console, we'll see that acc
is the result of all the added values in sampleArray.
acc
's value is either the very first value of the array or, if there's a second argument present (meaning .reduce(function(){}, thisValue
), then acc
will be that starting value. Run the following code in your console to see an example of this:
const sampleArray = [1, 1, 1, 1, 1];
const consoleLogMe = sampleArray.reduce(function(acc, curr, i, arr) {
console.log('This is the current accumulated value:', acc);
return acc + curr;
}, 50);
console.log(consoleLogMe);
Notice how we log 50 instead of 1.
curr in .reduce(function(acc, curr, i, arr));
curr
represents the element itself. Go ahead and run the following code in the console:
const sampleArray = [10, 8, 6, 4, 2];
const consoleLogMe = sampleArray.reduce(function(acc, curr, i, arr) {
console.log('This is the current value:', curr);
return acc + curr;
});
console.log(consoleLogMe);
Notice how we sequentially log each element in the sampleArray.
i and arr in .reduce(function(acc, curr, i, arr));
Similarly to higher order functions like .map()
or .forEach()
, .reduce()
also gives us access to values such as the index of the element we're iterating over, or the array itself, for each iteration of .reduce()
.
Doing more than addition
We can also use .reduce
for other operations. Let's find the largest value in an array.
const arr = [1, 1, 2, 1, 1, 1];
Reduce is special in that acc
gives us our previous iteration's value. Review the following, where we'd like to return the largest value of the array:
let arr = [1,1,2,1,1];
const consoleLogMe = arr.reduce(function(acc, curr, i, arr) {
if (curr > acc) {
acc = curr
};
return acc;
});
console.log(consoleLogMe);
The above logs 2
. In the above example, instead of adding, we're comparing the previous element of the array with the current value of the array.
Conclusion
Reduce is nifty in that it helps boil down arrays into a single value. Some examples of .reduce()
's utility include:
- summing an array.
- finding the min or max.
- identifying what objects have the "least" or "most" of a given property.
I'm most likely missing a few, and I hope this clears
.reduce()
's functionality up a bit.
Cheers!