.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.