 # Master the JavaScript Array Reduce Method With Examples

JavaScript array methods are very popular and useful. However, for some reason, the reduce method is left behind in that hype train. People not only ignore it but also actively avoid it.

Whatever the reason is, I have made it my mission to show you how great and — most importantly — easy it is to use.

The JavaScript reduce method helps you convert an array into a single value.

Before getting started, I assume that you understand how callback functions work in JavaScript. If not, check out the JavaScript callback functions guide to learn more.

In this article, I would try my best to explain the basics behind the reduce method and how it works.

So let’s get down to it.

## How Does reduce() Method Work

JavaScript’s reduce() method implements what is known as folding in math. To put it simply, folding means you reduce a list of numbers into a single value.

For instance, calculating the sum of a list of numbers is a great real-life example of folding.

Example: 1+2+3 = 6

When you calculate the sum of a list of numbers, you:

• Take the first number and add the second number to it.
• Keep the result in your mind.
• Take the second number and add it to the result.
• Keep the result in your mind.
• Take the third number and add it to the result.
• You repeat this process until you have summed up all the numbers in the list.

This is exactly how the `reduce()` method works in JavaScript.

The reduction generally follows this procedure:

• Call a function on the first two elements of an array to get a partial result.
• Call the function on this partial result and the third element of the array to get a new partial result.
• Repeat this process until there are no values left in the array.
• Return the result.

Now you understand the working principle of the `reduce()` method.

To learn how to use the `reduce()` method, let’s start by learning its syntax.

## JavaScript reduce() Method Syntax

The reduce method in JavaScript helps to execute a reducer function on each element of the array and returns a single output value. To put it simply, the `reduce()` method reduces the array to a single value.

Syntax:

``arr.reduce(callback(accumulator, currentValue), initialValue)``

Here, `arr` is an array.

`callback` – The callback function to execute on each array element (except the first element if no `initialValue` is provided).

Also, this function is commonly known as a reducer. This function has to return a value.

It takes in –

• `accumulator` – It accumulates the callback’s return values
• `currentValue` – The current element being passed from the array

`initialValue` (optional) – A value that will be passed to `callback()` on first call. If not provided, the first element acts as the `accumulator` on the first call and `callback()` won’t execute on it.

Kindly note, calling `reduce()` on an empty array without `initialValue` will throw TypeError.

To make more sense of this, let’s see an example.

## How to Use the reduce() Method

Perhaps the easiest example to demonstrate `reduce()` is by summing up numbers in an array of numbers.

```const numbers = [1, 2, 3, 4]
const sum = numbers.reduce(function(accumulator, currentValue)
{
return accumulator + currentValue

}, 0)

console.log(sum) //10```

Here the `reduce()` method takes a function that sums up two arguments `accumulator `and `currentValue`, where `accumulator` represents the result so far and `currentValue` is the current element.

The second argument in the `reduce()` function is 0. This is the initial value we want the sum to start from.

Under the hood, here are the calculations made by this particular `reduce()` method call:

0 + 1 = 1
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10

Here is a great illustration of the process:

By the way, the function passed into the `reduce()` method call is an example of an inline callback function.

In total, there are 3 different ways to provide the function as an argument to the `reduce()` method:

• Callback function
• Inline callback function
• Arrow function

These are important to understand because, with each approach, the code looks a bit different although it produces the exact same result.

Furthermore, if you are using other array methods like `map()` or `filter()`, you are going to benefit from understanding these types of functions.

## The 3 Types of Reducer Functions

As you now know, the `reduce()` method takes a function argument.

This function can be a callback function, an inline callback function, or an arrow function.

By the way, these 3 types of functions are not only related to the `reduce()` method. Instead, these types of functions can be used anywhere where you pass a function as an argument to another function.

These types of argument functions look different but behave the same way.

You should pick one based on the context.

• A callback is useful when you use the functionality multiple times.
• An inline callback is useful if you only need the reducer functionality once.
• An arrow function is a more concise way to write an inline callback function. Arrows functions were introduced in ES6.

Also Read: Arrow Functions in JavaScript

Let’s take a look at each type of reducer function mentioned above.

### 1. Callback Function

In JavaScript, a callback function is a function passed as an argument into another function (or method).

To use a callback function with the `reduce()` method, you need to:

