Map, Filter and Reduce – Animated

Map Animated

Map, Filter and Reduce – Animated by Javascript Teacher

Javascript Teacher : Twitter || Instagram || FB

Notes

Map

Array.map – map all values to an expression.

Map Animated

  • Expression value + 1 is applied to every item in the original array.
  • .map() returns a modified copy of the array leaving original untouched.
  • Result: [2,3,4,5,6,7,8] (a copy of the original array is created.)

Filter

Array.filter – keep all that match a condition.

Filter Animated

NOTE: there is a small mistake in the animation. It should return [6,7], not [6,7,8].

  • function value > 5 is applied to every item in the original array.
  • .filter() returns a modified copy of the array – the original is still available!
  • Result: [6,7,8] (only values that passed the condition.)

Reduce

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

Reduce Animated

  • Reducer function F takes value and accumulator.
  • In this example .reduce(v, a) returns the sum of all values.
  • Result: 28 (the sum of all numbers in the original array)
Share on Twitter
Share on Facebook

Navin
Created by Navin. He loves to learn, blog and develop new applications.
Twitter LogoGithub LogoLinkedIn LogoFaceBook Logo