Why Does Dynamically Adding .onclick To An Img Element, When In A Loop, Require Return Function()?

This solution works, but I don't understand what the second 'return function()' does? for (var i = 0; i < photos.length; i ++) { img.onclick = (function(photo) { ret

Solution 1:

When you do this (assuming there's a photo = photos[i] there that you left out in your question):

img.onclick = function() { window.location = 'pics/user/' + photo.user_id };

The variable photo inside the function refers to the same variable as photo outside the function. It's not a snapshot that gets the current value of the variable at the time you define the function; it's just a reference to the same variable. The surrounding loop changes the value of that variable on every iteration, but it doesn't create a new variable each time; it's reusing the same one. So all the functions you generate reference that exact same variable - the one and only photo.

By the time anyone actually clicks on the image and calls the function, the loop has long since terminated, and photo is gone from the main program's scope, but it's still out there in memory because all those functions still have references to it. And they will find it still pointing to the last item in the list, because that was the last thing assigned to it.

So you need to give each onclick function its very own variable that won't change once the function is created. The way to do that in Javascript, since it doesn't have block scope, is to call a function and pass the value in as a parameter. Function parameters and variables declared inside a function (as opposed to photo in the non-working example above, which is used inside the function but declared outside it) are created fresh on every function invocation. When photo is declared as a function parameter, each onclick gets its very own copy that nothing else can modify, so it still has the right value when someone finally clicks the image.

It might be clearer if it used a static function-generator function; there's really no reason to do the inline declare-and-call thing. You could declare this once, outside the loop:

function makeOnclick(somePhoto) {
    return function() { hotlink(somePhoto); }
}

And then the loop body could do this:

img.onclick = makeOnclick(photo)

You're calling makeOnclick and passing it photo as a parameter. The makeOnclick function is declared far away, where it couldn't use photo directly even if you wanted it to; it can't see that variable at all. Instead, all it has is its local parameter somePhoto - which is created as a brand new variable every time you call makeOnclick. It's initialized with the value of photo at the point of the call, but it's just a copy, so when photo changes on the next loop iteration, that particular instance of somePhoto will stay the same. When the next iteration calls makeOnclick, it will create a new instance of somePhoto initialized to the new value of photo, and so on. So even though the inner function that makeOnClick is returning is inheriting the somePhoto var, that var was just created especially for that instance of makeOnClick; every one of those returned functions gets its own private somePhoto.

Your working code above is doing exactly the same thing in a slightly different way. Instead of declaring the makeOnclick function once, outside the loop, and calling it a bunch of times, it's redeclaring it every time through the loop as an anonymous function which it then calls immediately. This code:

img.onclick = (function(x) { blah(x); })(photo);

is the same as this:

functionfoo(x) { blah(x); }
img.onclick = foo(photo);

without having to give the function a name. In JavaScript in general, this:

(function (x,y,z) { doSomething(x,y,z); })(a,b,c);

is the same as this:

function callDoSomething(x,y,z) { doSomething(x,y,z); }
callDoSomething(a,b,c);

except the function has no name and is not saved anywhere; it goes away right after it's called.

So declaring the onclick-generator function every time through the loop and calling it immediately all at once is nice and concise, but not terribly efficient.

Solution 2:

The returned function is a closure. When you're looping through like that i is updating on each loop until the end of the loop where you're stuck with the last image. Adding the self executing function and passing photo[i] in it will permanently enclose the current value within the returned function as photo.

Here is more information on closures: How do JavaScript closures work?

And here for more information on your current issue: JavaScript closure inside loops – simple practical example