CODEWITHSUNDEEP
javascriptscopeanonymous-function
Tim
Tim

Reputation: 14154

JavaScript context in anonymous functions

I want to set a function as a property of each element in an array, but call it with different arguments. I thought I'd solve it using an anonymous function:

for ( var i = 0; i < object_count; i++ ) {
    objects[i].callback = function(e,x,y){ cb(e,x,y,i) };
}

However, the function is called with the value that i has at the time. How would I preserve the context?

Upvotes: 2

Views: 2629

Answers (2)

Pointy
Pointy

Reputation: 413717

You can wrap the assignment in a function, or the right-hand side at least:

    objects[i].callback = (function(i) { return function(e, x, y) {
      cb(e, x, y, i);
    })(i);

The "outer" anonymous function is called right away, copying the loop variable "i" into an argument (which I also called "i"; some think it's confusing to do that while others say it's confusing not to do it, so you can decide :-) which is then used by the returned "inner" anonymous function.

Another approach to this problem would be to use a utility function for this purpose instead of a simple in-line anonymous function. In this case, it's made slightly tricky because you want "i" to be the last parameter of the actual callback function. The Functional JavaScript library has a cool utility that lets you "pre-populate" selected arguments of a function with fixed values, giving you a function that lets you pass in arguments to the non-fixed ones; it'd look something like this:

  objects[i].callback = (function(e, x, y, i) { return cb(e, x, y, i); }).partial(_, _, _, i);

Whether that's better or worse is a matter of style and opinion.

edit just had a little more coffee - I think that I was being a little silly thinking that I had to use "partial()" above. The fact that the inner (the "real" function) wants "i" at the end of the parameter list is really not relevant to the way things need to be set up. That above example could also be done like this:

   objects[i].callback = (function(i, e, x, y) { return cb(e, x, y, i); }).curry(i);

which is way less bizarre. (Either would work however. At least, I think they would. :-)

Upvotes: 10

Miguel Ventura
Miguel Ventura

Reputation: 10458

When you write

for (var i = something; ...) {
  a[i] = function() { x(i); }
}

The i in your functions will be the same for all functions (it's the very same variable you define in the scope of your for loop.

What you want to do is to have a variable that's specific for each function context. You could do something like this

for (var i = something; ...) {
  (function () {        // using an anonymous function, we create a private context
     var new_i = i;     // new_i has the value of 'i' but exists solely in this
                        // private context
     a[i] = function() { x(new_i); }
                        // the assigned function now refers a variable of the private
                        // context, which will be different on the following loop
                        // iterations
  })();
}

You can get more information on this topic by searching how closures and scope work in JavaScript.

Upvotes: 3

Related Questions