DEV Community

loading...

A guide to Array.reduce() Method in JavaScript

amitavmishra99 profile image Amitav Mishra Originally published at jscurious.com ・3 min read

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);
Enter fullscreen mode Exit fullscreen mode

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) {}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Output:

result:25 current:48
result:73 current:13
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Output:

result:0 current:25
result:25 current:48
result:73 current:13
86
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
});
Enter fullscreen mode Exit fullscreen mode

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}
]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Output:

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

You May Also Like

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

Discussion (0)

pic
Editor guide