Map, filter and reduce have been around for a long time. They are often seen as part of Functional Programming style.

JavaScript Teacher
Jul 19 · 3 min read

The animations might look a bit weird. But I was limited to the Tetris grid I created (in my previous how to make Tetris tutorial.) Check it out too.

Follow me @ Twitter, Instagram & fb to never miss premium articles.

We often commit complex ideas to memory by visualizing them. There aren’t many coding articles using visuals as starting point for learning. And yet, visualization plays important role in education. This also applies to coding.

Even after working with map, filter and reduce for years I still often find myself asking: Is a copy of the original array made? Is reference to the original array modified? I made this tutorial to put an end to these questions.

My hope is that once it is seen visually – it will be easier to memorize.

Array.map map all values to an expression.

Array.map(): apply “value + 1” to a set of 7 numbers [1, 2, 3, 4, 5, 6, 7]

1] Expression value + 1 is applied to every item in the original array.

2] .map() returns a modified copy of the array leaving original untouched.

3] Result: [2,3,4,5,6,7,8] (a copy of the original array is created.)

Array.filter keep all that match a condition.

NOTE: there is a small mistake in the animation. It should return [6,7], not [6,7,8]. I’ll fix it shortly. . .

1] function value > 5 is applied to every item in the original array.

2] .filter() returns a modified copy of the array – the original is still available!

3] Result: [6,7,8] (only values that passed the condition.)

Array.reduce – reduce all items to a single value.

A common use for a reducer is combining prices of all items in shopping cart.

What makes reduce unique is that it uses an accumulator.

Accumulator is required to be set to a starting value. Here it is 0.

1 ] Reducer function F takes value and accumulator.

2 ] In this example .reduce(v, a) returns the sum of all values.

3 ] Result: 28 (the sum of all numbers in the original array)

Conclusion

Of course, these higher order functions can (and should) be used to solve a wide variety of different problems.

Map, Filter and Reduce can also be used with arrays of objects. They are not limited to working with numeric values.

Follow me @ Twitter, Instagram & fb to never miss premium articles.

The animations might look a bit weird. But I was limited to the Tetris grid I created (in my previous how to make Tetris tutorial.) Check it out too.

JavaScript Teacher

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade