Point (1) has been pointed out by others such as Greg and anton above. Point (2) is a subtlety of the JavaScript semantics — though a var declaration may appear to be nested within the body of the for-loop, it is actually implicitly lifted to the entire scope of the enclosing function.

The short story is that the variable `x’ in your example is allocated once in the enclosing function and then mutated at each iteration of the loop.

See: http://calculist.blogspot.com/2005/12/gotcha-gotcha.html

function createFunction(x) {
return function() { alert(x); }
}
…
var f = createFunction(x);

…is equivalent to this:

var f = (function (x) { return function () { alert (x) } })(x);

…which is the same solution that Maarten gave above. Both demonstrate the correct use of closures in this case, and are not a “workaround”. The original code is simply based on an error in understanding of what closures are supposed to do.

“This problem has to do with the moment variable names are dereferenced, or substituted for the values they represent.” (Maarten)

“If the values of the varaibles defined in the scope change after the nested function is defined, invocations of the nested function will see the modified value.” (David Flanagan)

In a proper closure, such as the ones you find in Scheme, a closure *should* see changes made to a variable that has been closed over. But that isn’t the problem here. The problem here is that the “var” statement doesn’t create a new location. Thus,

var shared = 666;
for (var i=0; i

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

Nested functions include a reference to the scope in which they are defined. But they do not make a copy of that scope. If the values of the varaibles defined in the scope change after the nested function is defined, invocations of the nested function will see the modified value. This example at my blog
http://www.davidflanagan.com/blog/2005_07.html#000065 shows two different nested functions that share a scope. One of the nested functions is a property getter and the other is a property setter. If you call the setter, it changes the value of a variable in the scope. And that change is visible through the getter function.

Any nested functions created within the same containing function invocation will share the same scope. This is not what you want in the example you present here. Your workaround is the correct one: you’ve got to have a function maker function. Each separate invocation of this function making function will create a new, independent scope, and therefore the functions it returns will be independent of each other.

Basically, your solution won’t suffer from a function declaration joining optimization. Also, it’s all about (mis?)understanding scope chains and lexical scoping. The following tweak to loadme(), for example, (when run in firefox) shows no joining is happening, but you instead get a distinct function created every time…


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

So, in too many bloated words, Erik’s right.