Gotcha gotcha

In "a huge gotcha with Javascript closures," Keith Lea describes an example function written in JavaScript with surprising behavior. But he misattributes the unexpected results to the language spec's discussion of "joining closures." The real culprit, rather, is JavaScript's rules for variable scope. Let me explain.

Here's Keith's example:

function loadme() {
 var arr = ["a", "b", "c"];
 var fs = [];
 for (var i in arr) {
   var x = arr[i];
   var f = function() { alert(x) };
   f();
   fs.push(f);
 }
 for (var j in fs) {
   fs[j]();
 }
}

We might expect the function to produce "a", "b", "c", "a", "b", "c", but surprisingly, it displays "a", "b", "c", "c", "c", "c"! Wha' happened?

The answer is that, in JavaScript, all var declarations are hoisted to the top of the nearest enclosing function definition. So while x appears to be local to the for-loop, it is in fact allocated once at the top of the loadme function and in scope throughout the function body. In other words, the above function is equivalent to:

function loadme() {
 var x;
 var arr = ["a", "b", "c"];
 var fs = [];
 for (var i in arr) {
   x = arr[i];
   var f = function() { alert(x) };
   f();
   fs.push(f);
 }
 for (var j in fs) {
   fs[j]();
 }
}

In this version, it's clear why the function behaves as it does: the closure is mutating a global variable every time it's called!

To get the desired behavior, you need to use nested functions instead of loops, e.g.:

function loadme() {
 var arr = ["a", "b", "c"]
 var fs = [];
 (function loop(i) {
   if (i < arr.length) {
     var x = arr[i];
     var f = function() { alert(x) };
     f();
     fs.push(f);
     loop(i + 1);
   }
 })(0);
 for (var j in fs) {
   fs[j]();
 }
}

Now x is truly local to the loop body, and the function produces "a", "b", "c", "a", "b", "c" as expected.

Update: My suggested fix is really bad advice for ECMAScript Edition 3! I should never recommend using tail recursion in a language that is not properly tail recursive. If all goes according to plan for proper tail calls in Edition 4, my suggestion would be fine for that language. But today, you can't use tail recursion. Instead, you should use any of the existing lexical scope mechanisms in ECMAScript for binding another variable to the loop variable i.

Solution 1 - wrap the closure in another closure that gets immediately applied:

function loadme() {
  var arr = ["a", "b", "c"];
  var fs = [];
  for (var i in arr) {
    var x = arr[i];
    var f = (function() {
                 var y = x;
                 return function() { alert(y) }
             })();
    f();
    fs.push(f);
  }
  for (var j in fs) {
    fs[j]();
  }
}

Solution 2 - wrap the loop body in a closure that gets immediately applied (suggested in the comments by Lars):

function loadme() {
  var arr = ["a", "b", "c"];
  var fs = [];
  for (var i in arr) {
    (function(i) {
        var x = arr[i];
        var f = function() { alert(x) };
        f();
        fs.push(f);
     })(i);
  }
  for (var j in fs) {
    fs[j]();
  }
}

Solution 3 - wrap the closure in a let-binding (in JavaScript 1.7, currently implemented only in Firefox 2):

function loadme() {
  var arr = ["a", "b", "c"];
  var fs = [];
  for (var i in arr) {
    var x = arr[i];
    var f = let (y = x) function() { alert(y) };
    f();
    fs.push(f);
  }
  for (var j in fs) {
    fs[j]();
  }
}

Solution 4 - ditch var entirely and only use let (again, currently specific to Firefox 2):

function loadme() {
  let arr = ["a", "b", "c"];
  let fs = [];
  for (let i in arr) {
    let x = arr[i];
    let f = function() { alert(x) };
    f();
    fs.push(f);
  }
  for (let j in fs) {
    fs[j]();
  }
}

The moral of the story is that in ECMAScript Edition 4, let is a "better var", behaving more like you'd expect. But until you can rely on let as a cross-browser feature, you'll have to use solutions like 1 and 2.