0
<script type="text/javascript">   
function buildList(list) {
  var result = [];
  for (var i = 0; i < list.length; i++) {
    var item = 'item' + list[i];
    result.push( function() {console.log(item + ' ' + list[i])} );
  }
  return result;
}

function testList() {
  var fnlist = buildList([1,2,3]);
  fnlist[0]();
}
testList(); 
</script>

Question:

IN firefox->console, it shows item3 undefined, why?

1

2 Answers 2

0

you can change

result.push( function() {console.log(item + ' ' + list[i])} );

to

result.push( function() {console.log(item + ' ' + list[i] + ' ' + i)} );

then you find that i is 3, you should use clousre to avoid this problem.

1
  • well, you are right, but I have set condition(i < list.length) for loop,:for (var i = 0; i < list.length; i++),if i=3 which is = list.length, should not execute this line: result.push( function() {console.log(item + ' ' + list[i])} ); so why? Jul 3, 2013 at 4:19
0

It is because the evaluation of closure reference happens at the execution time of the statement (item + ' ' + list[i] + ' ' + i, by that time value of i becomes 4, this list[4] returns undefined.

The execution sequence will be, you are creating a closure variable i in the loop, so all the function references pushed to result references the same instance of i, any modification done to the variable will be reflected in each of the added function irrespective of when it was added.

The solution in such a case is to create a private closure inside the loop statement using a iife

Demo: Fiddle

4
  • there is a solution is that : var tempI = i; result.push( function() {console.log(item + ' ' + list[tempI])} );
    – Hung Doan
    Jul 3, 2013 at 4:16
  • @hungdoan, it still will not work as expected because javascript does not have block level scope jsfiddle.net/arunpjohny/8mTCn/3 Jul 3, 2013 at 4:19
  • well, but the end, i=3 not 4, but how come when i=3, can still execute this line: result.push( function() {console.log(item + ' ' + list[i])} );? I have set the condition i < list.length, list.length=3 Jul 3, 2013 at 4:31
  • @user2507818 sorry, i thought you were passing 4 elements, then also the logic holds because list[3] is undefined Jul 3, 2013 at 4:44

Not the answer you're looking for? Browse other questions tagged or ask your own question.