Towards Understanding Javascript Closures

This is a short note on javascript closures. There is considerable confusion and discussion on the internet (and in my head) about these things. And some of that might be due to the word "closure" itself. For me, "enclosure" captures my current understanding a bit better.

The "Father" of Closures
Peter Landin (1930-2009)

Image from his obituary in The Guardian

Apparently, the origin of the word "closure" in this context is due to Peter Landin, a fascinating British computer scientist who abandoned academia in 1970.

Here's the definition of "closure" from wikipedia:

a closure (also lexical closure or function closure) is a function or reference to a function together with a referencing environment

The referencing environment is the bit where stuff is stored and can be accessed. The "stuff" could be variables, functions... basically anything, and these can of course have their own closures.

I have been playing with different ways to visualize closures so that they are more easily and quickly comprehendible. Ideally, this can be done in an animated fashion that shows how things are done as you step through the relevant code, but this is complicated (imo) by the abruptness of going from one line of code to the other as things are built up. That makes the example below a bit ironic, I guess, as it simply tries to show the before and after.

Anyway, the example below shows some basic javascript code, whereby two javascript objects are created (the objects in this case happen to be functions), and the closure for each is shown.

A Barebones Closure Example

In this case, two objects are created that returns the value passed to the function.

function makeThing(x) {
    var myLocalVariable = x;
    var getMyVariable = function() {
                       return myLocalVariable;
                   };
    return getMyVariable;
}

var aThing1 = makeThing(5);
var aThing2 = makeThing("Hey there");

console.log(aThing1()); //prints "5" to the console
console.log(aThing2()); //prints "Hey there" to the console

In this case, the closure for each object contains its own variable myLocalVariable, which is set to whatever you happened to pass the function makeThing when you created the object. This is a variable, and could be changed by other functions/whatever within the function, although that is not done in this case.

aThing1 The Closure Contents: myLocalVariable (has value 5)

aThing2 The Closure Contents: myLocalVariable (has value "Hey there")

Things can get rather involved with more complicated uses of closures, but I think that this captures some of the bare essence of the issue. Personally, I also think that there is conceptual baggage around the word "function" that can impede understanding these concepts as well.

Note that if you view this within a Chrome Heap Profile (example usage here), it won't show "5" as a closure variable because for performance/space reasons they do not include variables that contain numbers as part of the Heap Snapshot.

Did Brendan Eich, the inventor of javascript, ever meet Peter Landin? Landin did not pass away until 2009, and while he may have not been particular interested in technology (according to what I could find on the web about him), he surely was aware of javascript's rise in popularity. I am naively but patiently awaiting an email response from Eich about this.

The day I wrote this note, I learned via @DashingD3js that Todd Motto wrote a nice summary of scope in javascript, which includes closures but also a discussion of many more important javascript concepts.