Using Javascript closure to pass additional data to an API callback function

Question

I have gotten this to work a bit but can't seem to figure out what the exact phrasing to get the for loop to pass the correct value will be.

for(i=0; i < the_stores.length; i++) {
    uid = the_stores[i].id;

    // get the lat long and write info to the console
    geocoder.getLatLng(the_stores[i].address, function(point) { return callbackFunc(point, uid); });
}

function callbackFunc(point, myID) {
    if(point !== null) {
        console.log(point.toString());
        console.log(myID);
    } else {
        return false;
    }
}

I'm using the Google Maps API, v2. I want that for loop to pass in a different value of uid to the callback function for each iteration through the loop, but right now it passes in the same value every time. Anyone know how to get the desired effect here? I feel like I'm pretty close. Thank you!

possible duplicate of Javascript closure inside loops - simple practical example — Felix Kling
– Felix Kling, Commented Mar 1, 2012 at 18:10

Tess Rosania · Accepted Answer · 2012-03-01 17:43:40Z

1

What you are looking for is an "Immediately Invoked Function Expression". Since JavaScript only has function scope, not block scope, all references to uid are being bound to the same variable.

(For more, see: http://benalman.com/news/2010/11/immediately-invoked-function-expression/)

Here's a simple way to do it:

for(i=0; i < the_stores.length; i++) {
  (function() {
    var uid = the_stores[i].id;

    // get the lat long and write info to the console
    geocoder.getLatLng(the_stores[i].address, function(point) { return callbackFunc(point, uid); });
  })();
}

answered Mar 1, 2012 at 17:43

Tess Rosania

10.1k2 gold badges22 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ZenLikeThat Over a year ago

Hm, it's still outputting the same ID's. Where is that anonymous function that you define on that second line supposed to be used? Thanks for your help.

Tess Rosania Over a year ago

It's called right away. Also, make sure you add a var in front of the uid declaration or it won't work.

ZenLikeThat Over a year ago

Did you edit your original response or am I just confused? At any rate, this works! Thanks so much man, I was scratching my head on this pretty hard.

Tess Rosania Over a year ago

No problem. I didn't end up editing it, although you did send me back to my console to make sure it was working :)

user1106925 · Accepted Answer · 2012-03-01 17:41:34Z

1

Use your callbackFunc to return a handler that references the values that need to be retained.

for(i=0; i < the_stores.length; i++) {

    // get the lat long and write info to the console
    geocoder.getLatLng(the_stores[i].address, callbackFunc(the_stores[i].id));
}

function callbackFunc(myID) {
    return function(point) {
        if(point !== null) {
            console.log(point.toString());
            console.log(myID);
        } else {
            return false;
        }
    };
}

answered Mar 1, 2012 at 17:41

user1106925

Comments

gilly3 · Accepted Answer · 2012-03-01 17:43:26Z

1

This is why I like Array.forEach() so much. It takes care of all these kind of common problems with loops for you. Use it like this:

the_stores.forEach(function (store, i) {
    geocoder.getLatLng(store.address, function(point) {
        return callbackFunc(point, store.id);
    });
}

Array.forEach() is native JavaScript in modern browsers, but for IE8 and IE7 you need to add it yourself. I recommend using the implementation provided by MDN. In my humble opinion, a JS5 shim that includes at least all the new Array methods should be boiler plate for any website.

answered Mar 1, 2012 at 17:43

gilly3

92.6k26 gold badges148 silver badges179 bronze badges

4 Comments

Tess Rosania Over a year ago

This is a handy solution when you can get away with it, but it's worth noting that polyfilling Array.prototype.forEach has its own consequences, namely that iterating over Array object properties will turn up forEach in those browsers. (Perhaps a rare case, but sometimes tricky.)

gilly3 Over a year ago

@Paul - for..in is for enumerating, not iterating. Developers that make the mistake of enumerating when they meant to iterate will and should learn their lesson. We shouldn't lower our coding standards because some developers misuse the language.

Tess Rosania Over a year ago

I agree 100%. I merely added my comment for completeness :)

user1106925 Over a year ago

@gilly3: +1 for your answer, but especially for your comment. Coding standards should be based on an understanding of the language, not on someone else's failure to understand.

Collectives™ on Stack Overflow

Using Javascript closure to pass additional data to an API callback function

3 Answers 3

4 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related