I learned higher-order functions from Mattias Petter Johansson a.k.a. MPJ. In his blog post and videos on higher-order functions, he tied higher-order functions to functional programming and stated,
“Making your programming style more functional will improve you a lot as a programmer.”
That sold me. This is my attempt at explaining and breaking down higher-order functions for anyone to understand.
What is a Higher-Order Function?
A higher order function is a function that takes a function as an argument, or returns a function.
The array methods below (filter, map, reduce) accept a function as a parameter. This is what makes these array methods
Still confused? I was too when I first read about this topic. Seeing and walking through an example will help clarify:
Let’s say we want to filter an array of objects (players) to only give us baseball players. Below is the code in full to do this using the
What does the above code do?
(1) We declared an array of objects for players.
(2) Next, we created a new array named baseballPlayers to save our output to.
(3) Then we called the .filter() method on the original array (players).
(4) Inside the filter function, we pass another function as an argument.
(5) Lastly, we log the new array (baseballPlayers) to check our work.
Let’s take a deeper look at the function (4) that is being passed as a parameter.
The function (4) runs on each object in the array. If the sport equals baseball, then that object makes it to our new array. The final output for baseballPlayers is
Understand? Good. Now let’s get to the meat and potatoes (map).
“Once you learn to use map, your life as a programmer changes.” - MPJ
I agree. Map also accepts a function as a parameter and iterates over each item in the array (just like filter), but it does not have to return the whole object in the array. Again, an example will help clear this up.
If we wanted an array of only the name of the baseball players (instead of showing all keys and values for each baseball players’ object), we could use
map to do this.
map method above takes a function that returns only the name of the players. Since map follows the filter method, map only runs on the array items returned by filter. The new baseballPlayers array becomes:
Reduce takes two parameters the accumulator and the current value. The accumulator is the previous value returned from the previous run of the function inside reduce and the current value is the value we are currently iterating over in the array.
I know it sounds confusing, but again the example will help us understand better.
(Notice: I have added
gamesPlayed to each object in the players array and one more baseball player.)
Filter returns the three objects in the array that have a sport of baseball.
Map returns only the gamesPlayed value for each object. [1065, 927, 2632]
Reduce iterates over the three values provided by map 1065 + 927 + 2632.
Iteration 1 (Mike)
accumulator = 0 … currentGamesPlayedValue = 1065
return 0 + 1065
Iteration 2 (Bryce)
accumulator = 1065 … currentGamesPlayedValue = 927
return 1065 + 927
Iteration 3 (Cal)
accumulator = 2037 … currentGamesPlayedValue = 2632
return 2037 + 2632
Reduce returns the final number which is 4624.
BONUS - Arrow Function Version
Below is the
arrow function version of the same code we just went over for reduce.
Whoa, the arrow functions made this code block more compact and easier to read.