DEV Community

Cover image for Map/Filter/Reduce Crash Course

Map/Filter/Reduce Crash Course

Chris Achard on September 17, 2019

This was originally posted as a Twitter thread: https://twitter.com/chrisachard/status/1173750491458789378 Have you heard about map, filter, and r...
Collapse
 
kasra6 profile image
kasra6 •

Thank you for your clear voice and explanation. Map and filter was easy to understand at least at this stage, but I couldn't digest reduce. like what is the previous loop and next element!
Anyway this article was really useful. Thank you

Collapse
 
thesnups profile image
Daniel Worsnup •

Great summary! I wrote about reduce recently as well: dev.to/worsnupd/everything-you-nee... It's cool to see how a lot of Array prototype methods are just special cases of reduce.

Collapse
 
chrisachard profile image
Chris Achard •

Yep! reduce is super powerful (which is why it can be so confusing!)

Collapse
 
brewsterbhg profile image
Keith Brewster •

This is a great breakdown, another big benefit (which you mentioned near the beginning) is that it returns you a new instance of an array instead of mutating the original one.

Collapse
 
chrisachard profile image
Chris Achard •

Yes, definitely - I didn't have the space to really expand on that (maybe a part 2!), but these three really shine when you want to not mutate data.

Collapse
 
banjoanton profile image
Anton Ödman •

I love your articles!

So concise, well written and easy to follow, great work! 👏

Collapse
 
chrisachard profile image
Chris Achard •

Thanks! It's fun to try to break something down to just a few points. I always end up learning a ton myself while writing them 😃

Collapse
 
frontendengineer profile image
Let's Code •

Hi Chris, going to include the youtube channel I just created to help the community as well if you do not mind. I am trying to release one vid a week. Thank you and this article is a great crash course indeed. I can see enormous time and effort you put in.

youtube.com/channel/UCFIwa5Eqf4kN1...

Collapse
 
feralamillo profile image
Feralamillo •

Very nice article Chris!! It's great how you have summarized these 3 methods that can make it easily for developers.

Collapse
 
chrisachard profile image
Chris Achard •

Thanks! Glad you liked it :)

Collapse
 
jasterix profile image
Jasterix •

This is such a great summary. I'm a bit late to using reduce, but as I use it more, I'm realizing how powerful it is

Collapse
 
chrisachard profile image
Chris Achard •

Thanks! Glad it was helpful.

Exactly: reduce is something that I thought wasn't great, UNTIL I started just using it. Now I use it all the time! It's really great for condensing a lot of logic down into just a few lines.

Collapse
 
malloc007 profile image
Ryota Murakami •

Thank you for write it!!
I still confuse about Array.prototype.splice() 😅

Collapse
 
chrisachard profile image
Chris Achard •

Yeah, splice is confusing :) Maybe I'll try to do a writeup on that in the future!

Collapse
 
pterpmnta profile image
Pedro Pimienta M. •

Great article, good expliation and the images help to much.

Collapse
 
valerioneri profile image
Valerio •

Thank you, that's a great overview!

Collapse
 
itsraghz profile image
Raghavan alias Saravanan Muthu •

Awesome post Chris. Loved the way you presented. looking forward to the other posts of you! :)

Collapse
 
chrisachard profile image
Chris Achard •

Thanks!

Collapse
 
mblancodev profile image
Manuel Blanco •

Great explanation! Hope to keep seeing posts like this in the future :)

Collapse
 
ebnbatran profile image
Ebrahim Batran •

I'm forwarding this to anyone who's still confused. It's the best!

Collapse
 
scrabill profile image
Shannon Crabill •

I keep forgetting how map, etc works and have referred to this resource at least 5 times already. It is very helpful!

Collapse
 
iftikhar profile image
iftikhar hussain •

Hey, A great knowledgeable post, Thanks
Can you please tell me the name of your editor font ? i really like that

Collapse
 
chrisachard profile image
Chris Achard •

Glad you liked it!

It's the "Menlo" font :)

Collapse
 
yoramgondwe profile image
YoramGondwe •

Thank the explanation is really clear

Collapse
 
nvminhtu profile image
Tu Nguyen •

It is very visual, I will try it in Quokka to see the run-time code and understand this :) love this post.