[Javascript] Function scope

We have code like: 

var numbers = [1,2,3];

for(var i in numbers){ 
    setTimeout(function(){console.log(numbers[i]); 
    }, 0);
}

//3
//3
//3

Note:

1. function block doesn't create scope!

2. setTimeout function run after all the other code finished.

 

Therefore, before setTimeout get run, for block already exec 3 times and i was set to 2. 

Once setTimeout get running, it prints out numbers[i] which is 3.

 

Now, we change the code to:

var numbers = [1,2,3];

for(var i  in  numbers){
   (function(){
       var j = i;
        setTimeout(function(){
           console.log(numbers[j]);
        }) 
   })();
}

//1
//2
//3

 

Note:

1. function does create new scope.

2. the (function(){})() run immedatly.

3. (function(){}) inside for block actually is closure which does remeber the local var value (in our case is var j).