If you are working in the javascript for a while then you have probably come across the most widely used method of javascript map() and forEach(). Apart from this, there are so many methods available in the javascript for array and string which is widely used by the programmers as per the requirement. In this article, we are going to discuss the differences and usages of the javascript map() and forEach() method.

map() and forEach() definition

  • map(): creates a new array with the results of calling a provided function on every element in this array.
  • forEach():  executes a provided function once for each array element.

Now let’s understand the meaning of the above two statements. map() method calls a provided function on each element of the provided array and returns a new array of the same size or new size while forEach() method doesn’t return anything, its simple calls the provided function on each element of the array.

Ohh!!! It’s too hard to understand without the examples, so let’s understand both methods with an example.

Let us consider an array name with exampleArray and perform the map and forEach methods on this array and see what is the differences between these two methods results.

let exampleArray = [2,3,4,5,6,7,8];

Array.prototype.map() example

let mapArrResult = exampleArray.map(num => {
    return num * 2;
});

console.log(mapArrResult);

In the above code, we are multiplying each element of the array exampleArray with the 2 which result in a new array mapArrResult with the same size as the previous one.

Result:

4,6,8,10,12,14,16

Array.prototype.forEach() example

forEachArrResult = exampleArray.forEach(num => {
     return num * 2;
 });
console.log(forEachArrResult);

In the above code example, we are doing the same thing which we have done for map() method but this time we got undefined as a result.

Result:

undefined

Hope you understood the main key difference between these two methods of the javascript and the statements which you read earlier during this article. You can check the result of the example uses in this article by using this online javascript editor.

Which Is Better and When to Use them?

Till now, we only see what is the main difference between these two methods and which clears most of the picture of their usage.

If your purpose is to only iterate the array and perform some operation on each element like saving it into the database then it will be better to go with .forEach() method and if your purpose is to transform the elements of the array then it will be good to choose .map() method. If you want to filter your data after modifying it then .map() is the good option because it creates a new array and we are free to perform any operation on that new array.

What about speed?

In real-time development, we always keep the speed factor main key point of the code. So which one is good in terms of speed performance.

map() methods beats the forEach() in terms of speed also. In reality, you shouldn’t be using the forEach() methods until or unless other methods cannot do the things which you wanted.

One thing to note here, both map() and forEach() methods cannot beat the vanilla for() loop in terms of speed. But sometimes we wanted to write our code in a way so that it could be easily readable for everyone and that’s why most of the programmers or developers avoid using for loop.

Conclusion

This is all about the map() vs forEach() methods of the javascript. Hope you now understood when and how to use these two methods in your code. If you want to read more methods of javascript for array or string then you can follow this link.

Hope this article is helpful for you. If you have any suggestions or doubt then please comment below.

Pin It