Array.reduce() - for reducing an array to a single value
Tags: javascript
Published: 2022-05-05 13:08:50

This article is the tenth of the [Array Method Series](https://dev.to/dillionmegida/series/17614). 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

```js
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:

```js
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:

```js
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`:

```js
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:

```js
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.