DEV Community

.map() vs .forEach()

Tori Crawford on June 03, 2019

I am creating this quick explanation of the differences between using .map() and .forEach(), because I originally had a difficult time understandin...
Collapse
 
seangwright profile image
Sean G. Wright • Edited

Another thing I point out to devs new to javascript is the callback passed to forEach is necessarily an impure function since it doesn't return anything.

If a dev sees it in code they should assume it is mutating state.

Whereas, although map can be abused to mutate state, since it always returns a new array, its design implies its callback is a pure function.

map and filter are best treated as using pure functions.

Because forEach doesn't work how the above two array methods work, I tend to avoid using it altogether and instead use the modern for ... of iteration approach when I need to mutate state.

Thanks for writing this comparison. I've seen many devs get confused about this stuff 👍

Collapse
 
cbsmith profile image
Christopher Smith

Implies is a strong word... I'd say, "allows for". Per the ECMA standard, map() guarantees invocation order against the elements of the array, something that would be unnecessary to specify in a function that implies a pure function callback.

The standard itself explicitly says that while map doesn't mutate the object on which it is called, the callback function may mutate it (not just any old side effect here like console.log(), but a mutation of the object being called)... and there's an odd rule that if you delete an element from the array during the invocation of map(), but before map visits that element, that element will not be visited.

Sure, it's better style if it is pure, but the implication, if anything, is that it may be impure.

Collapse
 
seangwright profile image
Sean G. Wright

Those are good points.

In much of the code I see, map and filter are used with pure functions.

So, despite what the language allows, the use of them implies pure functions in my experience.

Following this pattern means you don't have to worry about the scenario you describe.

Collapse
 
voidjuneau profile image
Juneau Lim

I wish that you have written this post just a week earlier. My life would be so much easier. Amazing post!

Collapse
 
torianne02 profile image
Tori Crawford

I'm sorry I wasn't there in time to save you! haha.

Collapse
 
fc250152 profile image
Nando

thank you very much, Victoria, for your extremely clear explanation. I would say that a functional programming style is ever a good choice, so I vote "map" for President! Have a good week end :)

Collapse
 
torianne02 profile image
Tori Crawford

You're welcome and thank you for commenting and adding some lovely humor. haha! I hope you also have a great weekend.

Collapse
 
robifis profile image
Bobby Olejnik

Thank you so much for explaining it this way. I've sort of always understood the difference but now it makes a lot more sense.

Collapse
 
ctrlaltkris profile image
ctrlaltkris

Hi Victoria, thank you so much for this, it definitely helped me understand both methods a lot better. One thing i'm having difficulty understanding is how forEach is able to push the result into the result array, if it returns undefined?

Collapse
 
seanolad profile image
Sean

If I was a JS newbie I would have needed this

Collapse
 
iamksam profile image
ɯɐSʞɯɐᴉ

Oh wow thank you! I've always completely ignored learning map in any language because I had foreach but this is a great straight forward explanation
Time to look over my old code 😁

Collapse
 
dergonokay profile image
DERGON • Edited

Also in java forEach is a terminal operation that closes the stream when it finishes. In the other hand, the map as in js it returns a new stream with the result of the mapping.

Collapse
 
andy1 profile image
Andy

Really clearly explained, well done!

Collapse
 
torianne02 profile image
Tori Crawford

Thank you!!

Collapse
 
cemkaanguru profile image
cem kaan kosali

I think I will tweet this post a few more times.