Can someone please explain to me how the scope works for this array of anonymous functions?

Question

Quite simply, I'd like to know why the call to arr0 seems to drag in the value of i instead of the one stored in the function at that position.

<script>
  var arr = [];

  for(var i = 0; i < 3; i++) {
    //Assign anonymous functions to the array in positions 0 to 2
    arr[i] = function() { console.log("function " + i); }
  }

  for(var i = 0; i < 3; i++) {
    //The output for these function calls is correct!
    arr[i]();
  }

  //Here I expected to output: function 0, but instead outputs: function 3 WTF!
  arr[0] ();

</script>

Here's the output:

function 0
function 1
function 2
function 3

For the last call, i.e: arr[ 0 ] (); I expected the output to be "function 0", but surprisingly IT'S NOT... Could someone please care to explain why?

Thanks in advance!

Answer 1

It's a common problem, after you've read the duplicate posted in the comments, here's a possible solution:

var arr = [0,1,2].map(function(i){
  return function(){
    console.log("function " + i);
  };
});

for(var i = 0; i < 3; i++) {
  arr[i]();
}

arr[0]();

By creating an isolate scope with map we avoid the problem altogether. Using underscore's _.range you could replace your loop patterns with:

_.range(0,10).map(function(index){
  ...
})

Answer 2

The question linked to in one of the comments will give you the general answer.

But I'll also specifically address what you're seeing here, because it might still be slightly confusing even after understanding the answers to the other question.

The main thing to realize here is that there is only one i variable. Even though it looks like you're declaring it twice with the var keyword, the second "declaration" is essentially ignored and treated like any ordinary assignment. You see, the for keyword does not introduce a new scope in JavaScript. So these two snippets are equivalent:

for (var i = 0; i < 3; i++) {}

And:

var i;
for (i = 0; i < 3; i++) {}

Once you realize that, and you get that the functions you create in the first loop all close over the same i, then you can understand why the second loop appears to be "correct" by your intuition: at the start of the loop you set i to 0, and then after each call you increment it. So even though all of them close over the same i, you're changing its value between calls!

And of course, for that last call, the value of i is still 3 since that's what it was at the end of the second loop and you didn't change it from that.

Answer 3

Well this is a mixed bunch...

You are using the same i variable (despite "re-defining" it in the second loop, it's still the same i) that is placed in the global scope

As a result, in the second loop, each iteration alters the value of that global i, which results in the

function 0
function 1
function 2

function 3

output.

It was, by the way, absolutely not the expected result, if you used k in the second loop:

<script>
  var arr = [];

  for(var i = 0; i < 3; i++) {
    //Assign anonymous functions to the array in positions 0 to 2
    arr[i] = function() { console.log("function " + i); }
  }

  for(var k = 0; k < 3; k++) {
    //The output for these function calls is correct!
    arr[k]();
  }

  //Here I expected to output: function 0, but instead outputs: function 3 WTF!
  arr[0] ();

</script>

That would produce:

function 3 
function 3 
function 3

function 3

and that is the infamous loop problem referred in the link above (in comments).

The reason is that functions, defined in your first loop (which, BTW, you should try to avoid in general case), "close" on the variables that are in the same scope as their definition - i in this case. That means that whenever value of i is changed later on, it will be reflected in that function.

The last example shows it in action - i is changed by the first for loop, so when the loop is finished - it's value is 3. All functions you defined now have the same value of i - 3.

To make the output like this:

function 0
function 1 
function 2    
function 0

you can do this (not that it's that great, structure wise):

var arr = [];

for(var i = 0; i < 3; i++) {
    //Assign anonymous functions to the array in positions 0 to 2
    arr[i] = (function(index){ return function() { console.log("function " + index); };}(i));
}

for(var k = 0; k < 3; k++) {
    //The output for these function calls is correct!
    arr[k]();
}

//Here I expected to output: function 0, but instead outputs: function 3 WTF!
arr[0] ();

That produces the ddesire result.

Here, you define an anonymous function:

(function(index){ ... }(i))

that is immediately invoked with i as a parameter. That parameter is referred to as index in the function body (not that it's important, even if you still called it i - it would work, since the "inner" i would shadow the "outer" one).

That function returns a function that has a different closure - on index, which is not important since index is not avialable after the immediately invoked function exists.

Another way would be using some sort of iterator - map, where supported, would do OK.