DEV Community

4 main differences between forEach() and map() you should know

Ibrahima Ndaw on January 20, 2020

Originally posted on my blog JavaScript has some handy methods which help us iterate our arrays. The two most used for iteration is Array.prototyp...

Read full post

Richard Lenkovits • Jan 20 '20

I love this kind of small informative articles.

Ibrahima Ndaw • Jan 20 '20

Glad you like it.

Samuel Lowry • Jan 20 '20

Liked the post. I think the easiest point for me to remember the difference is how I would use the two function names in a sentence. For a .map() example, "I'm going to this new land area out." This sentence implies the production of some item, a new map of a new land area. Just like the function .map(), we will have a new item mapped out after the action is done. For forEach(), "For each lemon I have, I'm going to cut it in half." Here for each implies that I'm going to perform an action on each individual lemon. Just like the function call itself.

For most function names I try to do some kind of relation to their context in a sentence.

After all, I bet there was probably a bit of though that was put into the naming of these functions by the JS architect who designed them.

😁😁

Ibrahima Ndaw • Jan 20 '20

😂😂The way of differentiating thing is just funny. I should give it a try.

Sebastian Vargr • Jan 20 '20

Did not read the article, but the title reminded me of code I found were people used map instead of foreach.

Which whenever it happens makes me want to headbut my screen in excited anger.

I’ll read the article now, but my bruised forehead wants to thank you in advance.

Ibrahima Ndaw • Jan 21 '20

Thank you so much. Hopefully, you'll find value on it

Brian • Jan 20 '20

Great article I have found mdn is great but sometimes you get those really vague explanations of things. MDN is also not the end all be all it's kind of like the wikipedia of Js css etc. I say that because it's editable by you and my right now. Sometimes there is validation of what you say is true when you are putting it in but not when I updated some css docs.

Ibrahima Ndaw • Jan 20 '20

I totally agree. Sometimes, things become clear once you test it by yourself. But overall, MDN is great.

Casper • Jan 20 '20

I would like to clarify that, regarding point 1, map() and forEach() do not expect the same type of functions. forEach() expects a function that takes in one argument and returns nothing. Passing in the function x => x * x wouldn't even be valid in many other languages with a similar function. map() instead expects a function that takes in one argument and returns a new value of any type.

Since forEach() is a void function (undefined in JS) it should preferably only be used for IO operations where no return value is expected (eg. changing the DOM or printing to console).

Ibrahima Ndaw • Jan 20 '20

Thanks, for your comment I intentionally use the same example for both map and forEach to just not confuse folks. But, if you read my final thought, you'll see that map is all about transforming data, and this example should be done with map.

MarieWie • Jan 21 '20

Thank you for the very handy article and the great explanation. I am just learning about both these methods for the first time, and while I assumed there was at least one difference (why else have two methods), the tutorial I am following and MDN unfortunately were both rather vague on the matter. So this was a great explanation that came at exactly the right time. Thanks for writing it.