forEach() vs map() in JavaScript
How are they different?
Nothing brings me greater joy than finding innovative and reliable solutions to complex problems. I love that software engineering asks each of us to show up each day and unlock a new piece of the puzzle.
Prior to web development I ran my own successful e-commerce brand for over a decade. During that time I learned communication is important above all - both amongst team members and with customers. Communicating more effectively required me to dig deeper into the technologies we used which began my passion for software engineering.
When I am not coding you can find me tending to my garden, engrossed in a novel, or hiking the beautiful mountains of Southern Arizona.
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!
