Map, Filter and Reduce – Animated

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

Here’s a list of my best web development tutorials.

Array.map map all values to an expression.

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

Array.filter keep all that match a condition.

Image for post
Image for post

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

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

Image for post
Image for post

Conclusion

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

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