Making peace with the javascript Array.reduce() method.

Out of all the common array methods in Javascript, Array.reduce() is the one I have struggled the most with. Mainly because it is a method that takes many ‘obscure’ parameters and callback arguments. I will try to shed a light upon those in this post.

If I was to summarise what .reduce() does, I would say it is a nice and compact way to loop over an array to create a new value derived from all the values of the array.

A common simple application of this method is returning the sum, the minimum or the average of the values of an array. It can also be used for more complex operations as we'll see later in this article.

Let's have a look at a simple example. We want to return the sum of all the elements in an array:

const array = [ 0, 1, 2, 3 ]
const total = array.reduce(
  ( accumulator, currentValue ) => accumulator + currentValue,
  0
)
// total is 6

Which can also be written using the more traditional for-loop syntax:

const array = [ 0, 1, 2, 3 ]
let total = 0;
for(let i = 0; i < array.length; i++) {
  total += array[i];
}
// total is 6

Let's dive into how to use this method. The syntax can seem a bit cryptic at first when looking at the definition:

array.reduce(reducerFunction(total, currentValue, currentIndex, arr), initialValue)

Let's explore what those parameters are:

The reducerFunction (to be applied sequentially to each element of the array) takes on four arguments:

total (required) is also often called ‘accumulator’ as it is the accumulated result of the callback function being applied on each element of the array. It is remembered across each iteration, and ultimately becomes the final resulting value (which can also be an array or an object, as we'll see in the following example).

currentValue (required) is the value of the current element of the array to which the reducer function is being applied.

index (optional) is the index of the element of the array to which the callback function is being applied.

arr (optional) is a way to access the array on which the method is applied. You might need it for more complex logic, like when you need to know how much of the array you’ve already traversed (using arr.length).

You can also specify an initValue (optional) after the reducer function. This initial value is the one from which the accumulator starts. If this value is not supplied, the accumulator starts from 0.

OK, now that we understand the theory, let's use .reduce() to remove duplicates from an array. For this example, I took inspiration from this brilliant article by Samantha Ming.

This is our initial array. It contains duplicate values and we want to make it an array of single values.

const array = [0, 4, 0, 5, 6, 6, 10]

In this example our 'total', the final value to be returned will be the array of single values we want as a result (we call it finalArray). The initial value of the 'total' is an empty array.

const arrayOfUnique = array.reduce(function(finalArray, currentValue){
    finalArray.includes(currentValue) ? 
    null :
    finalArray.push(currentValue)
    return finalArray
}, [])
// arrayOfUnique is [0, 4, 5, 6, 10]

At every iteration, our function checks if the currentValue is already present in the finalArray. If it isn't, it adds it to the finalArray. When we are finished iterating the function on every value in the array, our finalArray contains only single values.