JavaScript reduce() method explained

Amin Foroutan — Fri, 29 Nov 2019 11:18:00 +0000

So I came across the array.reduce() method and I struggled with it a little at first!after a little playing around with the method I realized how handy it can be. let's dive into it.
At the first let's take a look at what MDN web documents have to say about reduce():

The reduce() method executes a reducer function (that you provide) on >each element of the array, resulting in a single output value.

as the explanation indicates the functions goal is to reduce out our array to a single output value and that’s why it’s called a reducer function.

The reduce() method takes two arguments:
-reducer function
-initial value which the accumulator starts with

reducer function

the reducer function itself get's three arguments:
-the accumulator
-current
-index

The most important player in our function is the accumulator!as it ultimately achieves our goal of reducing the array to a single output.

The accumulator() remembers the returned value of our reducer function(the first argument of the method) for each iteration of our array and finally it's our single output that we wanted to reduce our array to.
now let's play around with our method to grasp the concept a little better:

const arr = [2,5,8,10];
arr.reduce((acc,cur)=>{
   console.log('current',cur);
   console.log('accumulator',acc);
   return cur;
});

I've definded an array with some numbers in it and I have made the reducer function to console out our accumulator and current value, let's take a look at our log:

current 5
accumulator 2
current 8
accumulator 5
current 10

As you can see at first our accumulator is the first number of our array which is two and our current value is the second element of the array which is 5.
now let's also set the initial value of accumulator to 3:

const arr = [2,5,8,10];
arr.reduce((acc,cur)=>{
   console.log('current',cur);
   console.log('accumulator',acc);
   return cur;
},3);

and now let's take a look at the log:

current 2
accumulator 3
current 5
accumulator 2
current 8
accumulator 5
current 10
accumulator 8

As you can see unlike our previous case the accumulator in the first iteration is set to 3 and our current value in the first iteration is set to the first element of the array which is 2.

So if we set the initial value of our accumulator the current value in >the first iteration is gonna be the first element of the array but if do >not set the initial value of accumulator the in the first iteration the >accumulator is gonna be the first element of our array and the current >value is gonna start with the second element of the array.

let's finish with a practical example.let's say we have an array of prices of the items in the cart and we want to calculate the total price:

const cart = [20,13,24,10];
const total = cart.reduce((acc,cur)=>{ return acc + cur;});

as you can see our reduce method returned the accumulated value and I've set it to the total variable.it's much more shorter and much more readable than the traditional for loop .naturally if you wanted to set the initial value of the accumulator you have to set it to 0.

DEV Community: Amin Foroutan

JavaScript reduce() method explained

reducer function