Scope Troubles In Javascript When Passing An Anonymous Function To A Named Function With A Local Variable

Sorry about the title - I couldn't figure out a way to phrase it. Here's the scenario: I have a function that builds a element: buildSelect(id,cbFunc,...) Inside buildSelect it d

Solution 1:

You need to capture that xm value by closing around it in its own scope.

To do this requires a separate function call:

buildCallback( curr_xm ) {

      // this function will refer to the `xm` member passed inreturnfunction(){ CallBack(curr_xm,...) },...);
}

for(var i = 0; i < xs.length; i++)
{
    var xm = xs[ i ];
    buildSelect(blah,buildCallback( xm ),...);
}

Now the xm that the callback refers to is the one that you passed to buildCallback.

If you have other uses for i that need to be retained, you could send that instead:

buildCallback( curr_i ) {


      // this function will refer to the `i` value passed in
    return function(){ CallBack( xs[ curr_i ],...) },...);
}

for(var i = 0; i < xs.length; i++)
{
    buildSelect(blah,buildCallback( i ),...);
}

Solution 2:

The problem is indeed scope-related -- JavaScript has only function scope, not block scope or loop scope. There is only a single instance of the variables i and xm, and the value of these variables changes as the loop progresses. When the loop is done, you're left with only the last value that they held. Your anonymous functions capture the variables themselves, not their values.

To capture the actual value of a variable, you need another function where you can capture the local variable:

function makeCallback(value) {
  return function() { CallBack(value, ...) };
}

Each call to makeCallback gets a new instance of the value variable and if you capture this variable, you essentially capture the value:

for(var i = 0; i < xs.length; i++)
{
    buildSelect(blah,makeCallback(xs[i]),...);
}

Solution 3:

Yes, I think a closure would help:

for(var i = 0, l = xs.length; i < l; i++)
{
    buildSelect(
        blah,
        function(xm){
            return function(){
                CallBack(xm,...)
            };
        }(xs[i]),
        ...
    );
}

Edit: I also optimised your for loop slightly.

Edit: I guess I'll add an explanation. What you're doing is creating an anonymous function which takes one argument (xm) and calling the function straight away (with the parenthesis right after). This anonymous function must also return your original function as an argument of buildSelect().

Solution 4:

Apparently there is a new let keyword that does what you want:

for(var i = 0; i < xs.length; i++)
{
    let xm = xs[i];
    buildSelect(blah,function(){ CallBack(xm,...) },...);
}