Reducers

Open the project folder

What are reducers?

Next we have reducers, and this is a way of reducing an array down into one single value. Like in the previous lessons, the reduce method will also run a function for each array value. But instead of transforming the values or returning new ones, it will reduce it down to one single value.

At its most simple, we could add together an array of numbers, and then return the total of them all added together. Of course, we could go much more complex if we needed to.

Using reduce

Into the starter project, this has a simple array of numbers:

let numbers = [72, 33, 108, 222, 6];

And to add them together, reduce is perfect for this. As with other methods, we call reduce on the array:

let numbers = [72, 33, 108, 222, 6];
numbers.reduce();

This will run a function for each value in the array. This function could be passed into the brackets directly as we have done so far, or we could create it separately to keep things clean.

Let’s type in the function sepatately to begin:

let numbers = [72, 33, 108, 222, 6];
function total(total, currentNumber) {
  return total + currentNumber;
}
numbers.reduce();

Then pass in this function with the name of total:

numbers.reduce(total)

There is no difference in placing this function inside directly, or on its own like this, it is just personal preference, and this function can also now be re-used in other places if required.

Back to the total function. This is called once for each array value, so it will run in our example five times, and this is where the parameters come in:

total(total, currentNumber)

For each loop, currentNumber is the current array value. But first we have a total and this is the total from the previous loop, often called the accumulator since it accumulates the previous results. This will be zero on the first loop, since we have no previous number to add to. Looking at the example below, the comments show how the currentNumber is added to the running total on each loop:

function total(total, currentNumber) {
  // loop 1- 0, 72
  // loop 2- 72, 33
  // loop 3- 105, 108
  // loop 4- 213, 222
  // loop 5- 435, 6
  // = 441
  return total + currentNumber;
}

We can check this by logging to the console:

const result = numbers.reduce(total);
console.log(result); // = 441

We can do anything we want to with these 2 numbers, such as also subtracting the values:

return total - currentNumber; // = -297

Then reinstate back to add the numbers:

return total + currentNumber;

The reduceRight method

This adds up our array values from left to right, there is also a similar method called reduceRight() to move from right to left:

const result = numbers.reduceRight(total);

This is the same result for this example since we are just adding together the numbers but would have a different result if we divided for example.

To test this is going right to left, we can add an optional index number parameter to the reducer:

  let numbers = [72, 33, 108, 222, 6];
  function total(total, currentNumber, index) {
    console.log(index);
    return total + currentNumber;
  }
  const result = numbers.reduceRight(total);

The log should show 3,2,1,0 (backwards).

Reducers are useful for lots of reasons, we may want to keep track of a user’s score or points this way, total order values. This information can then be used in other ways, maybe to find an average number like this:

const result = numbers.reduceRight(total);
const average = result / numbers.length;
console.log(average)