Table of contents
forEach() and map() are used similarly in JavaScript but they have some big differences that are worth noting.
Both can execute a callback function on each element in an array. This is incredibly useful in a lot of situations so they come in handy often. You will need to decide which is best for each situation, though. So what are the differences?
forEach()
forEach() returns a value of “undefined” but when it takes in a callback function as an argument it mutates the array.
We can see that in this example:
let animals = ["tigers", "lions", "bears"];
animals.forEach(function(animal) {
return "scary" + animal;
});
//Output: undefined
//animals = ["scary tigers", "scary lions", "scary bears"];
The output is undefined. But the callback function inside the forEach() method mutates the “animals” array to add “scary” to each of the elements in the array.
The original “animals” array with only the animal name elements is no longer accessible to us since it has been mutated.
map()
Whereas map() executes a callback function on each element and "maps" the results to a new array. Let’s see this below:
let animals = ["tigers", "lions", "bears"];
let cuddlyAnimals = animals.map(function(animal) {
return "cuddly" + animal;
});
//Output: ["cuddly tigers, cuddly lions, cuddly bears"]
//animals = ["tigers", "lions", "bears"];
Here the callback function adds “cuddly” to each of the elements and the map() method produces a new array with the updated elements.
The original array still exists and can be accessed.
Let’s get dumb.
A silly way to remember this is to think of a treasure map. In movies, treasure maps are always depicted as frail and crinkly. If you tried to write new coordinates on it you would likely tear it.
So it would be better to create a copy of the map and add the new updates to it.
map() creates a new array and copies the updated elements to it.
Ch-ch-chaining
Map() can be chained. forEach cannot.
Why is that? Remember we said forEach mutates the array but returns “undefined.”
So in an instance like this:
const Arr = [1, 2, 3, 4, 5]
Arr.forEach(x => x * x).reduce((total, value) => total + value)
// Uncaught TypeError: Cannot read property 'reduce' of undefined
forEach returns “undefined” and the chained methods that follow cannot run on “undefined.”
Whereas map() returns a new array and chained methods CAN run on that array. Like here:
const Arr = [1, 2, 3, 4, 5]
myAwesomeArray.map(x => x * x).reduce((total, value) => total + value)
//return value: 55
Let’s get dumb again.
A silly way to remember this is to think of a pirate. Pirates have to use chains on their pirate ships.
Pirates have treasure maps and use chains.
map() can be chained. forEach() cannot.
Arrrrrrre you able to tell difference between how map() and forEach() function now?
Feel free to check out this video where I explain the topic further.
Thanks for reading and please let me know if you have any questions!