What Are Higher Order Functions in JavaScript

A function as a piece of code as a value, which is assigned to a variable.

This definition is in fact, a very important concept in JavaScript, and we have to talk more about it. Understanding this allows you to write code at a higher level.

• Return a function

We know from the past examples that the return statement can return a variable, so naturally, it can return a function as well.

function a() {
  console.log("Function a executed");
 
  return function b() {
    console.log("Function b executed");
  };
}

You can call the function a() like this:

a();

Function a executed

Function a() will return a function, and you can assign this returned function to a variable.

let x = a();

x will become a variable with a function attached to it, and you can execute it like this:

let x = a();
 
x();

Function a executed
Function b executed

• Accept a function as an input argument

A function can accept variables as the input argument, so naturally, it can accept functions as well.

function decide(status, yes, no) {
  if (status) {
    yes(); // If status is true, execute this function
  } else {
    no(); // If status is false, execute this function
  }
}

In this case, arguments yes and no are expected to be functions. If status is true, function yes() will be executed. If status is false, function no() will be executed.

Next, let's create functions a() and b().

function a() {
  console.log("Function a executed");
}
 
function b() {
  console.log("Function b executed");
}
 
decide(true, a, b);
decide(false, a, b);

Function a executed
Function b executed

• Functions defined inside functions

You can define variables inside a function, so naturally, you can define functions as well.

function out(status) {
  function a() {
    console.log("Function a executed");
  }
 
  function b() {
    console.log("Function b executed");
  }
 
  if (status) {
    a();
  } else {
    b();
  }
}

Inside the function out(), there are two other functions, a() and b().

The out() function takes one input argument, status.

If status is true, function a() will be executed, and if status is false, function b() will be executed.

out(true);
out(false);

Function a executed
Function b executed

• Copy the function to another variable

You can copy a value to another variable like this:

let a = 10;
 
let b = a; // a is assigned to b
let x = b; // b is assigned to x
 
console.log(a);
console.log(b);
console.log(x);

10
10
10

So, a function can also be copied to another variable, and you can call that function with the new name.

function a() {
  console.log("Function executed");
}
 
let b = a;
let x = b;
 
a();
b();
x();

Function executed
Function executed
Function executed

These functions that work on other functions are called higher-order functions.

Let's begin with a review on the definition of functions. Functions are just a piece of code as a value, which is then assigned to a variable.

So, theoretically, you can make a function return another function like this:

function parent() {
  return function child() {
    return true;
  };
}

These types of functions are called higher-order functions, and they have some interesting characteristics.