What Are Higher Order Functions in JavaScript

Higher-order functions (HOF) are a type of functions that operate on other functions by either accepting them as input arguments or returning them as the output.

Here is an example where one function takes another function as the input:

function callback() {
  console.log("This is a callback function.");
}
 
function higherOrder(func) {
  console.log("This is a higher-order function.");
  func();
}
 
higherOrder(callback);

This is a higher-order function.
This is a callback function.

In this case, higherOrder() is a higher-order function, and the function passed to it as the input argument is called a callback function.

Pay attention to how we passed callback() to higherOrder(), and notice that the parentheses for callback() is left out.

higherOrder(callback);

This is because callback() is passed to higherOrder() as a parameter.

If you include the parentheses, that tells JavaScript to execute the function, and then pass the returned value to higherOrder().

So why do we need these higher-order functions?

Regular functions provide a level of abstraction that hides the details underneath.

So, it only makes sense that higher-order functions are to encapsulate even more technical details.

In practice, you will often encounter situations where you have to create functions that are very similar to each other.

For example, you are given the task to calculate the diameter and circumference of different circles. The radius of these circles are provided in an array.

function calcDiameter(arr) {
  let output = [];
 
  for (let r of arr) {
    output.push(2 * r);
  }
 
  return output;
}
 
function calcCircumference(arr) {
  let output = [];
 
  for (let r of arr) {
    output.push(2 * Math.PI * r);
  }
 
  return output;
}

The method output.push() is used to append a new value to the output array, and Math.PI is one of JavaScript's built-in mathematical constants, which approximately equals to 3.1415926.

Notice that the functions calcDiameter() and calcCircumference() look very similar, except for how the diameter and circumference are calculated.

function calcDiameter(arr) {
  let output = [];
 
  for (let r of arr) {
    output.push(2 * r);
  }
 
  return output;
}
 
function calcCircumference(arr) {
  let output = [];
 
  for (let r of arr) {
    output.push(2 * Math.PI * r);
  }
 
  return output;
}

Functions are supposed to reduce unnecessary repetitions in your code, but that doesn't seem to be working here. Luckily, you can still improve this code using a higher-order function.

First of all, instead of writing functions that complete the task on their own, you should make your functions more granular.

For instance, let's extract the actual calculations of diameter and circumference into separate functions:

function diameter(radius) {
  return 2 * radius;
}
 
function circumference(radius) {
  return 2 * Math.PI * radius;
}

And then, you can create a higher-order function that encapsulate them:

function diameter(radius) {
  return 2 * radius;
}
 
function circumference(radius) {
  return 2 * Math.PI * radius;
}
 
function calculate(arr, logic) {
  let output = [];
 
  for (let r of arr) {
    output.push(logic(r));
  }
 
  return output;
}
 
circles = [2, 10, 13, 7, 8, 6, 5];
 
console.log(calculate(circles, diameter));
console.log(calculate(circles, circumference));

As you can see, this solution is free of repetitive code and is much more flexible.

For example, if you need to calculate the area of the circles, all you need to do is create another function area(), and pass it to the function calculate().

function area(radius) {
  return Math.PI * radius * radius;
}
 
console.log(calculate(circles, area));