Javascript Reduce

I have been programming for many years in industry, and I find it quite rare that I need to use a reduce function in my code, whether that be in JavaScript or other languages with an equivalent function.

Why is that? Well… let’s learn more about reduce and then we can talk about why it is not often needed, and when it is the perfect choice to solve a problem.

What is Javascript’s reduce?

Reduce is all about sifting through a list of items, inspecting them, and updating some kind of “running tally” that you are interested at the end.

A common example is adding up all the numbers in a list. How do you do this in your head, or with a calculator? Well you take the first number, then take the second number and add it to the first, then after than you keep adding the numbers to the ‘running total’ until you get to the end.

This is what reduces does, but it can do a bit more, because it doesn’t have to just work with a number as the running total.

For example you could update a an object that knows both the running total and the number of items. Once you have gone through the list you might know the numbers add up to 36, and there are 12 of them. From this you can calculate the average as ³⁶⁄₁₂ = 3.

Summing using Reduce

Let’s use the summing example to write some code that will use reduce to add up all the numbers in an array. To do this we need to provide some things to reduce:

A reducer function that given the “accumulator” and an item from the array, will give us an updated accumulator. In our example the accumulator is the running total, so our reducer just needs to add the item from the array to the running total. Just as you would do in your head if adding up a list of numbers.
A starting value which is the value to set the accumulator to at the beginning. This value is optional, and if you don’t provide it the first item in the array will be used.

For summing a list of numbers the reducer function will look like this:

var sum_reducer = function(running_total, next_item) {
    return running_total + next_item;
}

We don’t need a starting value because we want to start with the first item in the array. (Think again of how you would add the numbers in your head)

This means the code for adding up some numbers, looks like this:

function sum(number_array){
    var sum_reducer = function(running_total, next_item) {
        return running_total + next_item;
    }
	return number_array.reduce(sum_reducer);
}

You can use arrow functions and a bit of in-lining to make the code shorter, if this is more pleasing to your eye. This requires JavaScript version ES6 or later:

function sum(number_array){
	return number_array.reduce((running_total, next_item) => running_total + next_item);
}

Finally let’s use the function:

var data = [1,2,3,5,8];
console.log(sum(data)); // displays 19

Why is reduce rarely used?

I personally don’t use reduce (or it’s equivalents in other languages) much because: 1. Often you can get what you need using map or some other built in function or library function that is simpler to work with. 2. For complicated scenarios it is often easier to use a for loop, which allows you to work more intuitively with changing state.

However it is an interesting function and well worth learning for the list-processing situations where you think it is a good idea. These are typically in math-like situations, where you are calculating the totals, averages etc.

A non-math example is the Redux framework for managing the user interface state within a web page, which used reducers to handle updates to the page’s state. That’s quite an advanced topic though, but if you are feeling ready, see reducers on the Redux website.

Javascript Reduce

What is Javascript’s reduce?

Summing using Reduce

Why is reduce rarely used?

See Also