Question

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?

Answer 1

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. 🙂