JavaScript Map vs ForEach Method

Every web developer has probably come across to of JavaScript map() and forEach(), two of the most widely used methods in programming. In this article, we will discuss the map() and forEach() method, the differences and usages between two in the JavaScript programming language.

Map and ForEach Definition

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

Now let's understand what is going on in these two statements.

The map() method calls a provided function on every element that it is in the array. The difference from the forEach() method is that the map() method utilizes return values and also returns a new array of the same size.

The forEach() method doesn't return anything, but it simply calls a provided function on every element in the array, also this callback can mutate the calling array.

Understanding from definitions can be a bit difficult, now let's see some code examples.

Let's say we have an array with the name "exampleList" and perform both the map and the forEach methods on this array, and see the differences between these two methods at the end.

let exampleList = [1, 2, 3, 4, 5]

Array.prototype.map() Example

exampleList.map(num => {
    return num * 2;
});

In the code above, we are doing nothing more just multiplying each element of the "listArray" with the 2, which at the end we have a new array called "mapListResult", having the same size as the previous one.

Result:

2, 4, 6, 8, 10

Array.prototype.forEach() Example

exampleList.forEach((num, index) => {
    return exampleList[index] = num * 2;
});

In the code above we are doing the same thing as with the map() method but this time we are using the forEach() method.

2, 4, 6, 8, 10

When to Use Map and ForEach Method

We have seen the implementation between these two methods, which will give you a better picture of both of them. Now about the usage, if your only purpose is to iterate the array and perform some operations on the elements, it is better to use the forEach() method. On the other hand, if you need to transform the elements from the array then you should use the map() method, also if you want to filter the data after modifying it, map() method is better option, because it will create a new array, and you can perform operations on it.

If you like functional programming, using map() method may be preferred, this is because the ForEach will affect and changes the original array, where Map returns an entirely new array without modifying it.

Which one is faster Map or ForEach Method

In development, we should always keep in mind the performance or speed factor for performing some operation of the code. Now let's see which one is the faster the map() or forEach() method.

map() method is faster then forEach() method in terms of speed. In practice you shouldn't be using the forEach() method until the map() method cannot do the required task.

Both map() and forEach() methods are worse then the standard for() loop when the speed is considered. But sometimes we may want to sacrifice speed for better code readability (cleaner code).

Conclusion

We have seen implementation and key differences between the Map and ForEach methods in JavaScript, I hope now you understand how and when to use these two methods in your projects. If you find this article helpful to you please share it, and thanks for reading.