A guide to Array.reduce() Method in JavaScript
Tags: javascript, codenewbie, webdev, beginners
Published: 2021-01-18 06:35:18

The `Array.reduce()` method reduces the array to a single value. The `reduce()` method takes one reducer function as the first argument and one initial value as second optional argument. The reducer function executes for each element of array and returns a value which further provided as the first argument (accumulator) to the next reducer function call.

```javascript
array.reduce(reducerFunction, initialValue);
```
The reducer function takes two required arguments i.e. accumulator and currentValue. The accumulator is either the initial value or the previously returned value. The second argument is the value of the current element.

```javascript
function reducerFunction(accumulator, currentValue, currentIndex, array) {}
```
The reducer function also takes two optional arguments i.e. currentIndex and array. The currentIndex is the index of currentValue in array and the last optional argument is the array on which the `reduce()` method called upon.

##How reduce() method works
Let’s see one example to sum all the values of array.

```javascript
let numbers = [25, 48, 13];

let total = numbers.reduce(reducerFunction);

function reducerFunction(result, current) {
    return result + current;
}

console.log(total); // 86
```

So here the reducerFunction gets called first time with 25 and 45 as arguments and returns 73. The next second time reducerFunction gets called with previously returned value 73 and 13 and returns 86.

We can check how many times the reducerFunction has been called and values of the arguments by providing a `console.log` statement before return.

```javascript
function reducerFunction(result, current) {
    console.log('result:' + result, 'current:' + current);
    return result + current;
}
```

Output:
```
result:25 current:48
result:73 current:13
```

If we pass an initial value to the reducerFunction then for the first call the initial value will be the first argument and the first element of array will be the second argument.

```javascript
let numbers = [25, 48, 13];

let initial = 0;

let total = numbers.reduce(reducerFunction, initial);

function reducerFunction(result, current) {
    console.log('result:' + result, 'current:' + current);
    return result + current;
}

console.log(total); // 86
```

Output:

```
result:0 current:25
result:25 current:48
result:73 current:13
86
```
Let’s see some more examples of `reduce()` method.

##Find maximum and minimum number in Array
If we have an array of numbers, then we can find both max and min number by comparing every two numbers of array.

```javascript
let numbers = [25, 48, 13, 83, 59];

let maxNumber = numbers.reduce((max, current) => {
    return max > current ? max : current;
})

console.log(maxNumber); //83
```

Similarly we can find the minimum number by changing the reducer function as below:

```javascript
let minNumber = numbers.reduce((min, current) => {
    return min < current ? min : current;
});
```
##Convert Array to Object

Suppose we have an array of students object. Every student object has name and their semester marks.

```javascript
let students = [
    {name: 'Joey', marks: 41},
    {name: 'Monica', marks: 83},
    {name: 'Ross', marks: 92},
    {name: 'Rachel', marks: 51},
    {name: 'Chandler', marks: 76},    
    {name: 'Pheobe', marks: 45}
]
```

Now we want to create one object from the array with students name as key and their marks as value. Let’s see how to do that with `reduce()`.

```javascript
let result = students.reduce((obj, student) => {
    obj[student.name] = student.marks;
    return obj;
}, {});

console.log(result);
```

Output:

```javascript
{
    Joey: 41,
    Monica: 83,
    Ross: 92,
    Rachel: 51,
    Chandler: 76,    
    Pheobe: 45
}
```

##You May Also Like
* [map() and filter() methods of Array in JavaScript](https://jscurious.com/map-and-filter-methods-of-array-in-javascript/)
* [JavaScript Fetch API to make HTTP requests](https://jscurious.com/javascript-fetch-api-to-make-http-requests/)
* [20 JavaScript Shorthand Techniques that will save your time](https://jscurious.com/20-javascript-shorthand-techniques-that-will-save-your-time/)

***Thanks for you time***
Find more web development blogs on [jscurious.com](https://jscurious.com)