Array.reduce() - for reducing an array to a single value

This article is the tenth of the Array Method Series. In this article, I will explain what the reduce Array method is.

What is the Reduce Method?

The reduce method of arrays is a higher-order function that basically reduces the values in an array to a single value. This single value could be a number, a string, an object, or even an array.

This method goes through an iterative-loop process such that the returned value in a loop is applied to the next loop until the end of the array, and the final value is returned.

This method does not modify the array.

Syntax of the Reduce Method

array.reduce(function(previousValue, currentValue, currentIndex, array){
  // do something with previousValue and currentValue
  // return a value
}, initialValue)

The reduce method receives two arguments: a callback function and an optional initialValue.

The callbackFunction passed is applied to each item in the array. The arguments passed to the callback function in each loop are the previousValue from the previous loop, the currentValue in the current loop, the index of the current value, and the original array.

How the previous value works

If you pass an initialValue argument, the previousValue in the first loop will be the initialValue, and the currentValue will be the first item in the array. In the second loop, the previousValue will be the returned value from the callback function in the first loop, and the currentValue will be the SECOND item in the array. And it goes like that, till the end.

Suppose the initialValue argument is not provided. In that case, the previousValue in the first loop will be the first item in the array, and the currentValue will be the second item in the array. In the second loop, the previousValue will be the returned value from the callback function in the first loop, and the currentValue will be the THIRD item in the array.

For an array of 5 elements, passing an initialValue argument makes it five loops (each loop for each item), but not giving an initialValue argument makes it four loops (first loop for the first two items, second loop for the third item, and so on)

Without the Reduce Method

The reduce method is an abstracted function that does an iterative-loop process to reduce an array. Here's an example, imitating the reduce method.

First, with an initial value:

const array = [1, 2, 3, 4, 5]

let initialValue = 5
let finalValue = initialValue

for (let i = 0; i < array.length; i++) {
  const previousValue = finalValue
  const currentValue = array[i]

  finalValue = previousValue + currentValue
}

console.log(finalValue)
// 20

And without an initial value:

const array = [1, 2, 3, 4, 5]

let finalValue = array[0]

for (let i = 1; i < array.length; i++) {
  const previousValue = finalValue
  const currentValue = array[i]

  finalValue = previousValue + currentValue
}

console.log(finalValue)
// 15

The loop starts from the 1 index because the 0 indexed value has already been used as the initial value.

This loop approach is similar to what the reduce method does in the background. It loops through each item in an iterative manner by feeding the following item with the value from the previous loop. The next item can use the previous value to do anything--add, multiply, concatenate to form an array, e.t.c

With the Reduce Method

Here's how you achieve the previous result with reduce:

const array = [1, 2, 3, 4, 5]

const finalValue = array.reduce(function(previousValue, currentValue) {
    return previousValue + currentValue
})

console.log(finalValue)

I did not pass an initialValue, so it only does four loops with the first item as the starting value.

Using the reduce method makes things easier to read.

You want to use this method to reduce an array of values to a single value. Remember that this single value can still be an array, or it could be an object.

Here's an array single value example:

const array = [1, 2, 3, 4, 5]

const finalValue = array.reduce(function(previousValue, currentValue) {
  return [currentValue * 2].concat(previousValue)
})

console.log(finalValue)
// [ 10, 8, 6, 4, 1 ]

For the return value, I returned an array with the current value multiplied by 2, then concatenated it with the previous value, and you can see the single array result.