JavaScript .reduce() Array Method for Beginners

Luca — Mon, 22 Mar 2021 21:09:43 +0000

Suppose I gave you an array of numbers, and asked you to find the total of the numbers, what would you do?

You might write something like this:

const nums = [2, 5, 3];

let sum = 0;

for (const num of nums) {
  sum += num;
}

console.log(sum); // <- 10!

This is perfectly valid code: you declared a sum variable, you looped through the array, and mutated (a fancy word for changed) the sum to be the value in sum plus the current number in the array. Great.

But you can do better.

Now, try doing it your own self, with your own brain, then tell me the answer.

Okay. Here you go.

2 + 5 + 3 = ?

First, you read the leftmost number, which is 2.
Then, you look to the next number to its right, and you see 5. You work out their sum, and your brain remembers that value (7).
You read on and see 3, again you work out the sum of this and the value that you remember in your brain (7). Your brain now remembers 10.
Finally, you enthusiastically shout out the answer 10!

Well done.

You have looped through the numbers, and performed addition with the value you remember in your brain.

You have done a loop with a memory...

... just like what the reduce method would do.

How?

Here is what you have done written in code:

const nums = [2, 5, 7];

let sum = nums.reduce((accumulator, currentValue) => {
            return accumulator + currentValue;
        }, 0);

console.log(sum); // <- 10 again!

Let's break that down.

The reduce method first takes a mandatory callback function, which is the reducer function.

let sum = nums.reduce(

    (accumulator, currentValue) => {
        return accumulator + currentValue;
    },
    // Our REDUCER function 👆   

    0);

A reducer function takes two arguments, the first being the accumulator, which remembers the last value returned from the function itself. This is analogous to your brain that remembers the last value returned from the operation you've done.

The second argument is the current value in the loop, like each one of the numbers you were looking at.

The function can perform some logic, and whatever it returns, is then remembered in the accumulator.

let sum = nums.reduce(

    // 👇 brain     // 👇 number it's looking at
    (accumulator, currentValue) => {
        return accumulator + currentValue;
        // 👆 The value returned is next stored in the brain
    },
    0
    );

The second argument, which is optional, is the initial value its accumulator should remember.

let sum = nums.reduce(
    (accumulator, currentValue) => {
        return accumulator + currentValue;
    },  
    0 // 👈 The initial value we remember
    );

The reduce method, loops through each number, performs the reducer function on each value, and returns the last thing that the accumulator remembers, in which we can assign to a variable.

It reduced an array of numbers, into one number.

[2, 5, 3] -reduced-into-> 10

Again, here are the steps through each loop:

loop n.	accumulator	currentValue	operation
1	0	2	0+2 = 2
2	2	5	2+5 = 7
3	7	3	7+3 = 10

Finally, there are no more values to loop through, so the value in the brain (now 10) is outputted and stored in the sum variable.

Now this is the most succinct version of our solution, achieved with an implicit return and using shorthands for the parameters:

const nums = [2, 5, 7];

let sum = nums.reduce((acc, cur) => acc + cur, 0);

console.log(sum);

Well done, you have now mastered the very basics of the reduce array method.

Be proud of yourself.

To explore further, try reducing an array into different data types (such as a strings, arrays, or objects).

Resources:

Forem: Luca

JavaScript .reduce() Array Method for Beginners

Okay. Here you go.

Here is what you have done written in code: