4 main differences between forEach() and map() you should know
Tags: javascript, beginners
Published: 2020-01-20 11:23:48

Originally posted on [my blog](https://www.ibrahima-ndaw.com/blog/4-differences-between-foreach-and-map/)

JavaScript has some handy methods which help us iterate our arrays. The two most used for iteration is `Array.prototype.map()` and `Array.prototype.forEach()`, however, they remain a little bit unclear, especially for a beginner. Because they both do an iteration and output something. So, what is the difference?

- [Definition](#definition)
- [1. The returning value](#1-the-returning-value)
- [2. Ability to chain other methods](#2-ability-to-chain-other-methods)
- [3. Mutability](#3-mutability)
- [4. Performance Speed](#4-performance-speed)
- [Final Thoughts](#final-thoughts)

## Definition

> The `map()` method creates a new array populated with the results of calling a provided function on every element in the calling array.

> The `forEach()` method executes a provided function once for each array element.

## 1. The returning value

The first difference between `map()` and `forEach()` is the returning value. The `forEach()` method returns `undefined` and `map()` returns a new array with the transformed elements even if they do the same job, the returning value remains different.

```javascript
const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.forEach(x => x * x)
//>>>>>>>>>>>>>return value: undefined

myAwesomeArray.map(x => x * x)
//>>>>>>>>>>>>>return value: [1, 4, 9, 16, 25]
```

## 2. Ability to chain other methods

The second difference between these array methods is the fact that `map()` is chainable, that's mean, you can attach `reduce()`, `sort()`, `filter()` etc. after performing a `map()` method to an array. That's something you can't do with `forEach()` because as you might guess it returns `undefined`.

```javascript
const myAwesomeArray = [1, 2, 3, 4, 5]
myAwesomeArray.forEach(x => x * x).reduce((total, value) => total + value)
//>>>>>>>>>>>>> Uncaught TypeError: Cannot read property 'reduce' of undefined
myAwesomeArray.map(x => x * x).reduce((total, value) => total + value)
//>>>>>>>>>>>>>return value: 55
```

## 3. Mutability

According to [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript):

> `forEach()` does not mutate the array on which it is called. (However, `callback` may do so).

> `map()` does not mutate the array on which it is called (although `callback`, if invoked, may do so).

_JavaScript is weird_.

![Gif](https://media.giphy.com/media/KWn5YHuCzP3FK/giphy.gif)

Here, we see a very similar definition, and, we all know that they both receive a `callback` as an argument, so, which one relies on immutability?

Well, in my opinion, this definition is not clear though. And to know which does not mutate the original array, we first have to check how these two methods work.

The `map()` method returns an entirely new array with transformed elements and the same amount of data. In the case of `forEach()`, even if it returns `undefined`, it will mutate the original array with the `callback`.

Therefore, we see clearly that `map()` relies on immutability and `forEach()` is a mutator method.

## 4. Performance Speed

Regarding performance speed, they are a little bit different. But, does it matter? Well, it depends on various things like the computer, the amount of data, etc. You can check it on your own with this example below or with [jsPerf](https://jsperf.com/) to see which is faster.

```javascript
const myAwesomeArray = [1, 2, 3, 4, 5]

const startForEach = performance.now()
myAwesomeArray.forEach(x => (x + x) * 10000000000)
const endForEach = performance.now()
console.log(`Speed [forEach]: ${endForEach - startForEach} miliseconds`)

const startMap = performance.now()
myAwesomeArray.map(x => (x + x) * 10000000000)
const endMap = performance.now()
console.log(`Speed [map]: ${endMap - startMap} miliseconds`)
```

# Final Thoughts

As always, the choice between `map()` and `forEach()` will depend on the use case. If you plan to change, alternate or use the data, it's preferable to pick `map()`, because it returns a new array with the transformed data. But, if you won't need the returned array, don't use `map()`, instead use `forEach()` or even a `for` loop.

Hopefully, this post makes clear the differences between these two methods. If there are more differences, please share them in the comment section, otherwise thanks for reading it.

| [TWITTER](https://twitter.com/ibrahima92_) | [BLOG](https://www.ibrahima-ndaw.com/) | [NEWSLETTER](https://ibrahima-ndaw.us5.list-manage.com/subscribe?u=8dedf5d07c7326802dd81a866&id=5d7bcd5b75) | [GITHUB](https://github.com/ibrahima92) | [LINKEDIN](https://www.linkedin.com/in/ibrahima-ndaw/) | [CODEPEN](https://codepen.io/ibrahima92) | [DEV](https://dev.to/ibrahima92) |
| -------------- | ------------------------------------------ | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------ | ---------------------------------------- | -------------------------------- |

Photo by [Franck V.](https://unsplash.com/@franckinjapan?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/different?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)