.map(), filter() & .reduce() — animated

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

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

Hey! I am content maker @ Twitter [fb] and Insta follow me there for more freemium tutorials, js games and coding books.

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. The animation should actually return [6,7] given >5 condition not [5,6,7]. 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.

I’m on @ Twitter [fb] and Insta follow me there for more freemium tutorials and coding books. (I give them away for free sometimes.)

Written by

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store