Home/ Questions/Q 5944577
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T16:33:24+00:00

I have trouble understanding the scoping rules in Javascript. In the example below, I

  • 0

I have trouble understanding the scoping rules in Javascript.

In the example below, I would assume that scope url variable is private in the for-loop. And that the onload-event function would see this private instance.

But things does not seems work like that – the alert will popup with the last url twice.

If somebody can clarify what is going on, I’ll be grateful. 

<html>
<head>
</head>
<body>
<script type="text/javascript">
    var testArray = ["http://g0.gstatic.com/images/icons/onebox/weather_rain-40.png", "http://g0.gstatic.com/images/icons/onebox/weather_scatteredshowers-40.png"];
    for (var i=0;i<testArray.length;i++){
        var img = new Image();
        var url = testArray[i];
        img.onload = function(){
            alert(url);
        }
        img.src = url;
    }
</script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Javascript is not block-scoped, and thus requires a new function every time you want a new scope. See the answer by patrick dw.

    This is why it is advantageous to use [].map(function(x){...}) or [].forEach(function(x){...}) which are in the javascript standard, since you’ll need to define those functions anyway.

    var imageArray = urlArray.map(function(url) {
    var image = new Image();
    image.src = url;
    image.onload = function() {
        alert(url);
    };

    return image;
});
    • 0