What are Higher Order Functions?
Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions.
Higher-order functions allow us to abstract over actions, not just values.
They come in several forms. For example, we can have functions that create new functions.
There is a built-in array method, forEach, that provides something like a for/of loop as a higher-order function.
Furthermore, Array.prototype.map, Array.prototype.filter and Array.prototype.reduce are some of the Higher-Order functions built into the language.
Examples
Let’s take a look at different examples of higher order functions.
Array.prototype.map
The map() method creates a new array by calling the callback function provided as an argument on every element in the input array.
The map() method will take every returned value from the callback function and creates a new array using those values.
The callback function passed to the map() method accepts 3 arguments: element, index, and array.
Example 1
Let’s say we have an array of numbers and we want to create a new array which contains double of each value of the first array. Let’s see how we can solve the problem with and without Higher-Order Function.
Without Higher-order function map
With Higher-order function map
We can make this even shorter using the arrow function syntax:
Example 2
Let’s say we have an array containing the birth year of different persons and we want to create an array that contains their ages. For example:
Without Higher-order function map
With Higher-order function map
Array.prototype.filter
The filter() method creates a new array with all elements that pass the test provided by the callback function.
The callback function passed to the filter() method accepts 3 arguments: element, index, and array.
Example
Let’s say we have an array which contains objects with name and age properties. We want to create an array that contains only the persons with full age (age greater than or equal to 18).
Without Higher-order function filter
With Higher-order function filter
Array.prototype.reduce
The reduce method executes the callback function on each member of the calling array which results in a single output value.
The reduce method accepts two parameters:
1) The reducer function (callback),
2) and an optional initialValue.
The reducer function (callback) accepts four parameters: currentValue, currentIndex, sourceArray.
If an initialValue is provided, then the accumulator will be equal to the initialValue and the currentValue will be equal to the first element in the array.
If no initialValue is provided, then the accumulator will be equal to the first element in the array and the currentValue will be equal to the second element in the array.
Example
Let’s say we have to sum an array of numbers:
With Higher-order function reduce
Every time the reducer function is called on each value in the array, the accumulator keeps the result of previous operation returned from the reducer function, and the currentValue is set to the current value of the array. In the end the result is stored in the sum variable.
We can also provide an initial value to this function:
Without Higher-order function reduce
As we can see that using High-order function made our code cleaner, more concise and less verbose.
Creating Higher-Order Function
Up until this point, we saw various Higher-order functions built into the language. Now let’s create our own Higher-order function.
Let’s imagine JavaScript didn’t have the native map method. We could build it ourselves thus creating our own Higher-Order Function.
Let’s say, we have an array of strings and we want to convert this array to an array of integers, where each element represent the length of the string in the original array.
In the above example, we created an Higher-order function mapForEach which accepts an array and a callback function fn. This function loops over the provided array and calls the callback function fn inside the newArray.push function call on each iteration.
The callback function fn receives the current element of array and returns the length of that element, which is stored inside the newArray. After the for loop has finished, the newArray is returned and assigned to the lenArray.
Sources
advanced array examples functions map prototype
