forEach() vs map() in JavaScript

Map() function

In JavaScript, the map function is a higher-order function that is used to create a new array by applying a provided function to each element of an existing array. The original array remains unchanged. The map function takes a callback function as its argument, and this callback function is applied to each element of the array.

Here's a basic syntax for the map() function:

let newArray = originalArray.map(callbackFunction);

Square of each elelment of an array

You can also use arrow functions for a more concise syntax:

forEach() method

In JavaScript, the forEach method is used to iterate over elements in an array. It provides a concise way to loop through each element of an array and perform a specified operation for each element.

Here's a basic syntax of the forEach() method:

array.forEach(function(currentValue, index, array){
// Your code here});

Here's an example:

What happen if we try to modify the array using forEach()

The output Will be undefined.

Correct approach of doing it.

When to use which

Your use case will determine whether to use map() or forEach(). The map() provides a new array containing the transformed data, thus you should use it if you intend to modify, alternate, or use the data.But instead of using map(), use forEach() if you won’t require the resulting array.

Comments

[mahdi]

It was a good comparison, but it could be better if there was a comparison between the filter map, because these two are similar, but they do different things!

[Dev Raj Sharma]

Thank you for your valuable input! I appreciate your suggestion to include a comparison between map() and filter() in addition to map() and forEach(). You're absolutely right, and it would certainly add more depth to the discussion. I'll make sure to cover that in a future blog post. Your feedback is instrumental in making the content more informative and engaging. Happy coding!"

[Harlin Seritt]

How does map compare to forEach in terms of speed? Also, is map or forEach any faster than using for (var of vars) ... ?

[Vishwas Kapte]

as per my understanding, map and forEach have negligible performance differences and are optimized by modern JavaScript engines. Choose based on your specific use case and desired outcome, not performance.

[José Pablo Ramírez Vargas]

Actually, the cost of calling the delegate in loop-powered helpers like forEach(), map(), filter() and the likes is far from negligible. If you have a large number of items, use a regular for loop.

This has been documented even here @ dev.to. I just don't have a bookmark on the article.