“forEach” all the things!
Tags: javascript, functional, higherorderfunc
Published: 2018-09-18 20:12:02

---
title: “forEach” all the things!
published: true
tags: javascript,fp,higher-order-func
canonical_url: https://medium.com/@jperasmus11/foreach-all-the-things-b3c3313473cc
---

_Disclaimer: this is an opinion piece, feel free to disagree._

Having done a good number of code reviews over the past few years and seeing what comes back to bite us vs. what generally works the way we intended, one such issue is knowing when to use `forEach`. It comes down to asking yourself the right questions.

On a separate but related point, I would argue that being comfortable with AND knowing when to use `forEach`, `map`, `filter` or `reduce`, you can tackle any array-related data manipulation problem, so it really pays, as a developer, putting in the effort to get very comfortable with it. Sure there are some other very useful methods, like `flatMap`, but knowing these four, you can go a long way.

This post will use JavaScript as an example, but the concept is the same for any language that supports the higher-order array functions: `forEach`, `map`, `filter` and `reduce`.

#### Who is this post for?

Developers that already know to favour `forEach` over `for` loops to write more beautiful (declarative!) code, but are perhaps not comfortable with these higher-order array functions. There is a place for a `for` loop, but more often than not, you should use the more declarative option.

#### “forEach” all the things!

The first thing developers start doing when they move from the imperative for loop to more declarative forEach functions, is that they **“forEach all the things”**!

![](https://cdn-images-1.medium.com/max/500/1*_HepUVzNXC4oo5jGsco_og.jpeg)

This is okay and definitely better than using for loops everywhere, but we can do better.

#### The thinking process

Sure you can use a shoe to hang a picture on the wall, but a hammer is a better tool for the job.

> Use the right tool for the job.

What follows are questions you can ask yourself while coding and trying to decide whether you should use `forEach`, `map`, `filter` or `reduce`.

#### 1. I’ve got an array of things and I want to manipulate each item in some way

**The wrong way:** use forEach

```javascript
const list = ['a', 'b', 'c']
const newList = []

list.forEach(item => {
 newList.push(item.toUpperCase())
})

console.log(newList) // ['A', 'B', 'C']
```

**The right way:** use map

```javascript
const list = ['a', 'b', 'c']

const newList = list.map(item => item.toUpperCase())

console.log(newList) // ['A', 'B', 'C']
```

#### 2. I’ve got an array of things and I want to “reduce” it to one thing

This one is easy to remember once you are comfortable with it and it works really well for situations like summing totals or reducing a list of objects into a single object. You can think of `reduce` as compressing a list of inputs into a single output.

**The wrong way:** use forEach

```javascript
let total = 0
const list = [1, 2, 3, 4]

list.forEach(item => {
 total = total + item
})

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

**The right way:** use reduce

```javascript
const list = [1, 2, 3, 4]

const total = list.reduce((sum, item) => sum + item, 0)

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

This example, to sum a few numbers, doesn’t make the pain obvious, but working with more complex data will surface the problem.

#### 3. I’ve got an array of things, but I only want a subset of them

**The wrong way:** use forEach _(noticing a pattern here?)_

```javascript
const list = [1, 2, 3, 4]
const evenNumbers = []

list.forEach(item => {
 if (item % 2 === 0) {
 evenNumbers.push(item)
 }
})

console.log(evenNumbers)
```

**The right way:** use filter

```javascript
const list = [1, 2, 3, 4]

const evenNumbers = list.filter(item => item % 2 === 0)

console.log(evenNumbers)
```

#### 4. I’ve got an array of things and I want to perform an action for each item but I don’t care about a return value

**The wrong way:** use map, filter or reduce

Just like it is technically possible to use `forEach` for everything else, as we saw above, it is possible to use any of the other higher-order functions here, but it would not be the right tool for the job.

> “It is just semantics” is not a thing.

```javascript
const list = ['user1', 'user2', 'user3']

const newList = list.map(user => fireAndForgetNetworkRequest(user))

console.log(newList) // [undefined, undefined, undefined]
```

**The right way:** use forEach

```javascript
const list = ['user1', 'user2', 'user3']

list.forEach(user => fireAndForgetNetworkRequest(user))

// nothing to log
```

> **Hint**: If you can’t declare your variables with _const_ and you need to use _let_, you might be using the wrong method.

#### TL;DR;

![](https://cdn-images-1.medium.com/max/757/1*8AOqGSDe1pzNAb1nMrYOTA.png)

If you made it this far, hopefully, the post wasn’t too boring. Let me know in the comments if you disagree with anything or if you have some better examples that I haven’t thought of.

_Published: 10 May 2018_