DEV Community

Cover image for JavaScript: Map versus forEach
bob.ts
bob.ts

Posted on

JavaScript: Map versus forEach

Based on this article HERE

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.

Array/prototype.forEach()

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

MDN Documentation HERE

Examples

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);
Enter fullscreen mode Exit fullscreen mode

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

// [1, 2, 3, 4, 5] [2, 4, 6, 8, 10]
Enter fullscreen mode Exit fullscreen mode

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 ...

// [1, 2, 3, 4, 5] undefined
Enter fullscreen mode Exit fullscreen mode

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.

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

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

// [2, 4, 6, 8, 10] undefined
Enter fullscreen mode Exit fullscreen mode

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.

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');
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)