JavaScript: Comparing Map() and forEach() Array Methods

Photo by Jason Dent on Unsplash

Two array methods that can be easily mixed up are map() and forEach(). Keeping track of the differences between the two can be a little murky — but each has distinct advantages that can make them ideal for certain situations!

When you’re choosing an array method, the first thing to think about is what you need to get back after it executes. Do you need a new array? Do you just want single items? What will allow you to do the next things that you need to do?

map() and forEach() both iterate over an existing array, and they both perform the provided function once for every item in that array. But they’re more like fraternal twins than identical twins!

Syntax

Here’s the syntax for map():

const localFruits = ["apple", "pear", "strawberry"];
const mapFruit = localFruits.map(fruit => console.log(fruit));

Here’s the syntax for forEach():

const fancyFruits = ["papaya", "dragonfruit", "mango"];
const eachFruit = fancyFruits.forEach(fruit => console.log(fruit));

Yep, eagle eyes, the syntax follows the same pattern! Both take an argument that represents each current array item — in this case, I’ve called it fruit from my array of fruits. I could have called it x or item, but there needs to be an argument passed in.

Returning Value

• map() iterates over the original array and returns a brand new array.
• forEach() returns undefined. Always, forever.

Why would you use forEach() if it doesn’t return anything? Well, forEach() is great for doing things — like printing items to the screen or adding items to a list. I think of it as the Marie Kondo of array methods — it touches the item once, performs the required action, and then promptly forgets about it. Nothing is stored in memory with forEach(), so it doesn’t create unnecessary memory pressure; map() allocates memory and stores return values.

Chainability

Calling one method after another in a continuous line of code is called chaining, and it can make your code more efficient and readable. (There’s a threshold where this becomes untrue and looping instead of chaining is a better option, but in general terms, if nobody gets too carried away, chaining is a good thing.)

• map() is chainable, and can pass its new array to another chained method.
• forEach() is not chainable. It holds nothing in memory so has nothing to pass to the next method.

Mutability

What happens to the original array after your method is executed?

• map() does not mutate the original array; it creates a new array and leaves the original alone.
• forEach() does not mutate the original array; it performs the requested action on each array item and leaves the original alone.

So really?

The fundamental difference between the two is that map() returns an array of values, and forEach() returns undefined. Because map() provides a return, you’re able to chain it (which you can’t do with forEach()). The one that is best to use will depend on the output that you’re looking for!