Do You Really Know How Functions Work?

A function is pretty simple, right? It’s just a reference to a block of code that get’s executed when called…

Kind of, but not quite. You see, functions also remember scope and bind to that scope when created, even when the calling context has changed, they can remember their original local context. This is called a closure.

Lexical Scope of Nested Functions

What happens in the following code?

var greeting = "How do you do?";
function howdy() {
var greeting = "howdy";
function speak() {
console.log(greeting);
}
return speak();
}
howdy();

If your answer was it returns howdy then congratz! Now, what if we make one small tweak?

// code omitted...
return speak;

This time instead of returning the evaluation of the speak function we return a reference (notice the missing parens). If we invoke that function with howdy()(); in the global context, what will our greeting be?

Hint: it will still be howdy.

Hmm, it seems that somehow we are retaining information with our reference to speak. To prove this to you, let’s look at another example.

What if we called howdy as an anonymous IIFE like this:

var greeting = "How do you do?";
var im_an_IFFE = function () {
var greeting = "howdy";
function speak() {
console.log(greeting);
}
return speak;
}();

So, we define the funtion and call it on the same line (IFFE) and our im_an_IFFE variable gets a reference to the nestedvspeak function whose context is gone forever. Right?

Nope. Guess what, calling im_an_IFFE() still returns “howdy”.

How is this happening?

Closures

If you haven’t heard of closures this may have been very confusing. Afterall, context in JS is important, especially for functions that make use of the this keywords like with the Constructor Pattern.

But, when a function is created it doesn’t just remember the block of code inside it, it also remembers its environment. It is said to ‘bind’ (following lexical scoping rules AKA from inner nested functions upward) to its surrounding artifacts AKA variables.

Python handles closures much the same as does Ruby procs and lambda functions.

Why do all these languages use closures? They are especially useful for things like callbacks and using functions as first-class objects (more on this later).

Why is it Called a ‘Closure’?

As demonstrated above, a closure is a function that carries along its environment. What you probably didn’t know is that a function is like us; it doesn’t like unanswered questions… such as free variables, and so searches for answers. When it finds them, by searching upward lexically through its context, it is completely defined and, thus, finds ‘closure.’

And couldn’t we all use a little bit more closure in our lives?

If you are a programmer, then the answer is a definite yes.

Anyway, that is a quick definition of closures. If you know callbacks and how first-class objects first then you’re probably a Jedi master programmer.

As for me, I’m a sith…(#lightning is cool)

Notes

For an excellent dive into closures (and JS in general) I recommend checking out ‘Headfirst into Javascript.’