What is a Closure?

A closure is a computer science concept that is seen in different web programming languages such as Ruby, JavaScript, ActionScript 3.0 and newer versions of PHP. It is a powerful tool and can be an elegant solution given the right circumstances. With that background in mind, let’s give it a specific definition.

A closure is a function that encapsulate a scope and is able to be passed around as an argument.

In other words this enables you to define a function that will “close over” variables in the current scope, and then allowing you to later execute that function in a different context. It may sound a bit complex, but a simple Ruby example should clarify.

intro = 'Hello '
say = Proc.new { |name| intro + name }
puts say.call('Tim') # => Hello Tim

First we define a local variable, named intro, which is used in the closure on line 2. Breaking down line 2 we see that a new Proc object is created and stored in the “say” variable.

A Proc is a Ruby construct that creates a closure. Ruby gives us several other constructs for doing this, but we’ll save that for another article.

Taking a closer look at line 2 you can see a block variable called “name” (it is wrapped between 2 vertical pipes). This is a parameter that you will pass to the closure when you want to execute it like line 3 in our example. If you run the example you will see that it outputs “Hello Tim”.

While a simple example helps give us a basic understanding, we should demonstrate the ability to execute the closure in a different context. Continuing with our previous example.

class Greeter
  def greet(closure)
    closure.call('from Greeter')
  end
end
greeter = Greeter.new
puts greeter.greet(say) # => 'Hello from Greeter'

We define a Greeter class with an instance method of greet that accepts a closure as an argument. The greet method then calls the closure passing it the string ‘from Greeter’. It is important to realize that when we do this we are injecting data from a new context than what the closure was defined in. This is one of the reasons why closures are powerful, they can combine pieces of data from different parts of the system. Be careful though since this can increase coupling in a system.

While Ruby provides us with Proc objects for creating closures, JavaScript on the other hand uses anonymous functions. The following is the JavaScript equivalent of the previous Ruby examples.

 1 var intro = 'Hello ';
 2 function say (name) { 
 3   return (function (name) {
 4     return intro + name;
 5   })(name);
 6 }
 7 console.log( say('Tim') ); // Hello Tim
 8 
 9 function Greeter () {
10   this.greet = function (closure) {
11     return closure('from Greeter');
12   }
13 }
14 var greeter = new Greeter();
15 console.log( greeter.greet(say) ); // Hello from Greeter

There are two very noticeable differences between the JavaScript and Ruby examples. The first one is the self executing anonymous function that is returned on line 3. The anonymous function is immediately invoked by the parentheses on line 5. This will return the result of the anonymous function rather than the function itself (more about that soon). On line 5 we are also passing an argument into the function, this may seem a little tricky since we are passing the “name” parameter that was passed into the say function.

The other big difference between JavaScript and Ruby is how functions are called. In Ruby we can omit the parentheses on a function call and it will still be executed. JavaScript, on the other hand, will return the function itself if it is called without parentheses. To quickly demonstrate.

function sayHello () { 
  return 'Hello';
}
console.log( sayHello ); // function definition
console.log( sayHello() ); // Hello

This idiosyncrasy is the reason why we made the returned function self-invoking, so that we didn’t have to execute it on a separate line just get the closure.

Hopefully this gives you a good sense of what closures are, now let’s see how they’re used in practice.

Use Cases for Closures

We’ll review some common scenarios that closures are used for in Ruby as well as JavaScript. Let's start off with the common, the link_to function from the Rails UrlHelper module should be familiar.

<%= link_to search_path do %>
  <span>Search</span>
<% end %>

# Outputs:
# <a href="/search">
#   <span>Search</span>
# </a>

Using a closure we are able to create an elegant API that is easy to read. The erb looks almost like the output. Consider the alternative without a closure.

<%= link_to search_path, :inner_html => '<span>Search</span>' %>

Okay that isn’t too bad, we lost the visual representation of the erb wrapping the inner markup. What about a link that has richer styling, and a more complex path?

<%= link_to search_path(:key_1 => "value_1", :key_2 => "value_2"), :inner_html => '<span>Search</span>', :id => 'search', :class => 'btn' %>

Even less readable, now the inner_html argument is now being lost in the noise. While this may appear slightly superfluous, making your code as readable as possible alleviates maintenance burdens. When you can go back to code you've previous written and quickly understand the intention, you can update it more quickly.

While this demonstrates a closure used in an API we’ll get a better understanding if we implement our own.

The JavaScript Module Pattern

JavaScript is a Prototype based language, meaning it has a different approach to objects compared to a more traditional object-oriented language. Some people might even say that it is missing features, or "broken". An example of this is the lack of access modifiers.

