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.
Array/prototype.forEach()
The .forEach()
method executes a provided function once for each array element.
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, returnsundefined
, and allows the original array to be mutated.
Top comments (0)