JavaScript 101: Reduce

Disclaimer: This material was taught in The Modern Javascript Bootcamp Course by Colt Steele and Stephen Grider, which I highly recommend.

When I was a Bootcamp student rushing to learn JavaScript and DOM Manipulation, I struggled with understanding the concept of the .reduce() method — specifically, with respect to the optional inputs that are available. In general, the .reduce() method takes in a callback function, which it executes on each element in an array — resulting in a single output value. This article is going to go over using .reduce() to sum all the elements in an array, find the max number in an array, and use an object to count all the votes in an election. But first, let’s go over the basic syntax of the .reduce() method in JavaScript:

From MDN website’s Array.prototype.reduce()

The syntax is described in detail on the website itself, but let’s summarize what is going on here:

arr: An array on which you are invoking the .reduce() method.

callback: The reducer function to execute on each element in the array. The callback will skip execution on the first element if there is no initialValue (the first element will be the first accumulator). If you are summing an array of numbers, the callback function would be total sum plus current number.

accumulator: The accumulated value that is also the return value from the previous invocation of the callback. If you are summing an array of numbers, the accumulator is the total sum thus far. If no initialValue is provided, the accumulator starts as the first element in the array.

currentValue: the current element from the array with which the callback function is executing. If you are summing an array of numbers, the currentValue is the number that you are adding to the total sum.

index[array]: An optional value. The index of the current element from the array with which the callback function is executing. If you are summing an array of numbers and are on the third number that you are adding to the sum, the index would be 2 (the first number’s index is 0, the second number’s index is 1, the third number’s index is 2).

initialValue: An optional value. The value used one time as the first accumulator on the first invocation of the callback. If you are summing an array of numbers plus 100, the initialValue is 100. The callback would start its processing of summing numbers by adding 100 plus the first element in its array.

In summary, if an initialValue is supplied, it is the accumulator on the first invocation of the callback, while the first element in the array is the currentValue. If no initialValue is given, then on the first invocation of the callback, the first element of the array is the accumulator and the second element of the array is the currentValue.

In our first example, sum, we are going to use .reduce() to sum all of the numbers in an array, [1, 2, 3, 4] without providing an initialValue. In our second example, sumPlusTen, we are going to use .reduce() to sum 10 plus all of the numbers in the same array (using 10 as the initialValue).

Use .reduce() to sum all the elements in an array.

Note that the only difference between sum and sumPlusTen is the latter’s inclusion of an initialValue, 10, which is placed as a second argument in the reduce function after the callback function (the callback function is the first argument in the reduce function).

For full clarity, the callback function in the example above is:

function(accumulator, currentValue){ return accumulator + currentValue; }

Okay, so that is how you implement .reduce() in JavaScript to find the total sum of an array of numbers. There are, nonetheless, other ways you can use .reduce(). In general, .reduce() returns a single value, which is not limited to using mathematical operations (addition, subtraction, multiplication, etc.). You can also use .reduce() to find the maximum value in an array of numbers:

Use .reduce() to find the maximum value in an array of numbers.

maxValue is iterating through the array, with the first element, 100, being the first accumulator, maxThusFar, and the second element, 5, being the first currentValue, currentVal. If the current element, currentVal, is greater than the maxThusFar, the current element is the new maxThusFar. Otherwise, maxThusFar remains the same value. Note, that there are other ways we could have written the if/else statement inside the callback function:

Alternate solutions to finding the maximum value in an array of numbers.

We’ve implemented .reduce() to return a single number, whether it’s the sum or maximum value from an array of integers. However, let’s say we want to return the results from an election? How do we use .reduce() to do that? Remember that .reduce() returns a single value. If you make an Object, {}, you can enter your results into the object with key/value pairs — the options (i.e. “yes”, “no”, “abstain”) being keys and the number of votes for those options being the value. As long as we make the initialValue an Object, {}, we can use .reduce() to tally the votes from an election:

Use .reduce() to count the number of votes in an array of results from an election.

This code may be confusing, so let’s run through its first two iterations using the votes array in the example above.

Iteration 1: To make this work, we had to enter an initialValue of an empty object, {}. On the first iteration of the callback function, the accumulator, tally, thus starts as {} while the currentValue, currentVote, would be the first element in the array, “yes”. In this first iteration of the callback function, we are looking for tally[“yes”]. Since the initial tally is {}, tally[“yes”] does not exist. So we would jump to the else statement, and create tally[“yes”]: 1. At the end of the callback function, we would return the tally Object, which is {tally[“yes”]: 1}.

Iteration 2: Our accumulator, tally, is the returned result from Iteration 1: {tally[“yes”]: 1}. The currentValue, currentVote, is the second element in the array, which is also “yes”. In this second iteration of the callback function, we are looking for tally[“yes”]. Since the initial tally is {tally[“yes”]: 1}, tally[“yes”] exists. So we would stay in the if statement and add 1 to make tally[“yes”]: 2. At the end of the callback function, we would return the tally Object, which is {tally[“yes”]: 2}.

As you iterate through the array, you would create tally[“no”]: 1 and tally[“abstain”]: 1 key/value pairs in the tally Object the first time you come across an element of “no” and “abstain”, respectively. And as you find more “yes”, “no”, and “abstain” votes, you simply add one to the current value that its key points to.

.reduce() was very confusing when I first encountered it. I hope this was helpful in guiding you with .reduce()’s syntax, as well as implementing it to sum an array of numbers, find the maximum value in an array of numbers, and tally the votes from an election.