JavaScript: Map versus forEach
Tags: javascript, frontend, webdev
Published: 2022-04-30 15:20:15

---
title: JavaScript: Map versus forEach
published: true
description: When deciding between map and forEach, the first consideration should be a functional issue. The map function does not change the original data.
tags: JavaScript, Frontend, WebDev
series: JavaScript Details
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z69uhl0y4uxeahjou1iy.png
---

Based on this article [HERE](https://www.codespot.org/javascript-map-vs-foreach/)

## Definitions

`Array.prototype.map()`

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

[MDN Documentation HERE](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map).

`Array/prototype.forEach()`

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

[MDN Documentation HERE](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)

## Examples

```javascript
const test1Array = [1, 2, 3, 4, 5];
const new1 = test1Array.map((value) => value * 2);
console.log(test1Array, new1);

const test2Array = [1, 2, 3, 4, 5];
const new2 = test2Array.forEach((value) => value * 2);
console.log(test2Array, new2);
```

Looking that this code, the results for the first `console.log` look like this ...

```javascript
// [1, 2, 3, 4, 5] [2, 4, 6, 8, 10]
```

As we can see, the original array is the same and a new array is created.

The results for the second `console.log` look like this ...

```javascript
// [1, 2, 3, 4, 5] undefined
```

Here we can see that the original array is unchanged and nothing is returned from the function.

The `.forEach()` function can mutate the original array.

```javascript
const test3Array = [1, 2, 3, 4, 5];
const new3 = test3Array.forEach((value, index) => {
  test3Array[index] = value * 2;
});
console.log(test3Array, new3);
```

And now we can see that the original array has changed ...

```javascript
// [2, 4, 6, 8, 10] undefined
```

## Use Cases

### Functional Considerations

When deciding between `.map()` and `.forEach()`, the first consideration should be a functional issue. The `.map()` function does not change the original data. If there is a need to compare the before and after states, `.map()` would clearly be the better tool.

### Doing Something with Data Points

The `.forEach()` function may be preferable if there's no need to change the data in the array ... rather, there is a need to **do something** with the data (storing it in some way or logging it out).

### Changing Data Points

The `.map()` function might be the preferred choice when changing or altering the data.

Since a new array is created and returned, this provides a means of chaining methods, such as `.map()`, `.filter()`, `.reduce()`, etc.

## Speed

I have seen other articles that show `.map()` showing faster speeds in performance tests.

I decided to run my own.

```javascript
let test3 = [];
let test4 = [];
for (let i = 0, len = 10_000_000; i < len; i++) {
  test3.push(i);
  test4.push(i);
}

console.time('map test');
const new3 = test3.map((value) => value * 2);
console.timeEnd('map test');

console.time('forEach test');
test4.forEach((value) => value * 2);
console.timeEnd('forEach test');
```

The results here actually show map being slower ...

| Function | Time 1 | Time 2 | Time 3 | Time 4 | Time 5 |
|----------|--------|--------|--------|--------|--------|
| `.map()` | 196 ms | 190 ms | 150 ms | 160 ms | 150 ms |
| `.forEach()` | 113 ms | 111 ms | 111 ms | 116 ms | 110 ms |

Having tested the speed difference of these two functions, I can't remember ever having to use one over the other for performance differences.

## Conclusions

Basically, both functions do the same thing with slight variations on what is returned.

* `.map()` allocates memory, stores return values, and returns a new array.
* `.forEach()` throws away any returned values, returns `undefined`, and allows the original array to be mutated.