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);

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

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

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

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

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

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.