• Have an array of values.
• Specify a separate reducer function.
• Pass the reducer as an argument to the `reduce()` method call.

For instance, let’s calculate the sum of an array of numbers this way:

```const numbers = [1, 2, 3, 4]

return x + y
}

console.log(sum) //10```

As you can see, here we have a separate function called `add` which we pass into the `reduce()` method.

The `add` argument is an example of a callback function. This argument `add` is a reference to the actual implementation of the `add()` function.

In this case, you do not need to provide any arguments because the `reduce()` method does it on your behalf.

Next, let’s take a look at what is an inline callback in JavaScript.

### 2. Inline Callback Function

An inline callback function is a callback that is implemented directly into the function call. The word inline literally means “in-line”, that is, defined on the same line where it is called.

An inline callback is useful because you do not need to specify a separate function for the `reduce()` method. Instead, you can create a one-time function directly into the `reduce()` method call.

This is good practice if you only need the functionality once. It would not make any sense to leave unused functions hanging in the codebase.

Let’s see an example of using the `reduce()` method with an inline callback function:

```const numbers = [1, 2, 3, 4]
const sum = numbers.reduce(function(x, y) { return x + y }, 0)

console.log(sum) //10```

Here the functionality for adding up two numbers is implemented directly into the `reduce()` method call.

Although this makes the code nice and short, you can do things even better by using arrow functions.

### 3. Arrow Function

In JavaScript, an arrow function is a shorthand for a function expression.

It can make `reduce()` method calls way more readable and concise. For instance, let’s repeat summing up an array of numbers once more using an arrow function:

```const numbers = [1, 2, 3, 4]
const sum = numbers.reduce((x, y) => x + y)

console.log(sum) //10```

Fabulous!

This piece of code looks quite professional, doesn’t it?

Next, let’s discuss closely related built-in array functions `map()` and `filter()`.

## Use reduce() like map()

You can use the `reduce()` method to complete a task you would do with the `map()` method.

In short, the `map()` method loops through an array and transforms it into another array by calling a function on each element in the array.

Here is an example of using the `map()` method:

```const numbers = [1, 2, 3, 4]
const squaredNums = numbers.map(n => n * n)

console.log(squaredNums) //[ 1, 4, 9, 16 ]```

But this is something you could do with the `reduce()` method as well.

For example, let’s square a list of numbers:

```const numbers = [1, 2, 3, 4]

const squaredNums = numbers.reduce((squares, x) => {
squares.push(x * x)
return squares
}, [])

console.log(squaredNums)  //[ 1, 4, 9, 16 ]```

In this case, it would actually make more sense to use the map() method because it is way simpler.

Let’s take a look at another commonly used array method, `filter()`, and its relationship to the `reduce()` method.

## Use reduce() like filter()

In JavaScript, you can use the `filter()` method to filter out values of an array. For example, let’s filter out all the odd values from an array of numbers:

```const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const evenNums = numbers.filter(x => x % 2 == 0)

console.log(evenNums) //[ 2, 4, 6, 8, 10 ]```

What you might not think about is you can achieve the same result using the `reduce()` method.

For example:

```const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const evenNums = numbers.reduce((evens, x) => {
if (x % 2 == 0)
evens.push(x)
return evens
}, [])

console.log(evenNums) //[ 2, 4, 6, 8, 10 ]```

But as you can see, this is rather verbose compared to the `filter()` approach. Thus, it is in fact a better idea to use the `filter()` method in this particular task.

But why was it worth mentioning the `map()` and the `filter()` methods?

Let me show you when it can be better to use `reduce()` instead of `map()` or `filter()`.

## reduce() vs map() / filter()

In the context of mapping/filtering, you should use the functions `map()` and `filter()` by default. However, if you are combining these two, you should consider using the `reduce()` method.

This is because if you chain a `filter()` call with a `map()` call, you are looping through the array twice.

But why loop twice if once is enough?

Let me show you an example.

In this example, we are going to combine the two examples which we have seen previously.

In other words, given an array of numbers, let’s create a new array with only the even numbers squared.

Here is how it looks in code:

```const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const evenSquared = numbers.filter(x => x % 2 == 0).map(x => x * x)

console.log(evenSquared) //[ 4, 16, 36, 64, 100 ]```

