Javascript push function into array in a loop

Question

    var calls = [];

    for (var y = 1; y <= 10; y++) {
      for (var x = 1; x <= 10; x++) {

        calls.push(function() {
          yooMe(x, y);
        });

      }
    }

    for (var i in calls) {
      calls[i]();
    }

    var yooMe = function(x, y) {
      console.log(x + ':' + y);
    }

I would like to push some functions (x, y as parameters) into array with loop. After than I will loop the array in order to call the function. However, the result is not what I am expexting. The result is 10:10 10:10 ... 10:10. What I expect is 1:1 2:1 3:1 ... 10:10. I think the problem is varaiable referencing problem, but I have no idea how to due with this issue. P.S. Sorry for my poor english

It is the basic problem with `for` loop and a `function` call within it. — Vigneswaran Marimuthu, Apr 24 '15 at 07:27
Your english skill is great but your searching skill isn't that good. — suish, Apr 24 '15 at 07:30

score 8 · Accepted Answer · answered Apr 24 '15 at 07:28

8

It's because you reference the x and y that change in for loop so when you execute the function you have the last value, to fix this you need to add closure:

for (var y = 1; y <= 10; y++) {
  for (var x = 1; x <= 10; x++) {
    (function(x, y) {
      calls.push(function() {
        yooMe(x, y);
      });
    })(x, y);
  }
}

answered Apr 24 '15 at 07:28

jcubic

61,973
54
229
402

Thank you for quick answer. It works prefectly for me. – Eric Tang Apr 24 '15 at 07:54

score -1 · Answer 2 · answered Apr 24 '15 at 07:29

-1

var calls = [];

for (var y = 1; y <= 10; y++) {
    for (var x = 1; x <= 10; x++) {
        calls.push(yooMe(x, y));
    }
}

for (var i in calls) {
    calls[i]();
}

function yooMe(x, y) {
    return function () {
        console.log(x + ':' + y);
    }
}

answered Apr 24 '15 at 07:29

Vigneswaran Marimuthu

2,452
13
16

Thank you. However it does not work for my case. – Eric Tang Apr 24 '15 at 07:56

Javascript push function into array in a loop

2 Answers2