Understanding Array.reduce()

Steven — Wed, 21 Aug 2024 10:41:24 +0000

Introduction

While taking a introduction course on Javascript and learning about all of the different methods of the Arrays. I did not quite understand the real power of the reduce method and it is only after going back to it a second time that I am now realising how truly useful this method is. I hope the article might make it clearer for some about how this method works and when to use it.

The Method

Array.prototype.reduce(callbackFunction)
Array.prototype.reduce(callbackFunction, initialValue)

What exactly does this method do?

The reduce() method processes each element of an array using a callback function, accumulating the result into a single value. If an initial value is provided, it's used as the starting point; otherwise, the first array element is used, and the iteration starts from the second element.

Callback Function Parameters

callbackFunction(accumulator, currentValue, currentIndex, array){}

accumulator

The accumulated result from the previous iteration or the initial value if provided.

currentValue

The value of the current array element being processed.

currentIndex

The index of the current element, starting at 0 if an initial value is provided, otherwise 1.

array

The array on which the reduce() method is being executed.

Initial Value

When using the reduce method without a initial value, the callback function will take the first element of the array and initialize it as the accumulator and then iterate through the rest of the array.

Use cases

The most common example you will encounter using the reduce method is the sum of an array.

const ages = [23, 15, 45, 13, 66, 54, 38];
let sumOfAges = ages.reduce(function(sumOfAges, currentAge){
    sumOfAges = sumOfAges + currentAge;
    return sumOfAges;
}); // 254

While yes this is exactly what the reduce method is good for and good at, there is a lot more it can do.

Getting the max age of a group

const ages = [23, 15, 45, 13, 66, 54, 38];
let oldestPerson = ages.reduce(function(maxAge, currentAge){
    if(currentAge>maxAge){
        maxAge = currentAge;
    }
    return maxAge;
}); // 66

Here we are using the reduce method to save the highest age that we are encountering in the array and returning that value once iterated through the whole array.

Removing Duplicates in a Array

const store = ['apple', 'pear', 'apple', 'orange', 'apple', 'pear'];
let itemCatalogue = store.reduce(function(uniqueStoreItems, currentItem){
    if(!uniqueStoreItems.includes(currentItem)){
        uniqueStoreItems.push(currentItem);
    }
    return uniqueStoreItems;
}, []); // ['apple', 'pear', 'orange']

Important to note here that for the initial value in the reduce method we are supplying an empty array, []. This means that the accumulator is now an array, and our call back function pushes only items that are not already in that array. As a result we have removed duplicates.

Getting a Count of Items in a Array

const store = ['apple', 'pear', 'apple', 'orange', 'apple', 'pear'];
let itemCount = store.reduce(function(count, currentItem){
    count[currentItem] = (count[currentItem] || 0) + 1;
    return count;
}, {}); // { apple: 3, pear: 2, orange: 1 }

Important to note here is that the initial value is an empty object. As we go through the items in the store, we populate the item with the count.

Conclusion

First of all if you've made it this far thanks for the read! My main goal for writing this article was for me to solidify my understanding of the reduce method and I hope that maybe you learned something new here too! The reduce method has a lot of really cool applications and is really neat to use. Have you got any other use cases or fun tricks with the method? I would love to know!

Forem: Steven