JavaScript reduce() method explained
Tags: javascript, functional
Published: 2019-11-29 11:18:00

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) 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:
```javascript
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:
```javascript
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:
```javascript
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.