In this article, we’ll discuss the
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.
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
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
The main difference between
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.
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,
Now, it boils down to this question: how should you decide whether to use the
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
Apart from this, the functions are very similar.
forEach. We went through the differences between them, along with a couple of real-world examples.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post