JavaScript Higher Order Functions

Photo by Xuanhao on Hackwagon

If you ever heard the term higher order function while learning JavaScript and was put off because it sounded tough, fear no more. While the “higher order” part may make it seem like it is a complicated subject, it really isn’t. To have a better understanding of what higher order functions are in JavaScript, you will need to have a firm understanding of what Functional Programming is and the concept of First-Class Functions.

Functional Programming is the process of building software by composing pure functions, avoiding shared state, mutable data, and side-effects. In more simple jargon, functional programming is when you can pass functions as parameters to other functions and also return them as values. Functional code tends to be more precise, readily testable and easy to predict.

JavaScript treats functions as Objects. They are a special type of Object known as Function objects. We can add properties to functions like we do with objects. You can pass them around as parameters to other functions as a callback function and also assign them to variables.

Higher Order Functions

A higher order function is a function that accepts and/or returns another function. The reason why it’s called a Higher Order Function is because instead of operating on strings, numbers, or booleans, it goes “higher” to operate on functions. Some higher order functions that are used extensively are: Array.prototype.forEach(), Array.prototype.filter(), Array.prototype.map(), Array.prototype.sort(), Array.prototype.reduce().

Array.prototype.forEach()

The .forEach() method calls a provided callback function once for each element in a given array in ascending order. The callback is invoked with 3 arguments: The value of the element, the index of the element, and the array object being traversed.

An example with the .forEach() method:

Would log:

The .forEach() method looks much cleaner than using a for loop to iterate through an array:

Here we are using a simple for loop and displaying the elements on the console

Array.prototype.filter()

The .filter() method returns a new array with all the elements that pass the conditions provided by the callback function. The .filter() method accepts 3 arguments: element, index, and array.

Without using the .filter() method:

We have an array of ages and we are looking to see how many elements are 21 and older.

logs:

An example with the .filter() method:

This can be made into a one liner using ES6 syntax:

Much cleaner code!

which would console.log the same as above.

Array.prototype.map()

The .map() method returns a new array by calling the callback function provided as an argument on every element within the input array. The .map() method will then take every return value from the callback function and creates a new array using those values. The callback function passed into .map() can accept 3 arguments, element, index, and array.

An example with the .map() method:

.map() creates a new array with the conditional and leaves the original array intact

logs:

Array.prototype.sort()

The .sort() method sorts the items of an array. The sort order can be alphabetic or numeric, and either ascending or descending. By default, the sort method sorts the values as strings in alphabetical and ascending order.

An example with the .sort() method:

Using a comparing function to sort the company year founded

logs:

which can be made into a one liner using ES6:

Much cleaner

Array.prototype.reduce()

The .reduce() method runs the callback function on every element within the input array which outputs a single value. The method accepts 2 parameters: The reducer function (the callback function), and an optional initial value. The reducer (callback) function accepts 4 parameters: accumulator, current value, current index, and source array.

If an initial value is provided, then the accumulator will be equal to the initial value and the current value would be equal to the first element in the array. If no initial value is provided, then the accumulator will be equal to the first element in the array and the current value would be equal to the second element in the array.

An example without .reduce():

Logs 411 as the sum.

An example with .reduce():

Returns 411 as the sum

and as a one liner using ES6:

Conclusion

We now understand why higher order functions are considered “higher order”. Higher Order functions are functions that receives a function as an argument and can even return a function. With a solid understanding of functional programming, utilizing higher order functions within your programs will allow you to become an expert programmer!