.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.
Array.map — map all values to an expression.
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)
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.