Hey everyone! It’s time for another exciting edition of Boring JavaScript! This time, we are covering the Array.reduce() method.

It’s Not A Way to Lose Weight

Put simply, the reduce() method will iterate through each element of the array, perform the function you pass to it, and produce a single value as the result of the reduce() method. Sounds simple enough. In reality, it can be a little challenging to understand the internal workings of the reduce() method. At least it was for me.

The easiest way to describe the method is by examples, so let’s get right into it.

Counting the votes

I did the video that accompanies this blog post during election time here in the United States, so of course my example will count all the votes. In this case, I have an array of vote totals and I would like to sum them all up. Let’s look at the code:

const votes = [34, 19, 12, 99, 45, 33, 19];
const sum = (accumulator, currentValue) => accumulator + currentValue;
const finalNumber = votes.reduce(sum);

console.log(`\nThe finalNumber is ${finalNumber}.`);

Let’s look at lines 2 and 3.

const sum = (accumulator, currentValue) => accumulator + currentValue;
const finalNumber = votes.reduce(sum);

Line 3 is the reduce() method. It takes two arguments:

1. The function to perform on each element in the array. It is passed two arguments – the accumulator and the current value of the element being processed. We’ll talk about the accumulator next – it’s very important
2. The starting value of the accumulator. This is optional, and is not used in our example above.

When the function finishes, the value that is returned is placed back into the accumulator. When all elements of the array have been processed, the value of the accumulator is returned as the final value of the reduce() method.

Here is where the magic happens.

Accumulating Everything

Notice again that the reduce() method function (the first argument) is passed two arguments – the accumulator and the current element being processed. The accumulator is important to how the reduce() method works.

Internally, JavaScript will hold on to the accumulator value as each element of the array is processed. The accumulator’s beginning value is either:

1. The first element of the array – if no initial value is set (the second argument to the reduce() method).
2. An initial value (again, the second argument to the reduce() method).

Each time reduce() executes the passed function (the first argument), it will replace the value of the accumulator with the returned value of the function. This is important! The accumulator’s value is then remembered for the next element and is passed as an argument to the reduce() function.

Let’s go through it one step at a time. Here is our original array and the reduce() function:

const votes = [34, 19, 12, 99, 45, 33, 19];
const sum = (accumulator, currentValue) => accumulator + currentValue;

And here is what happens with each iteration:

Internally, the accumulator starts with 34 (since there was no initial value passed in the reduce() method declaration). Each time JavaScript processed an element of the array, the accumulator was added to the currentValue, and the result of that function was then saved to accumulator for the next element to process. When JavaScript finished with the last element, the value returned from the function (which would have gone to accumulator if there were more elements) is returned to the calling function as the final result of the operation.

As you can see, the important concept is that JavaScript retains the value of the accumulator for each element, and passes that to your function, along with the current element’s value. That’s the secret to the reduce() method.

It’s Not For Numbers Only

The above is a simple explanation on how to use the reduce method. But you aren’t limited to numbers. Since you control the initial value of the accumulator and you control how it get’s updated, you can pass any valid JavaScript object.

In fact, in the video below I show you how to use the reduce() method to simulate multiple extends within JavaScript. What is that? How would you like to do something like this?

class Cat extends BaseAnimal, Body, Legs, Head, Tail {
    // rest of class here
}

Of course, you can’t do that in JavaScript – but reduce() can simulate that for you. Make sure to check it out below.

The Video

And speaking of checking it out, here is our video on the reduce() method:

Categories: Boring JavaScript Javascript

Tagged as: #array.reduce #javascript #reduce array.reduce Javascript reduce

thevirtuoid

Web Tinkerer. No, not like Tinkerbell.

Creator of the game Virtuoid. Boring JavaScript. Visit us at thevirtuoid.com