JavaScript function parameter by value

Question

have some problems with value and reference

this works:

var temp = ['aaa','bbb'];
var b = [];
b[1] = { text: temp[1], onclick: function(){alert(temp[1])}}; // aaa on clock
b[0] = { text: temp[0], onclick: function(){alert(temp[0])}}; // bbb on clock

[0] // aaa on click
[1] // bbb on click

but this don't works:

var temp = ['aaa','bbb'];
var b = [];
for (i=0;i<2;i++)
{
    b[i] = { text: temp[i], onclick: function(){alert(temp[i])}};
}

[0] // bbb on click
[1] // bbb on click

How can I solve this?

raina77ow · Answer 1 · 2014-03-31T12:55:33.763

Ah, the dreaded closure issue strikes again. ) The problem is that function defined within the loop just 'knows' that it should work with variable named i ('closures' around it) - but it doesn't know anything about the value of i at the very moment it's defined. Have you looked for closure issue, you'd have found plenty of similar issues here at SO. They both have one thing in common: there's a function defined (as event handler or timeout callback) within the loop, and that function somehow deals with the loop variable (or some value based on it).

One common solution to this problem is explicitly localizing loop variable for this function. For example:

  b[i] = (function(i) {
    return { text: temp[i], onclick: function(){alert(temp[i])}};
  })(i);

Explanation: at each step of the loop you create and immediately invoke (!) a function taking current value of i as an actual argument. This way the function it creates (as onclick handler, in this example) no longer works with 'closured' i - but a local one.

This - wrapping a function definition into another function - is a generic solution for this type of issues. But in this particular case it could be optimized:

  b[i] = (function(tempVal) {
    return { text: tempVal, onclick: function(){alert(tempVal)}};
  })(temp[i]);

... as you only work with temp[i] value here, and i alone is not used anywhere.

JavaScript function parameter by value

1 Answers1