Dealing with loops with create Closures

So consider this problem. Let’s say you are constructing a menu and you need to set up some onclick events for the items in the menu.

So this is how one might set things up from first principles:

// Set up an array of items.
var MENUitems = ["Company", "Product", "History", "Contact"];

var H = '';
for (var i=0; i < MENUitems.length; i++) { 
   H+= "<div class='MENUitem'>" + MENUitems[i] + "</div>" 
}
document.body.innerHTML = H;

And you might have some light styling:

.MENUitem {
    display: inline-block;
    padding: 5px;
    border: gray solid;
    margin: 2px;
}

Then you set up some onclick handlers…

var MENUdom = document.querySelectorAll(".MENUitem");  // Get a NodeList
for (var i=0; i < MENUitems.length; i++) {
   MENUdom[i].onclick = function(E){ console.log("Clicked " + MENUitems[i]);}
}

But oh crap.

It’s doesn’t work as expected. Instead of forming a closure with the value i being 0, 1, 2 and 3, all the functions get the value of i defined as it is at the end of the loop - namely 4. And so we end up with:

A fix for this is to use a special keyword which is “let” instead of var. So you do this instead:

It’s kind of hacky workaround a language flaw in Javascript. Using the let keyword isn’t the only way to solve this problem. There are other workarounds possible. Read this article:

Loops, Closures and Ajax - David Young

For some other good ideas on how to solve this problem.

This video also touches on the concept of NodeList objects.