When not to use forEach()
Tags: javascript, beginners
Published: 2023-01-05 22:41:41

The first phase of my coding boot camp was a doozy. I learned early and fast that documentation is my best friend as a newbie developer (and I do suspect we will grow old together). I looked at my google search history and I found I was a frequent flier on all the array iterator MDN pages. They were SO helpful, but more than once I found myself building functions to do exactly what they do. On top of their functionality, I had to get better at recognizing when to use which one and more specifically, when not to use `forEach()`.


##  forEach()
 
Like I implied, `forEach()` was my catch-all. It was the enabler to my "I want to take the ugly long way, and maybe not even get where I'm going" habit. Don't get me wrong, once I stopped abusing our friendship `forEach()` and I got on great. It is particularly useful when you want to perform an action on each element of an array, but you don't need to return a new array or you want to update the elements of the original array.
 
 Here is an example: 

![forEach](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0k1t0cyfn8jkdghrr9l.png)

You can see the original array was destructively updated.

Something to note is that the return value of `forEach()` is undefined. Therefore, in the example above, had we saved it to a newArray variable, the value of that new variable would be undefined.

![forEach undefined](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxqek5gbwiyiiw4auz1v.png)

If you find yourself returning a value in your `forEach()`, it can be a helpful clue to another method you can use to do some work for you and make your code a little cleaner and more expressive.

## .map()

If you are returning an array in your `forEach()`, you may be better off using `map()`.

The `map()` array iterator applies a function to each element of an array and returns a new array with the results. The original array is not modified.


![.map](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h34qektvy2olzmy89u5p.png)

A critical step I missed in the beginning (as in, two weeks ago- I've grown so much) was the necessity of saving the `.map()` to a variable to use later. Like this:

![.map variable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1j9ov22wm6v02zjv5nn7.png)

Applying `map()` returns the new array and assigning it to a variable lets you use it later on. If you didn't save it to a variable, did you even `map()`?

## .find()

Next, if your `forEach()` has an if statement that returns the item try using `find()`.

`find()` returns the value of the first element in the array that passes the test implemented by the provided function. If no element passes the test, it returns `undefined`.

![.find](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7bo4qvnzuhmeogm5mh6j.png)

You can also use `find()` when you want to find an element in an array based on its properties. For example, the following code uses `find()` to find the first user in an array of users with a certain name:

![find 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dztegfgldx7vydw63wxl.png)

In general, you should use the `find()` array iterator when you want to find the first element in an array that satisfies a certain condition, and you only need to return the value of that element.

## .filter()

If your `forEach()` contains an if statement that pushes the element to a new array, you've done a lot of work but you could have used `filter()` instead.

`filter()` creates a new array with all the elements that pass the test implemented by the provided function. If no element passes the test, it returns an empty array.

You can also use the `filter()` array iterator when you want to filter an array based on the properties of its elements. For example, the following code uses `filter()` to get all the users from an array of users who are over 30 years old:

![filter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqbwn0a139bylkbr6y7b.png)

## .reduce()

The last method we'll look at (there are more), is `reduce()`. If your `forEach` is returning the sum or product of an array, this method is for you.

The `reduce()` array iterator executes a reducer function (that you provide) on each element of the array, resulting in a single output value. The reducer function takes four arguments. The first argument is the accumulator, which "accumulates" all the return values after the reducer function is invoked. The second argument is the current value you are working with and the last two arguments are optional (the current index and the array).

![.reduce](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9b4auds5wk6ohlvnxam.png)

## Resources

[forEach()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
[.map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
[.find()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
[.filter()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
[.reduce()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)