Array.prototype.reduce() made Simple

Array.prototype.reduce() made Simple

A quick field guide on .reduce(), with demos and use cases

ยท

3 min read

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!

ย