.map() vs .forEach()

I am creating this quick explanation of the differences between using .map() and .forEach(), because I originally had a difficult time understanding the fundamental reasons why you would want to use one over the other. I thought that you could use them interchangeably and it wouldn’t be a huge deal, but I was wrong.

I personally know that while learning a new language, it is always these small details that really throw you for a loop, so I want to make this explanation as quick and simple as possible, so that it is easy to understand!

Let’s get started.

.forEach()

.forEach() is an array iterator that executes a function (provided by you, the dev) once per each element within a given array. This means that we, as devs, get to provide a function that we want to be used on each element of the array. Let’s say that we have an array of dogs and we want each dog to get a treat. We can do this by executing the following code:

var dogs = [“Spot”, “Buddy”, “Princess”]

dogs.forEach(function(dog) {
  console.log(dog + “ has eaten the treat!”)
});

// “Spot has eaten the treat!”
// “Buddy has eaten the treat!”
// “Princess has eaten the treat!”

console.log(dogs) // [“Spot”, “Buddy”, “Princess”]

As you can see, we had each element of the array plus the statement “has eaten the treat!” printed to the console. I must note at this time that while it does print these statements to the console, what is being executed in the function is not saved anywhere. The original array is not being manipulated, nor is a new array being created. Which is why when I call dogs, it returns the original array completely unharmed!

If you wanted to save the results of the function, then you would need to do so manually. I can save all of these statements by simply creating a new array and pushing to this new array within the function, like so:

var dogs = [“Spot”, “Buddy”, “Princess”]
var result = []

dogs.forEach(function(dog) {
  result.push(dog + “ has eaten the treat!”)
});

console.log(result) // [“Spot has eaten the treat!”, “Buddy has eaten the treat!”, “Princess has eaten the treat!”]

.map()

.map() is similar to .forEach() because they are both array iterators that execute a provided function on every element within the given array. Now the big difference between the two, is that with .map() we don’t need to tell our function to add every element to a new array like we do with .forEach(). With .map() it creates a new array out of the results of the given function without harming the original array. In other words, .map() allows us to transform the elements within an array, but in order to save this result we still need to set the .map() statement to a new variable. Let’s take our dogs example again and we will make each dog play fetch.

var dogs = [“Spot”, “Buddy”, “Princess”]

var result = dogs.map(dog => dog + “ has fetched the ball!”);

console.log(result)  // [“Spot has fetched the ball!”, “Buddy has fetched the ball!”, “Princess has fetched the ball!”]
console.log(dogs) // [“Spot”, “Buddy”, “Princess”]

Notice how result is now an array of strings and dogs remains in its original condition.

Final Thoughts

If you want to iterate over an array without needing the results of the function to be saved, then I suggest using .forEach(). Opposite of this, if you need the results of the function in order to execute other code that depends on it, use .map().

Sources

Array.prototype.map()
Array.prototype.forEach()
Why and when to use forEach, map, filter, reduce, and find in JavaScript