Access modifiers are used for declaring members of an object as private or public. In JavaScript all properties on an object are effectively public. This essential violates the principle of encapsulation. Perfect opportunity for closures to work around this inherent “weakness”.

 1 var Person = (function () { 
 2   // Private vars
 3   var name,
 4       age = 20,
 5       ssn;
 6 
 7   // Private methods
 8   function createSSN () {
 9     var uniq = (new Date()).getTime();
10     uniq = uniq.toString();
11     ssn = uniq.substr(uniq.length - 11, uniq.length - 1);
12     ssn = Number(ssn);
13   }
14   createSSN();
15 
16   // Public methods
17   return function () {
18     this.getName = function () {
19       return name;
20     }
21     this.setName = function (newName) {
22       name = newName;
23     }
24     this.getAge = function () {
25       return age;
26     }
27     this.getSSN = function () {
28       return ssn;
29     }
30   }
31 })();
32 
33 var john = new Person();
34 john.setName('john');
35 console.log(john.getName()); // john
36 console.log(john.getAge()); // 20
37 console.log(john.getSSN()); // unique 10 digit number

Nothing exactly new here, it is just a creative use of the techniques we’ve already looked at. We set the Person variable to a anonymous self-invoking function. Inside of this function we have our private member declarations, this includes variables and a createSSN method. Once the Person object is created these members fall out of scope and are only accessible through the closure.

On line 17 we get to the meat of the module pattern, the closure itself. It turns out the anonymous function that is assigned to Person actually returns a function, this is a closure just as we’ve seen before. Since this is a closure it encapsulates the lexical scope and can be returned, effectively giving us private variables and methods.

Deferred Execution

Another great aspect of closures is that we can define some behavior and then execute it at a later time when needed. A good example of this is seen in the popular testing library RSpec. The API provides a method named "before" which accepts a block of code that is then executed before each example or example group.

describe Cli do
  before :each do
    @output = double('output').stub(:puts)
  end

  it "sends a welcome message" do
    @output.should_receive(:puts).with('Welcome User.')
  end
  it "prompts for first command" do
    @output.should_receive(:puts).with('Enter command:')
  end
end

Even if you’re unfamiliar with RSpec and BDD you should be able to get something out of this example. The first line opens up the ExampleGroup (or TestCase in TDD terms). Then you see the before method, it takes a block of code and saves it. Since that piece of code is now saved RSpec is able to run it at anytime, and any number of times. Since the method is called "before" it obviously will run it before each of the following examples.

In this case the saved block of code is going to set up a dummy data object and assign it to the @output instance variable. The next two method calls then use the @output variable in their assertions. This demonstrates that closures can made your code more DRY and easier to understand.

Another cool example of deferred execution is implemented directly in the Ruby core, at_exit. This method takes a block and calls it once the program completes or throws an error.

at_exit { puts 'Goodbye' }

Running that command will simply display “Goodbye”, but this humble method can be quite useful. It can ensure certain resources are cleaned up before exiting. Or you can use it to write logs files. Even something as simple as printing a salutation to the user in a command line interface.

Not only is deferred execution common in Ruby but also JavaScript. You usually see them in the form of callbacks (a function that is called in response to an event). Since JavaScript is designed for the purpose of handling user interactions, finding an example is trivial. So we’ll try to make this interesting by defining a callback in a loop.

var data = ['item 1', 'item 2', 'item 3'];
for (var i = 0; i < data.length; i++) {
  var logElement = (function(item) {
    return function() {
        console.log(item);
    }
  })(data[i]);
  setTimeout(logElement, 700 * i);
};

In this situation we’re only storing the closure in a variable to increase readability. It would work fine if we passed the self-invoking anonymous function directly as the first argument to setTimeout. Since data[i] only exists inside of the loop we have to pass it into the outer function so it will be stored inside of the closure. Once the time limit is hit it will then call our closure, printing the data value to the console.

Closures in other Languages

Earlier we said that newer versions of PHP support closures. This feature was added in version 5.3. At the time of writing, PHP 5.3 is still fairly new, so be sure to check your hosting environment before utilizing them in production code. For more information be sure to check out the official PHP documentation and this article from code utopia.

Another web programming language that features closures is ActionScript 3. Both ActionScript 3 and JavaScript are based on a set of standards known as ECMAscript. In a sense they are almost like language cousins. Containing similar syntax and having other commonalities, including how they handle function calls as mentioned earlier. Despite their homogeneity are still differences. ActionScript 3 is a more traditional object-oriented language while JavaScript follows a Prototype based path. While these JavaScript examples won’t translate directly, they should give you enough to start experimenting. One caveat, be careful of the different ways scope is handled in JavaScript vs ActionScript 3.

In Conclusion

While at first closures may have sounded like a esoteric computer science concept, meant for academia and language design, I hope this article has taught you how to practically implement a closure. They can greatly simplify APIs and make the code easier to read and maintain. This translates into saved time and money for clients, and hopefully makes for happier developers.

Don’t forget that these techniques can lead to tightly coupled code. If a closure is exposing an object from another part of the system, changing that object’s interface could easily break functionality. And if that closure was passed around and called in different locations you could have a nightmare updating that codebase.

Now that you are aware of the potential dangers you are more likely to avoid them and use closures to their fullest.

If you have any useful closure examples, or questions please join the discussion.

Further reading on Closures in Ruby and JavaScript

Download code examples