Javascript Closure After Using Anonymous Function

I'm working on closure so hard, and I know that in the loop, new function refer closure using the last value of the iterator so the following function's result is three times 'ite

Solution 1:

Assuming that the purpose of this code is just to learn; you create an anonymous function but you're still referring to the i in the previous scope, so you do not change anything from the first code you wrote initially; i still has the last value (list.length).

In order to avoid that, you need to have the current value of i in the scope of the function you've created:

functionbuildList(list) {
  var result = [];

  for (var i = 0; i < list.length; i++) {
    var item = 'item' + list[i];
    result.push(function (index) { 
      returnfunction() {alert(item + ' ' + list[index])}
    }(i));
  }

  return result;
}

Alternatively you can use bind, to have partial application:

functionbuildList(list) {
  var result = [];

  for (var i = 0; i < list.length; i++) {
    var item = 'item' + list[i];
    result.push(function(index) {alert(item + ' ' + list[index])}.bind(null, i))
  }

  return result;
}

In ES6, or in Firefox with JS 1.8.5 enabled, you can use also let that declares block scope variable:

functionbuildList(list) {
  var result = [];

  for (var i = 0; i < list.length; i++) {
    var item = 'item' + list[i];
    let index = i;
    result.push(() =>alert(item + ' ' + list[index]));
  }

  return result;
}

In the last example there is also the ES6 arrow functions.

Solution 2:

You should pass the i to the anonymous function:

functionbuildList(list) {
  var result = [];
  for (var i = 0; i < list.length; i++) {
    (function(i){
      var item = 'item' + list[i];
      result.push( function() {alert(item + ' ' + list[i])} );

    })(i);
  }
  return result;
}

Solution 3:

i still refers to a variable bound to the parent scope, not the one introduced by the FunctionExpression.

The correct fix is to bind a new variable to the new scope

functionbuildList(list) {
  var result = [];
  for (var i = 0; i < list.length; i++) {
    (function(i){
      var item = 'item' + list[i];
      result.push( function() {alert(item + ' ' + list[i])} );

    })(i);
  }
  return result;
}

Note the i being passed into the function.