In JavaScript, when looping through a FOR loop, how do I pass the value of the item in an array to an anonymous function?

Question

In JavaScript, I need to loop through a for loop to get the value of an item in an array, and pass this to an anonymous function. A simplified example of this is below:

var aFunctions = []; 
var aStrings = ["a","b","c"];
for (var i = 0; i < aStrings.length - 1; i++) {
    aFunctions[i] = function () { alert(aStrings[i]); };
}
aFunctions[0](); //alerts "c" instead of "a"

I can see why this is happening - the variable i is being set to 2 when the loop exits, and then when I call aFunctions[0](), the function fires off and evaluates aStrings[i] rather than aStrings[0].

What I want to know is how to get the value of aStrings[i] returned within my for loop, and not when it's executed.

To give more specific detail, I'm working on a Google Maps page, and the markers are stored in a JavaScript array client-side, and in a DB server-side. I write the array at page-load and after that's complete I want to generate the markers, and give them each a custom InfoWindow with the text set to an HTML string. This is the specific code I use:

for (var i = 0; i < tGoogleMarker.length - 1; i++) {
    var text = tGoogleMarker[i][4];
    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(tGoogleMarker[i][0], tGoogleMarker[i][1]),
                        map: map,
                        flat: false,
                        icon: tGoogleMarker[i][2],
                        shadow: tGoogleMarker[i][3]
                        });
    google.maps.event.addListener(marker, 'click', function () { ShowMarkerContentPopUp(this, text); });
}

Instead of getting the HTML string of the specific marker, I get the text of the last item in the array used for all markers.

score 2 · Answer 1 · edited May 23 '17 at 12:20

2

You need to use closure. Read More about this here: How do JavaScript closures work?

var aFunctions = []; 
var aStrings = ["a","b","c"];
for (var i = 0; i < aStrings.length - 1; i++) {
    aFunctions[i] = (function(val){
      return function() {
          alert(val)
      }
    })(aStrings[i]);
}
aFunctions[0](); //alerts "c" instead of "a"

edited May 23 '17 at 12:20

Community

1
1

answered Feb 04 '15 at 07:19

shawnnyglum

211
4
14

score 0 · Accepted Answer · edited May 23 '17 at 11:43

0

You can use a closure around the addListener part:

(function(text){
    google.maps.event.addListener(marker, 'click', function () { ShowMarkerContentPopUp(this, text); });
})(text);

This creates a new scope and takes the text variable as an argument. It means the text inside the closure is protected from being changed outside of the closure.

The same can be done to solve your first example:

for (var i = 0; i < aStrings.length - 1; i++) {
    (function(i){
        aFunctions[i] = function () { alert(aStrings[i]); };
    })(i);
}

More info on closures:

edited May 23 '17 at 11:43

Community

1
1

answered Feb 04 '15 at 07:18

MrCode

63,975
10
90
112

Perfect, this solution worked for my problem - I appreciate the responses to both of my snippets and the links to good `closure` reference pages. – Bassmanjase Feb 04 '15 at 22:46

score 0 · Answer 3 · answered Feb 04 '15 at 07:37

var aFunctions = []; 
var aStrings = ["a","b","c"];
for (var i = 0; i < aStrings.length; i++) {
    aFunctions[i] =  (function(arg) { return function() { alert(arg); };})(aStrings[i]) ;
}
aFunctions[0](); // alerts "a"
aFunctions[2](); // alerts "c"

http://jsfiddle.net/dbtncehf/

score 0 · Answer 4 · answered Feb 04 '15 at 09:05

Well, you can avoid needing to worry about closures much and still achieve the necessary results. It can be done by attaching each text variable to its respective marker. This way your anonymous function can call it using this.text

for (var i = 0; i < tGoogleMarker.length - 1; i++) {
var marker = new google.maps.Marker({
                    text: tGoogleMarker[i][4],
                    position: new google.maps.LatLng(tGoogleMarker[i][0], tGoogleMarker[i][1]),
                    map: map,
                    flat: false,
                    icon: tGoogleMarker[i][2],
                    shadow: tGoogleMarker[i][3]
                    });
google.maps.event.addListener(marker, 'click', function () { ShowMarkerContentPopUp(this, this.text); });

}

In JavaScript, when looping through a FOR loop, how do I pass the value of the item in an array to an anonymous function?

4 Answers4