What are Higher-Order Functions in JavaScript?

Learn what higher-order functions are in JavaScript, and how to use them to write more efficient, reusable, and maintainable code. With code examples and images, this guide is perfect for learners of all levels.

Have you heard your peers talk about Higher-Order functions in JavaScript? Don’t worry if you are lost in the conversation and are unsure about what it is. In this post, we will learn about Higher-Order functions, and why they are useful.

Let’s get the definition out of the way:

A function that accepts and/or returns another function is called a higher-order function.
It’s higher-order because instead of strings, numbers, or booleans, it goes higher to operate on functions.

A Higher-Order function is a function that receives a function as an input argument or returns a function as output. This is a concept that was born out of functional programming. This maybe an alien concepts for those who are more used to the Object Oriented Programming world. JavaScript, is a language that has started to use a lot of the functional programming concepts lately. Higher-Order functions is one of them.

Why Higher Order Functions?

Before we get started to learn something, we need to understand why that is important. You maybe curious, what purpose do higher-order functions serve?

Simple and Elegant Code

Higher-Order functions allow you to write simple and clean code. It allows you to write smaller functions, that do only on thing. This kind of composition results in simple, readable code.

Fewer Bugs

With simple and elegant code you end up with fewer bugs. Trust me on this one.

Easy to Test and Debug

With functions that do only one thing, you end up with code that is easy to test. Testable code, results in fewer bugs. Therefore debugging these simple functional units is also easy.

Built-in Higher Order Functions in JavaScript

JavaScript comes with some built-in higher-order functions. You may already be using them, without realising that they are higher-order functions. Let’s take a look at some of them, to understand how they work.

Array.prototype.map

The map*() *method creates a new array with the results of calling a provided function on every element in the calling array. What this means is map() calls a provided callback function once for each element in an array, in order, and constructs a new array from the results.

The callback accepts three arguments:

value of the element
index of the element
array object

You may have used the *map() *function before. It qualifies as a higher-order function, because it takes in a *callback *function as an input argument.

var numbers = [1, 4, 9];

var doubles = numbers.map(function(num) {

  return num * 2;

});

 

// doubles is now [2, 8, 18]

// numbers is still [1, 4, 9]

In the example above, we have an array of numbers and creating a new array using the *map(). *The *map() *takes a function as an argument. The argument num within the function will automatically be assigned from each element of the array as map() loops through the original array.

Array.prototype.filter

The *filter() *method is another example of an in-built higher-order function. It creates a new array with all the elements that pass the test provided by a callback function. It also takes in a function as an argument, hence making it a higher-order function. The callback function passed to the *filter() *method accepts three arguments:

value of the element
index of the element
array object

Array elements which do not pass the callback test are simply skipped, and are not included in the new array.

Let’s take a look at an example that shows filter() in action.

function isAboveMyRange(value) {
  return value >= 25;
}
var filtered = [12, 5, 8, 130, 44].filter(isAboveMyRange);
// filtered is [130, 44]

The example is used to find values greater than 25 and filter the array. The values that don’t pass this test, will not be a part of the filtered array. The* filter()* function takes the isAboveMyRange function as an input parameter.

Array.prototype.reduce

Another built-in higher-order function in JavaScript is the reduce() method. It executes the callback function on each member of the calling array, and results in a single output value. The *reduce() *method takes in two input parameters:

The reducer *callback *function (making this method a higher-order function)
Optional initial value

arr.reduce(callback[, initialValue])

The reducer function (callback) accepts four parameters:

accumulator
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. Suppose 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. Let’s try to understand this better with a simple example.

var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
// sum is 6

In this example, we have passed an initialValue of zero, this is assigned to the *accumulator *in the beginning. Every time the reduce() function is called on each value in the array, the accumulator keeps the result of previous operation returned from the function, and the currentValue is set to the current value of the array. In the end the result is stored in the sum variable.

You can write your own higher-order functions

We saw some examples of in-built higher-order functions that come with JavaScript. But that’s not all. You can always create your own higher-order functions based on your needs.

Conclusion

In this article, we learned what higher-order functions are and we also learned some in-built higher-order functions in JavaScript. You may have already been writing higher-order functions or using them, without realising their significance.

Higher-order functions are just like regular functions, but they can accept a function as an argument and/or return a function as an output.

#javascript #web-development