Map/Filter/Reduce Crash Course
Tags: javascript, webdev, beginners, functional
Published: 2019-09-17 00:44:52

*This was originally posted as a Twitter thread: [https://twitter.com/chrisachard/status/1173750491458789378](https://twitter.com/chrisachard/status/1173750491458789378)*


Have you heard about map, filter, and reduce, but never really understood them?

Here's a 🔥 map().filter().reduce() 🔥 crash course for you!


# 1.

`map`, `filter` and `reduce` can all operate independently, or be chained together

They operate on an *array* and *transform* it

![Map, Filter, Reduce](https://thepracticaldev.s3.amazonaws.com/i/mgcuihl4bicusutctlow.png)

# 2.

`filter` takes the array and returns a new array that only contains the elements that match some condition

![Filter](https://thepracticaldev.s3.amazonaws.com/i/rupils42cz56821153u1.png)

# 3.

It loops over the elements, passing each one to a callback function

You can return `true` to include that element in the new array, or `false` to exclude it

![Filter loops over the elements](https://thepracticaldev.s3.amazonaws.com/i/vwiesj96ln90uslfpmre.png)

# 4.

Think of `map` like an element transform function

It loops over an array, and you can return a new element for each spot in the array

![Map](https://thepracticaldev.s3.amazonaws.com/i/xqr9k2ttfo5bcqq3actm.png)

# 5.

This lets you transform each element into something new (or keep it the same)

Types don't have to be the same: can return objects, string, numbers - anything!

![Map to transform elements](https://thepracticaldev.s3.amazonaws.com/i/dwartorz3qgxuip2g67m.png)

# 6.

`reduce` loops over an array and let's you "collect" the elements into something else (by running a function)

That "something else" is specified by you as the second argument

This way, you can "collapse" (reduce) the array into a new array, an object, number, etc.

![Reduce](https://thepracticaldev.s3.amazonaws.com/i/hrmg8wkrdxmpc0gmwghj.png)

# 7.

During each loop of `reduce`, you can get result of the last loop, and the next element in the array

Change the result, then return it for the next loop iteration

When you're done, you have the completed collection

![Reduce loop](https://thepracticaldev.s3.amazonaws.com/i/v3zxmzqyk7kesj1axl8a.png)

# 8.

The callback functions to `map`, `filter` and `reduce` all can also get the current index and the entire original array if you need them

![Map, filter, reduce](https://thepracticaldev.s3.amazonaws.com/i/e8xh3mvn710sioyw9nbm.png)

# 9.

All together now:

Chain `filter` with `map` to first remove elements you don't care about, and then transform them

Or,

Chain `filter` with `reduce` to filter the list first, then transform it into something else

![Chain](https://thepracticaldev.s3.amazonaws.com/i/fk0kxfigxpbdma4dntvp.png)

# 10.

So why are map, filter and reduce useful?

- don't have to manually loop over array
- chain together for short, straightforward array transformations
- can reuse callback functions and compose them together

![useful composition](https://thepracticaldev.s3.amazonaws.com/i/oa4a58apyneg99lygwiu.png)

# Code Links

Here are some interactive code samples to play with: [https://chrisachard.com/examples/map-filter-reduce](https://chrisachard.com/examples/map-filter-reduce)

I realize this can be confusing!

Tweet at me or DM if I can help out 🙌


&nbsp;

**Like this crash course?**
Find more on twitter: [@chrisachard](https://twitter.com/chrisachard)
and in my [my newsletter 📬](https://chrisachard.com/newsletter/)

Thanks for reading!