array.reduce

Since my last post was on array.map() I felt I should also cover the complimentary function array.reduce(). Previously I have also talked about the concept of MapReduce which is having each server store its own data and then process it locally and then send the calculated data to a single source which combines all the data into a single result. This concept is loosely based off of the functions map and reduce which have been added to JavaScript from functional languages.

While array.map() performs calculations on each element in the array and then returns an array with the same length array.reduce() combines all the results in an array into a single answer.

The classic example is calculating the total of an array. If we were to do this in a standard for loop it would look like:

var arr = [1, 2, 3, 4];
var total = 0;
for (var i = 0; i < arr.length; i++) {
    total += arr[i];
}

This is fairly straight forward. We start with an array of numbers and a total which has been initialized to 0. We loop through the array adding the current value of the array to the total and when we are done the total will be the value of everything in the array added together.

As mentioned in the post on array.map() the for loop does have a lot of extra steps. array.reduce() greatly reduces the steps the developer has to deal with and equivalent code written using it would be as follows.

var arr = [1, 2, 3, 4];
var total = arr.reduce(function (prev, curr) {
    return prev + curr;
});

The function passed to reduce has two values prev which is the reduced value of everything before the current element in arr and curr is the value of the current element in arr.

While totaling the values in an array makes for a good simple example of how array.reduce() works it doesn't offer much to convince you to actually use it. Personally there haven't been many times where I have had to do math to combine arrays of numbers outside data science situations.

An example that is a bit more compelling would be filtering an array.

var arr = [
    {name: 'Bob', age: 62},
    {name: 'George', age: 46},
    {name: 'Jim', age: 23},
    {name: 'Sally', age: 56}
];
var selectedIndividuals = arr.reduce(function (prev, curr) {
    if (curr.age > 30 && curr.age <= 60) {
        prev.push(curr);
    }
    return prev;
}, []);

In the reduce function this time we have to specify what we want the initial value to be after we pass in our reduce function. In this case we want it to be an empty array. Then as we loop through the array of individuals we check to see if they meet our requirements. If they do we add them to the new array, and if they don't we simply return the array without modifying it.

I have also seen array.reduce() used to flatten multidimensional arrays and other array restructuring where your final result will be of a different length than the original array.

If you have any other use cases you want to share for array.reduce() leave a comment below.

comments powered by Disqus