Javascript

JavaScript map() vs forEach() Methods

Google+ Pinterest LinkedIn Tumblr

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() defination

  • 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 above two statements. map() method calls a provided function on each element of the provided array and returns a new array of 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 of 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 element 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 its create a new array and we are free to perform any operation on that new array.

What about speed?

In the real time development, we always keep 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 untill or unless other methods can not do the things which you wanted.

One thing to note here, both map() and forEach() methods can not beat the vanila 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 to use 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.

1 Comment

  1. Sean Inglis Reply

    The rule I apply in code review is that .map should *only* be used to return a transformed array, and should be free of side-effects, whereas .forEach can do whatever the hell it likes in it’s loop

Write A Comment

Pin It