In this article, we’ll discuss the map and forEach methods in JavaScript, and we’ll also go through the differences between them to understand when to use each one.
JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern web browsers support it without the need for plugins. In this series, we’re discussing different tips and tricks that will help you in your day-to-day JavaScript development.
As a part of your day-to-day JavaScript development, you often need to work with arrays. And when you’re working with arrays, you often need to process array elements, so you need a way to loop through each element of an array. In JavaScript, forEach and map are two of the most popular methods to work with arrays. The primary purpose of both these methods is to iterate through arrays. Although they may look almost identical, there are certain differences between them. map is used to transform each element of an array, while forEach is used to run a function on each element without changing the array.
In this post, we’ll discuss both these methods along with a couple of real-world examples. At the end, we’ll also discuss the differences between both these methods. By the end, you'll understand better when to use each one.
The forEach Method
The forEach method allows you to execute a function by iterating through each element of an array. It’s important to note that the forEach method doesn’t return anything, and thus, if you try to get the return value of the forEach method, you will get undefined. Instead, it allows you to modify the values of an existing array by applying the callback function on each element of an array. Since it allows you to modify the source array itself, it’s a mutator method.
Let’s have a quick look at the following example to understand how the forEach method works.
As you can see, we’re calculating the square of all elements of an array. The forEach method is called with each element, and we log its square. The return value of this helper method is ignored, and the original array doesn't change. The return value of forEach is always undefined.
The map Method
The map method is very similar to the forEach method—it allows you to execute a function for each element of an array. But the difference is that the map method creates a new array using the return values of this function. map creates a new array by applying the callback function on each element of the source array. Since map doesn't change the source array, we can say that it’s an immutable method.
Let’s revise the example that we discussed in the previous section with the map counterpart.
As you can see, the numberArray array remains unchanged, but the return value of the map is a new array which is built by applying the square function to each element of the array.
A great thing about the map function is that it's chainable. This means you can call a number of map operations in a row. Here's an example of chaining where we multiply each number by 2, convert them to strings, and then put a dollar sign on each one.
Differences Between the map and forEach Methods
The main difference between map and forEach is that the map method returns a new array by applying the callback function on each element of an array, while the forEach method doesn’t return anything.
You can use the forEach method to mutate the source array, but this isn't really the way it's meant to be used. Instead, it's great for when you need to do some action with each element of the array.
On the other hand, the map method is used for creating a new array, and thus, it’s chainable. You can call a number of map operations one after the other.
The forEach method doesn’t return anything, so you can’t chain it with any other methods—it’s not chainable.
Which One Should I Use, map or forEach?
Now, it boils down to this question: how should you decide whether to use the map or forEach method?
If you’re planning to alter the array elements by applying a function, you should use the map method, since it doesn’t modify the original array and returns a new array. In this way, the original array is kept intact. On the other hand, if you want to loop through all the elements of an array and don’t need a returned array, use the forEach method.
Apart from this, the functions are very similar.
Conclusion
Today, we discussed two useful methods in JavaScript: map and forEach. We went through the differences between them, along with a couple of real-world examples.
