### (UNDONE) Array methods – reduce [ES6]

reduce() function can be used for iterable elements. This function is getting two parameters:

1. Callback

2. Initial value

`array.reduce(callback, initialValue)`

```
const array = [10, 20, 30, 40];
const reduced = array.reduce((accumulator, currentElement, idx) => {
return accumulator + currentElement;
});
console.log(reduced);
```

This function will return:

`100`

## First parameter of reduce() – Callback analysis (Current element, Accumulator, Index, Array)

To understand reduce function lets analyse it better. Lets check what parameters callback gets and how those parameters behave during reduce function execution.

```
const array = [10, 20, 30, 40];
const reduced = array.reduce(function(accumulator, currentElement, idx, array) {
console.log('accumulator: '+accumulator + ' currentElement: '+currentElement+' idx: '+idx+ ' array: '+ array);
return accumulator + currentElement;
});
console.log(reduced);
```

Using Arrow function:

```
const array = [10, 20, 30, 40];
const reduced = array.reduce((accumulator, currentElement, idx, array) => {
console.log('accumulator: '+accumulator + ' currentElement: '+currentElement+' idx: '+idx+ ' array: '+ array);
return accumulator + currentElement;
});
console.log(reduced);
```

And making it more readable with excluding functions:

```
const array = [10, 20, 30, 40];
const sumElements = (accumulator, currentElement, idx, array) => {
console.log('accumulator: '+accumulator + ' currentElement: '+currentElement+' idx: '+idx+ ' array: '+ array);
return accumulator + currentElement;
}
const reduced = array.reduce(sumElements);
console.log(reduced);
```

Console log will show us:

```
accumulator: 10 currentElement: 20 idx: 1 array: 10,20,30,40
accumulator: 30 currentElement: 30 idx: 2 array: 10,20,30,40
accumulator: 60 currentElement: 40 idx: 3 array: 10,20,30,40
100
```

As we can easily see loop starts from second element. In our case it starts from 20. accumulator is equation from previous loop run.

Lets analyse .reduce() in our 3 runs.

As we remember we have this console log:

```
accumulator: 10 currentElement: 20 idx: 1
accumulator: 30 currentElement: 30 idx: 2
accumulator: 60 currentElement: 40 idx: 3
100
```

**RUN 1: **

accumulator: 10 el: 20 idx: 1

accumulator = 10 (first element of array = array[0] = 10)

currentElement = 20 (2nd element of array)

idx = 1 (index = 1)

**RUN 2: **

accumulator: 30 el: 30 idx: 2

accumulator = 30 (array[0] + array[1] = 30) = previous run result

currentElement = 20 (3rd element of array) current element

idx = 2 (index = 2)

**RUN 2: **

accumulator: 36 el: 40 idx: 2

accumulator = 60 (array[0] + array[1] + array[2] = 60) = previous run result

currentElement = 40 (4th element of array) current element

idx = 2 (index = 2)

## Second parameter of reduce() – Initial value

Now lets analyse initial value parameter. You can pass it to reduce() function as a second parameter. In our case it will value **30**.

```
const array = [10, 20, 30, 40];
const reduced = array.reduce(function(accumulator, currentElement, idx, array) {
console.log('accumulator: '+accumulator + ' currentElement: '+currentElement+' idx: '+idx+ ' array: '+ array);
return accumulator + currentElement;
}, 30);
console.log(reduced);
```

Excluding function (for reusability):

```
const array = [10, 20, 30, 40];
function sumElements(accumulator, currentElement, idx, array) {
console.log('accumulator: '+accumulator + ' currentElement: '+currentElement+' idx: '+idx+ ' array: '+ array);
return accumulator + currentElement;
}
const reduced = array.reduce(sumElements, 30);
console.log(reduced);
```

Using arrow function:

```
const array = [10, 20, 30, 40];
const reduced = array.reduce((accumulator, currentElement, idx, array) => {
console.log('accumulator: '+accumulator + ' currentElement: '+currentElement+' idx: '+idx+ ' array: '+ array);
return accumulator + currentElement;
}, 30);
console.log(reduced);
```

Excluding Arrow function (for reusability):

```
const array = [10, 20, 30, 40];
const sumElements = (accumulator, currentElement, idx, array) => {
console.log('accumulator: '+accumulator + ' currentElement: '+currentElement+' idx: '+idx+ ' array: '+ array);
return accumulator + currentElement;
};
const reduced = array.reduce(sumElements, 30);
console.log(reduced);
```

And **console.log**

```
accumulator: 30 currentElement: 10 idx: 0 array: 10,20,30,40
accumulator: 40 currentElement: 20 idx: 1 array: 10,20,30,40
accumulator: 60 currentElement: 30 idx: 2 array: 10,20,30,40
accumulator: 90 currentElement: 40 idx: 3 array: 10,20,30,40
130
```

What is the difference? We can see that we have one more run of the loop than in previous execution. This is because of first run over initial value.

To make it more comparable lets set initial value to **0**