The Power of Closures – Part 1

As I have been using JavaScript more and more lately, I have become increasingly impressed with the power of closures . Closures aren’t available in C, C++, or Java, and as a result, they aren’t particularly well-known. Before exploring what I like about closures, it is important to first understand how JavaScript treats functions.

In JavaScript, all functions are first-class functions. This means JavaScript functions supports, “… constructing new functions during the execution of a program, storing them in data structures, passing them as arguments to other functions, and returning them as the values of other functions.”[1]

Here is an example of how functions are (usually) created in JavaScript.

function square(x) {
 return x*x;
}

After the interpreter processes this code, a square object will exist in the global scope that contains our defined function. This function is invoked by putting a (param-list)after it.

square(1); // 1
square(2); // 4
square(3); // 9

A function can also be created at runtime that is not bound to any particular name. These are called anonymous functions (or lambda functions ). An anonymous function definition looks similar to the definition above, but doesn’t have a name.

function (x) {
 return x*x;
};

Since there is no name associated with it, there is no way to call this function. But since all functions are simply objects, we could store our anonymous function in a regular variable called square:

var square = function (x) {
 return x *x;
};

As it turns out, this is identical to the original function we created. And, in fact, the first form is actually just syntactic sugar on this form. Similar to our original function, we can invoke it by putting (param-list)after it. So we can write:

square(1); // 1
square(2); // 4
square(3); // 9

If we can invoke any function by putting (param-list)after it, then we should be able to invoke our anonymous function directly.

var foo = function (x) {
 return x*x;
}(10);

When this has finished executing, foo will be set to that value 100. Why? Because after the anonymous function was created, it was immediately invoked with a parameter (10). The anonymous function was evaluated, and it returned a value of 100. This return value is what was assigned to foo. This type of construct is called a self-invoking function.

Consider this case:

var foo = function () {
  return fuction (y) {
    return y*y*y;
  }
}();

foo(3);  // What does this evaluate to?

What is the value of foo(3)?. The outer anonymous function was self-invoked, returning another anonymous ‘cubing’ function. This ‘cubing’ function was invoked with parameter (3), and the result is 27.

So the real question is why would you ever want to use such an ugly construct? I will answer that question with another question:


var foo = function () {
 var counter = 0; return function () {
 counter = counter + 1;
 return counter;
 }
}();

What happens when we call foo()?:

The outer anonymous function is self invoked, and returns the inner anonymous function.

When the self-invoked function returns, it (and all its variables) should cease to exist based on c-style scoping rules. But, the inner anonymous function contains a reference to a variable, counter that was defined in the outer anonymous function (which will have exited long ago). So what happens?

The answer to this question is closures! Stay tuned for part 2.

1 Comment

You must be Logged on to comment or reply to a post.

Former Member

May 15, 2009 at 6:30 pm

[...] RSS ← The Power of Closures - Part 1 [...]

The Power of Closures – Part 1

Assigned Tags