# 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:

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*).

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:

**maxValue** is iterating through the array, with the first element, 100, being the first *accumulato*r, **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:

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:

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.