A guide to Array.reduce() Method in JavaScript

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.

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.

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.

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.

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.

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.

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:

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.

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().

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

console.log(result);

Output:

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

You May Also Like

• map() and filter() methods of Array in JavaScript
• JavaScript Fetch API to make HTTP requests
• 20 JavaScript Shorthand Techniques that will save your time

Thanks for you time
Find more web development blogs on jscurious.com