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, and thus 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 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 would 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 which 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 immutable method.
Let’s revise the example which we’ve just discussed in the previous section with the map counterpart.
As you can see, the numberArray
array remains unchanged but 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.
Chaining map
Differences Between the map
Vs 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 to decide whether you should use the map
or forEach
method?
If you’re planning to alter the array elements by applying some 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 it 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.
No comments:
Post a Comment