map() v/s forEach() array function Comparsion

This article is all about a comparison between the JavaScript Functions available, which operate on the array only.

Function Overview :

Array.map()

The map function iterates over a given array and returns the newly created array:

let array = [1, 2, 3];
array = array.map((item) => {
  return item * 2;
});

console.log(array);  //output : [2, 4, 6]

Array.forEach()

This function allows you to iterate over an array without returning an altered version of the array i.e. basically it doesn't return the new array.

const array = [1, 2, 3];
array.forEach((item) => {
 return item * 2; // effectively, this operation does nothing
});

console.log(array);  //output: [1,2,3]

As you can see from above, both functions return a different output, at all one returns a new array by completely manipulating the original array while forEach only iterates over an array without manipulating any items from the array.

From the above we get the two basic differences between this two functions as mention below.

Return value of Both Functions :

1. map() returns a new array containing the results of applying the provided function to each element in the original array.

2. forEach() does not return anything (or returns undefined); it simply iterates over the array elements and applies the provided function.

Use Case of Both Functions:

1. Use map() when you want to transform each element of an array and create a new array based on the transformation.

2. Use forEach() when you want to iterate over each element of an array without creating a new array.

Performance comparison of Array.forEach() and Array.map() :

Now, that we have seen and understood the basic difference between the two functions let's now Compare how the performance of these two functions looks like, Do you want to know what the performance impacts are for these two functions?

A quick comparison on jsben.ch suggests that forEach is faster when iterating over an array that contains 1000000 numeric values.

For te BenchMark Comparision we will take this code a benchmark for testing the performance.

// map benchmark code (code block 1)
array.map(item => item * 2);
// forEach benchmark code (code block 2)
array.forEach(item => item * 2);

From the above comparison of both the codes, during the first testing, we see that forEach() outperforms the map()

However, if we want to keep the comparison fair, we'll have to get the same result for both benchmarks.

Remember, map returns an altered version of the original array. In this case, it multiplies each value with 2.

To achieve the same with the forEach function, we'd have to create a new array to which we push each result:

// map benchmark code
array.map(item => item * 2);

// forEach benchmark code
const result = [];
array.forEach(item => result.push(item * 2));

From the above comparison, of the two functions by changing the benchmark code we see a clear difference in performance as map() out-performs forEach() in this fair benchmark comparison.

Which one should you use?

From the above, I have already mention depending upon the use Cases which function would be suitable for the usage by keeping in mind the performance factor also.

Having the performance benchmarks in mind, you should use the function that suits your use case the best.

Do you want to change each value of the array and also want the newly created array as a return value? Use map.

Do you want to do other operations for each of the values of a given array by simply iterating over the given array? Use forEach.

It doesn't make sense to use map if you don't want to change the array, and forEach if you want to change each value. As we saw, performance will suffer and the readability of your code as well.

Conclusion:

From this article, you should now have a clear understanding of what is the main difference between the two important array functions i.e. forEach() and map() and you also have a clear understanding of which function to use depending upon the use Cases and the performance factor of the two functions.

Further to summarize this article, the map() function returns a new array while forEach() does not if you want to perform an operation on an array and return the modified array, you should use map(). If you simply want to loop over the array and do something with its elements, use forEach().

I have learned a lot about this topic from the internet and also advise you the same for more exploring and deep diving, do reply and comment on this article for better sharing and good content creation.

References:

Array.prototype.map() - JavaScript | MDN

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

developer.mozilla.org

Array.prototype.forEach() - JavaScript | MDN

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

developer.mozilla.org