javascript closure in a for loop

Question

Possible Duplicate:
Javascript closure inside loops - simple practical example
Javascript: closure of loop?

so I would like the results to be 1,2,3 instead of 3,3,3. How do I set the context/scope so that the jobs are using the correctly scoped "i"?

function buildJobs(list) {
  var jobs = [];
  for (var i = 0; i < list.length; i++) {
    var item = list[i];
    jobs.push( function() {alert(item)} );
  }
  return jobs;
}

function testJobs() {
  var jobs = buildJobs([1,2,3]);
  for (var j = 0; j < jobs.length; j++) {
    jobs[j]();
  }
}

@hvgotcodes well there are over 9000 exact duplicates so it doesn't really matter if that one isn't :D — Esailija, Dec 28 '11 at 21:19
precisely, its amazing how many times this question gets asked.... — hvgotcodes, Dec 28 '11 at 22:39

Wayne · Accepted Answer · 2011-12-28T21:18:52.767

Wrap the inner function with a another function that's immediately executed and receives i as an argument:

function buildJobs(list) {
  var jobs = [];
  for (var i = 0; i < list.length; i++) {
    var item = list[i];
    (function(i) {
      jobs.push( function() {alert(list[i])} );
    })(i);
  }
  return jobs;
}

You're now closing over the i that is local to the wrapper function, which is a different variable in each iteration. (In your original configuration each inner function was closing over the same variable (whose value was 3 by the time any of the functions ever executed).)

score 1 · Answer 2 · answered Dec 28 '11 at 21:13

When loops generate functions, they all share access to the same scope of variables. And there can only be one variable on the same name in a given scope. So they all use i from the loop, and use the current value of i when they execute. And after the loop runs, it will always be 3.

function buildJobs(list) {
  var jobs = [];
  for (var i = 0; i < list.length; i++) {
    (function(i) {
      var item = list[i];
      jobs.push( function() {alert(item)} );
    })(i);
  }
  return jobs;
}

So introduce a new scope that captures the current value of i just for that iteration. You now have a new scope for each function generated, each with a different value for i.

score 0 · Answer 3 · answered Dec 28 '11 at 21:15

0

function buildJobs(list) {
    var jobs = [];

    list.forEach( function( item ){
        jobs.push( function(){
            alert(item);
        });
    });

    return jobs;
}

forEach

answered Dec 28 '11 at 21:15

Esailija

138,174
23
272
326

javascript closure in a for loop

3 Answers3

Linked