There’s a lot of hype around higher order functions and closely related concepts like functions as objects and closures. In fact, presence or absence of this particular feature has been used as a rule of thumb check to determine whether a language can be called functional.

In this chapter we’ll define these concepts, clarify any differences between them and then show how and why does this actually help us write awesome software easily.

Let’s start by defining functions as objects. It’s going to be an easy definition as they’re exactly what it says on the box - functions which are also objects and as such they can be assigned to a variable, passed around as parameters, returned as other function results, etc.

We used them a dozen or so times already in this book, e.g. like this:

let greeting = function (name) {
  return "Hello " + name;
}

greeting("Chuck");
//=> "Hello Chuck"

On the right-hand side we have a function definition. It’s a simple function that takes one parameter and returns the result based on it. On the left-hand side we have the variable where the function is going to be assigned. It’s a regular value assignment just like any other, it just happens that the value is the function itself.

So, now that we have the function bound to a variable, what can we do with it? For starters, we can inspect it. If we want to access the function object without actually invoking the function, we’ll use the variable name without the parenthesis:

//we can see how many parameters the function is explicitly declared to take
greeting.length
//=> 1

//or we can just try and directly evaluate the variable
// e.g. in Chrome Console this will print out its source code.
greeting;
//=> f (name) {
//=>  return "Hello " + name;
//=> }

We can also assign the function to a different variable:

let reply = greeting;

greeting("Fred");
//=> Hello Fred

reply("Barney");
//=> Hello Barney

Not particularly interesting, but it does show us that greeting really is just a regular variable. When we assigned it’s value to a reply, we got another variable that refers to the same function object.

Since it’s just a variable, we can also pass it to another function, e.g. we can generalize the conversation between Fred and Barney:

function conversation(hello, name1, name2){
  return hello(name1) + " - " + hello(name2);
}

conversation(greeting, "Fred", "Barney");

//=> "Hello Fred - Hello Barney"

We pass the greeting function and names of both people and get a string with a simple conversation between them. We can play by passing different parameters to it:

// talk to Wilma a bit
conversation(greeting, "Fred", "Wilma");
//=> "Hello Fred - Hello Wilma"

// talking to oneself is also possible
conversation(greeting, "Fred", "Fred");
//=> "Hello Fred - Hello Fred"

//or we can pass a different function to say hello!
let cowboyGreeting = function(name){
  "Howdy " + name + "!";
}
conversation(cowboyGreeting, "Fred", "Barney");
//=> "Howdy Fred! - Howdy Barney!"

By definition, a higher order function is a function that:

  • receives other functions as parameters
  • returns other functions as results
  • does both

We can see that conversation is a higher order function as it receives the function that handles a single greeting as its first parameter.

One very typical use case for this kind of functions is when we want a generic overall function with pluggable specific functionality. Then we can use the high order function as a template and fill in the gaps by passing the plug-in functions as parameters.

That was an example of a higher order function that receives another function and returns a regular value. Let’s explore some other cases.

Higher order function that accepts regular values and returns a function:

let incrementer(increment){
  return function(a){
    return a + increment;
  }
}

let incBy2 = incrementer(2);
incBy2(4);
//=> 6
incBy2(0);
//=> 2

let incBy10 = incrementer(10);
incBy10(4);
//=> 14
incBy10(-5);
//=> 5

We typically use this kind of functions as generators or constructors of simpler functions that we need to use.

Higher order functions can also both receive and return a function.

//here we have a function that receives two functions
//and returns their function composition
//i.e. turns f(x) and g(x) into f(g(x))
//for simplicity, we'll assume that both functions accept exactly
//one parameter
let composeTwoFns = function(f, g){
  return function(x){
    return f(g(x));
  }
}

//we'll define a square function as our f(x)
let square = function(a){
  return a * a;
}

//and reuse our incrementer as g(x)
let incBy1 = incrementer(1);

//so we can compose them into f(g(x)) like this:
let incThenSquare = composeTwoFns(square, incBy1);
incThenSquare(1);
//=> 4
incThenSquare(0);
//=> 1
incThenSquare(10);
//=> 121

//or we can compose them in reverse, i.e. g(f(x))
let squareThenInc = composeTwoFns(incBy1, square);
squareThenInc(1);
//=> 2
squareThenInc(0);
//=> 1
squareThenInc(10);
//=> 101

Function composition is a very powerful tool in a functional programming toolkit. It can be used to create simple but powerful data processing pipelines.

So far we’ve illustrated and defined functions as objects and higher order functions. The one remaining question is what exactly are closures. As it happens, we already had a closure in one of the examples. Let’s see the incrementer code again:

let incrementer(increment){
  return function(a){
    return a + increment;
  }
}

The inner function has one parameter a, but it also uses the parameter increment which is defined in the scope of its parent, namely function incrementer.

Closure is a function that can and does access variables declared in a parent scope and it can continue to access those variables even after the execution of the parent function has ended.

The fact that we successfully ran functions incBy2 and incBy10 demonstrates that both conditions are met and that those functions are closures - resulting function can and does use the increment parameter and we did call it well after we ran incrementer to create it.

Since closures have become a fairly hyped-up concept, it was inevitable that they should become the subject of a few widely spread misconceptions.

One of the common ones is that closures are synonymous with functions as objects. They are not. If we write a function that does not use any variables from its parent scope, then it’s simply not a closure. We had this case in our first example:

// NOT a closure
let greeting = function (name) {
  return "Hello " + name;
}

Another misconception is that closures are synonymous with anonymous functions. Also, they are not. Again, the criterion that matters is whether or not the function in question uses any variable from its parents’ scope. If it does, it’s a closure, if it doesn’t it is not. And it applies whether or not we bothered to give that function a name - that’s irrelevant.

// the anonymous function we pass as the first parameters
// is NOT a closure
conversation(function(name) {return "Ahoy " + name}, "Fred", "Barney");

We introduced some pretty powerful concepts here. Before we move on and use them in the following chapters, let’s give them a brief recap:

Function as object is a function that can be assigned to a variable and treated as a regular variable, i.e. inspected, passed as a parameter to other functions and returned as the result by another function.

Higher order function is a function that accepts other functions as parameters, returns a function as its result or does both.

Closure is a function that uses the state from its parent scope.