Understanding Higher Order Functions in JavaScript

Learn how flexible JavaScript functions can be and how you can use them to create flexible, reusable code.

JavaScript is a powerful language supported by most modern browsers, and it’s a great choice for beginners.

Just like many other modern programming languages, JavaScript supports functions that let you isolate a block of code and reuse it somewhere else. You can also use assign functions to variables and pass them as parameters, like other values.

The simplest definition for a higher-order function is a function that performs operations on other functions by accepting them as parameters or returning them. Higher-order functions are heavily used in the functional programming paradigm. If you are just getting started with JavaScript, higher-order functions might be a bit difficult to grasp.

Consider the following example:

In the code block above, the transform function is a higher-order function that takes in the fn function as a parameter and returns an anonymous function that takes in array as a parameter.

The purpose of the transform function is to modify the elements in the array. First, the code defines a variable resultArray and binds it to an empty array.

The transform function returns an anonymous function that loops through each element in array, then passes the element to the fn function for computation, and pushes the result into resultArray. After the completion of the loop, the anonymous function returns the resultArray.

The code block above assigns the anonymous function returned by the transform function to the constant variable function1. fn returns the product of x which is a substitute for array[i].

The code also passes an array, as a parameter to function1 and then logs the result to the console. A shorter way of writing this would be:

JavaScript has a built-in higher-order function that basically does the same thing as transform, which we’ll cover later.

Hopefully, you are starting to understand how higher-order functions in JavaScript work. Take a look at the following function and see if you can guess what it does.

This code block defines a function that does what you might suspect—it checks for the elements in the array that meet a certain condition and transforms them with the transform() function. To use this function, you do something like this:

Unlike the transform function, The filterAndTransform function takes two functions as parameters: fn and condition. The condition function checks if the parameter passed, is an even number, and returns true. Otherwise, it returns false.

If condition resolves to true (the condition is met), only then is the transform function called. This logic could come in handy if you are working with an array and want to transform certain elements. If you run this code in the browser console, you should get the following response:

You can see that function only transforms the elements that meet a certain condition, leaving the elements that do not meet the condition, as is.

Array methods like map() are higher-order functions that make it easier to manipulate arrays. Here's how it works.

When you log transformedArray in the browser console, you should get the same result, you got with the transform function mentioned earlier:

array.map() takes in two parameters, the first parameter refers to the element itself, while the second parameter refers to the element's index (position in the array). With just array.map() you can achieve the same results as the filterAndTransform function. Here's how you do it:

In the code block above, the function returns the product of the current element and 2, if the element is even. Otherwise, it returns the element untouched.

With the built-in map function, you have managed to eliminate the need for several lines of code, thereby resulting in much cleaner code and fewer chances for bugs to occur.

When you invoke the filter method on an array, make sure that the return value of the function you pass into the method is either true or false. The filter method returns an array containing elements that meet the condition passed. Here is how you use it.

The code block above traverses the words array and filters any word whose first letter is a vowel. When you run the code and log the result variable, you should get the following results:

The reduce() higher-order function takes in two parameters. The first parameter is the reduction function. This reduction function is responsible for combining two values and returning that value. The second parameter is optional.

It defines the initial value to pass to the function. If you want to return a sum of all the elements in an array, you could do the following:

If you run the code, sum should be 15. You can also take a different approach with the reduce function.

The code block above is much cleaner in comparison to the earlier example. In this example, the reduction function takes in two parameters: c and n. c refers to the current element while n refers to the next element in the array.

When the code runs, the reducer function goes through the array, making sure to add the current value to the result from the previous step.

Functions in JavaScript are powerful, but higher-order functions take things to the next level. They are widely used in functional programming, letting you filter, reduce, and map arrays with ease.

Higher-order functions can help you write more modular and reusable code when building applications.

David Uzondu is a JavaScript Developer with 3+ years of experience. He loves writing in his spare time.