1

In the example code from 'let' keyword javascript reference @ Mozilla Developer network from section Cleaner code in inner functions:

var list = document.getElementById("list");

for (let i = 1; i <= 5; i++) {
  let item = document.createElement("li");
  item.appendChild(document.createTextNode("Item " + i));

  item.onclick = function (ev) {
    console.log("Item " + i + " is clicked.");
  };
  list.appendChild(item);
}

This code's description from underneath the sample states, that [...]Note that it does not work as intended if you replace let with var, since all of the inner functions would then return the same final value of i: 6[...]. I've checked this in webconsole, instead of #list (which I couldn't find in this document) I've targeted #quick-links ol, so var list = document.getElementById("quick-links").children[1];.

During first test, I pasted into js console opened for that document this sample, with changed target element - so #quick-links ol and run.

Result was seen at the bottom of left sidebar, SEE ALSO quick links. When clicked on dom element Item x, event script put text "Item x was clicked".

Second test, instead of let used var, and same event scripts printed text "Item 6 was clicked", no matter what item I've clicked on.

Why such behaviour? I know slightly the difference between let and var, but why i in case of var in loop is assigned to inner function only with value 6?

user7458546
  • 103
  • 1
  • 8
  • Because `let` defines a variable with block scope, which is rebound each time through the loop. –  Jan 26 '17 at 09:58
  • I know it's block scoped, so in this example, during every loop, there's created another *i* variable that exist only inside *for loop* particular scope. And *i* created using *var* would exist outside *for loop* scope. But bear in mind that assignment of *item.onclick* is inside for loop, yet when *var* is used, only *6* as a value of *i* is used... – user7458546 Jan 26 '17 at 10:13
  • It looks like I don't understand something, but why during every loop in case of using *var*, there's not used *i* with different value when assigning value to *item.click*? What docs should I read, that could englighten me? – user7458546 Jan 26 '17 at 10:20
  • Found hint in user's @CMS answer @ [How does a function in a loop (which returns another function) work?](http://stackoverflow.com/a/1552979/7458546) – user7458546 Jan 26 '17 at 10:44
  • Click event prints out the text with *i* variable's value that was last assigned in particular scope. So in case *var i*, the last value in scope is 6. But when used *let i*, for every value assignment to *i* in every loop there was created scope, in which *i* had particular value and onclick event function logged out that particular value. So when *let i == 3*, this value was particular scope wide, so onclick event could not print out anything other than 3 etc. – user7458546 Jan 26 '17 at 10:59
  • Because with `var`, by the time any of the functions are executed, the loop has completed, and the value of `i` is 6 for all of them. –  Jan 26 '17 at 11:47

0 Answers0