Fixing the gallery

Now that we have learned about scopes and closures, let’s return to our assignment. What has happened to our code? Why doesn’t the program work the way that it is supposed to?

for (var i = 0; i < thumbnails.length; i++) {
  thumbnails[i].addEventListener('click', function () {
    fullPhoto.src = photos[i];
  });
}

The handlers that we created use the same counter variable i. The difficulty is that the handlers are not triggered immediately. Their code is only executed at the time the event occurs. By the time the first click handler runs, the loop has fully completed, the counter reaches its maximum value of  5 , and the handler function takes this value. In this example, the counter is declared with var at the top level. The loop does not create a separate scope for it on each iteration. Therefore, the value of i is found in the global scope, and so each handler accesses this value of 5. And we do not have a thumbnail with such an index or an element in the photos array, so no image is substituted.

How can we fix this problem? With closures over separate local data, that’s how!

We will create a function that will take a thumbnail and its corresponding element from the photos array as parameters. And we will be able to add handlers inside this function. We will call this function once for each thumbnail. Each call creates a separate local scope, and its handler keeps access to that call’s parameters through its closure.

Each handler will access the parameters from a different function call, so it uses the matching thumbnail and photo path instead of the shared loop counter.

Let’s gradually improve our program so that it works correctly.