Demystifying Array.reduce(): How to understand it and when to use it in your code
Tags: javascript, node, react, beginners
Published: 2018-09-19 01:31:07

---
title: Demystifying Array.reduce(): How to understand it and when to use it in your code
published: true
description: Let's clarify, once and for all, how reduce works and when to use it.
tags: javascript, node, react, beginners
---

ES5 and later versions of JavaScript brought several new methods for handling arrays. Many of them have become the best practice for common tasks with arrays and JavaScript is much better off with them.

`Array.map()` and `Array.filter()` are two examples of daily-driver ES5 additions that are staples for most JS developers.

An equally useful but often less understood tool in the kit is `Array.reduce()`. Lately, I've been using `reduce` more often, but it took a while for it to feel natural and I often see other developers struggling with it... or just not using it at all.

## Reduce is often taught wrong and therefore misunderstood

In my opinion, a large reason for the confusion is that `reduce` is just taught wrong. In fact, it even feels _named_ wrong to me (even though, of course, the concept and name of a reducer come from well before it was added to JavaScript).

The most common example when teaching reducers is something like this:

```javascript
const array = [1, 2, 3, 4];
const sum = array.reduce((accumulator, currentItem) => {
    return accumulator + currentItem;
}, 0);

// sum = 10
```

This fairly cleanly shows how reducers function. You call `reduce()` on an array and pass it an initial value as well as a function that runs for each item of that array.

To the passed function, `reduce` sends: 

1) The current item and
2) The value returned by the previous callback (or the initial state, when called for the first time)

The final value of `reduce` is ultimately whatever the inner reducer function returns when called the last time.

As a result, in this case, the reducer is summing the values of the array and returning the total value.


## So... adding arrays of numbers, is that all `Reduce` does? 

I saw that example so many times, but rarely saw explanations that went much further.

"Hm, interesting.", I'd think, as I went on with my day.

So, what's the real deal with reducers? What are they actually good for?

Here's the real power:

## Reducers are useful when you want to process an array **but output something that isn't an array**

That's really what it boils down to, and that is useful _very often_.

After all, isn't that what we're doing in the example above? We're taking in an array and returning an integer. In that context, it makes some sense that we're "reducing" the array, but we don't always have to output something as simple as an integer.

Take this example:

```javascript
const trips = [{type: 'car', dist: 42}, {type: 'foot', dist: 3}, {type:'flight', dist: 212}, {type: 'car', dist: 90}, {type: 'foot', dist: 7}] 

const distanceByType = trip.reduce((out, curr) => {
    const { type, dist } = curr;
    if (out[type]) {
        out[type] += dist;
    } else {
        out[type] = dist;
    }
    return out;
}, {});

// distanceByType = {car: 132, foot: 10, flight: 212};
```

So here, we're taking in an array, but returning an object of sums, instead of just a single one. 

Here we're beginning to see the essence of what a reducer really is:

## A reducer is a transformer

It takes in an array and transforms it into something else.

Thinking of it in this way not only helps me understand what `reduce` does but also *helps me realize when I should be using it*.

- Have an array of users but want to output a string like, `Mike, Becka and 3 others will be attending`? A reducer is great for that!

- Have an array of articles and want an object with them keyed by category? A reducer is great for that!

The use cases go on and on.

# Go forth and `Array.reduce()`!

I really hope that helps and would love to clarify things further in the comments if I can.

Got a use case for `reduce` that you love? Comment below and I'll add it to the article 🚀