Visualize `map` & `reduce`


  1. What is a Higher Order Function ?
  2. Map 2.1 Definition 2.2 Inputs & outputs 2.3 Common uses of map 2.4 Animation
  3. Reduce 3.1 Definition 3.2 Inputs & outputs 3.3 Common uses of reduce 3.4 Animation
  4. Bonus :)

Map and reduce are really important concepts in Functional Programming and two of the most important Higher Order Functions.

But, What is a Higher Order Function ?

Is a function that can take other functions as inputs and/or return functions as outputs. In Functional Programming functions can be passed around because are regular values, sometimes referred as functions are first class citizens.

We can try to understand what map and reduce do internally with the help of some animations. Let's start with map.


If we already have a function that does what we want on one element, we can combine it with map to do it for all the elements in a collection.

The map function receives 2 inputs:

  • A collection.
  • A function that receives one argument. This function will transform the elements of the collection.

The output is a collection with the same number of elements as the input collection.

Common uses of map

  • Apply a math operation to a collection. E.g. add/subtract 1 to all the elements, double all the elements.
  • Format a collection of strings. E.g. capitalize a collection of names.
  • Conversion of types. E.g. parse a collection of strings into integers.
  • Compose a new collection from a collection of complex elements. E.g. from a collection of person structs get the all the full names of the persons.

Collection GIF


Used when we want to compute a single value from a collection. Reduce collapses the collection in succeeding steps with the help of an accumulator.

The reduce function receives 3 inputs:

  • An initial value.
  • A collection.
  • A function that receives two arguments.

The output is a single value.

Common uses of reduce

  • Get the sum of the values in a collection.
  • Count the number of times that the values in the collection repeat.
  • Sort a collection.
  • Finding the smallest or biggest value in a collection.

Fun fact. The map function can be implemented using reduce.

accumulator gif


Here is an image that explains HOF’s with emojis 😂

Image with Emojis