This works perfectly, and the code does not look bad either.

The `.filter().map()` chain is readable and concise. But you might consider making the code run faster by combining the two loops, `filter()` and `map()`, into a single loop by using `reduce()`.

Here is how it looks in code:

```const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const evenSquared = numbers.reduce((res, x) => {
if(x % 2 == 0)
res.push(x * x)
return res
}, [])

console.log(evenSquared) //[ 4, 16, 36, 64, 100 ]```

This only loops through the array once.

However, the code is now rather unreadable and verbose. If there is no clear benefit to doing it this way, you should use an approach that is more readable.

Now that you have extensively used the `reduce()` method, let’s see a couple of mistakes you should avoid.

## Mistakes to Avoid with reduce() Method

Once you have had enough practice, using the `reduce()` method becomes easy for you.

Here are two common pitfalls that can cause a lot of headaches when using the `reduce()` method.

### Forgetting the Initial Value

Always remember to set the initial value as the second argument in the `reduce()` method call.

If you do not, the default initial value is used. This default value is the array element at the index of `0`. Usually, the default value is actually what you want.

### Forgetting to Return

A really common pitfall of using the `reduce()` method is forgetting to return a value from the reducer function.

The reducer function must return a value. This is because the return value is treated as a partial result. If there is no return value, the `reduce()` method does not work.

Notice that if you are using a single-line arrow function as the reducer, you do not need to use the `return` keyword.

This is because a one-liner arrow function expression implicitly returns the value.

## Practical Examples

Here are two practical examples of using the `reduce()` method in JavaScript.

### Group Values: A Tally with reduce()

You can use the `reduce()` method to group array values by their frequency.

For example, given a list of fruits, let’s create an object that groups the fruits by how many times they occur in the array,

Here is how it looks in code:

```const fruits = [
'apple',
'orange',
'orange',
'apple',
'cherry',
'grape',
'banana',
'cherry',
'orange'
]

const tally = fruits.reduce( (tally, fruit) => {
tally[fruit] = (tally[fruit] || 0) + 1
return tally
} , {})

console.log(tally)

//{ apple: 2, orange: 3, cherry: 2, grape: 1, banana: 1 }```

### Flatten an Array

If you are dealing with a 2D array, you can use the `reduce()` method to flatten it.

This works such that the `reduce()` method concatenates each sub-array to a single 1D array.

For example:

```const nums2D = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
]

const flat = nums2D.reduce((nums1D, row) => nums1D.concat(row), [])

console.log(flat) //[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]```

## Advanced Use of reduce() Method

So far you have seen how to use the `reduce()` method with this syntax:

``arr.reduce(callback(accumulator, currentValue), initialValue)``

However, you can also add some optional arguments to the reducer function.

The full syntax of using the `reduce()` method is actually:

``arr.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)``

Where:

• `currentIndex` is the optional index of the current array element.
• `array` is the optional array on which `reduce()` is being called.

Here is an example of a situation in which you can specify the `currentIndex`.

Let’s say you have an array of names that represent people standing in a line.

Now you want to convert this array of names into an object of position number and the person’s name.

Here is how to do it:

```const names = ["Ram", "Gopal", "Hari"]

const queue = names.reduce(function(namesData, name, nameIndex) {
namesData[nameIndex + 1] = name
return namesData
}, {})

console.log(queue)
//{ '1': 'Ram', '2': 'Gopal', '3': 'Hari' }```

Now each name is associated with a position in the queue.

As you can see, the code is quite clean as you do not need to track the index yourself. Instead, the reducer function takes care of that part.

Usually, you are not going to need these optional parameters.

However, it is good to know they exist.

## Conclusion

In this tutorial, you learned how to use the JavaScript `reduce()` method.

Here is a brief summary of what was discussed in this lesson:

• How to use a JavaScript `reduce()` method
• The purpose of the second argument of the reduce method – it tells the reducer function what initial value to use
• A few examples of the JavaScript `reduce()` method in practice
• The differences between the `map`, `filter` and `reduce` methods in JavaScript (or any other programming language)

## Resource

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

## Similar articles you may like Hi there 👋 I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better. Hi there 👋 I am a front-end developer passionate about cutting-edge, semantic, pixel-perfect design. Writing helps me to understand things better.