Why does dynamically adding .onclick to an img element, when in a loop, require return function()?

Question

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) {
        return function() {
            hotLink(photo); //window.location = '/pics/user/' + photo.user_id;  
        };  
    })(photos[i]);

Also, why do I have to include the (photos[i]); at the end?

Before, I had this, and the onclick would always link to the last photo[i].

  for (var i = 0; i < photos.length; i ++) {
      img.onclick = function() {
          window.location = 'pics/user/' + photo.user_id
      };
  }


   

Answer 1

Because a function invocation is the only way to create a new variable scope in JavaScript.

So you pass photos[i] to that function, and it becomes local to the scope of that invocation.

Then you also create the handler function in that same scope, so the handler is referencing that specific photo.

So in the end, if the loop iterates 10 times, you're invoking 10 functions, creating 10 new separate variable scopes, which reference each individual photo and create and return the handler from each separate scope.

---

These things are sometimes clearer if you don't inline the function like that.

for (var i = 0; i < photos.length; i ++) {
    img.onclick = createHandler(photos[i]); // pass individual photos to createHandler
}

function createHandler(photo) {
       // In here, the individual photo is referenced

       // And we create (and return) a function that works with the given photo
    return function() {
        hotLink(photo); //window.location = '/pics/user/' + photo.user_id;
    };
}

So if the loop runs for 10 iterations, we invoke createHandler() 10 times, each time passing an individual photo.

Because each function invocation creates a variable scope, and because we create the event handler inside each scope, what we end up with is all 10 functions being created in 10 variable scopes, each of which reference whatever photo was passed.

---

Without the per-iteration function invocation, all the handler functions are created in the same variable scope, which means they all share the same variables, which are likely being overwritten in each loop iteration.

Answer 2

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:

function foo(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.

Answer 3

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