Let Const and Var

Question

<html> <head> <title>buttons - let and Const</title> </head> <body> <h1>Buttons</h1> <button>Button 0</button> <button>Button 1</button> <button>Button 2</button> <button>Button 3</button> <button>Button 4</button> <button>Button 5</button> <button>Button 6</button> <button>Button 7</button> <button>Button 8</button> <button>Button 9</button> <script> const buttons = document.getElementsByTagName("button");

  for(let i = 0; i < buttons.length; i++) {
      const button = buttons[i];
      button.addEventListener("click", function() {
          alert("Button " + i + " Pressed");
      });
  }
</script>

</body> </html>

I am confused by this loop and the concepts explained in the videos.

Firstly: const button = buttons[i]; why is this not throwing an error it is being re assigned every time through the loop.

Secondly why does the let i = 0 make it work.. ?

At the end of the loop i = 10 ?

its like there are 10 versions of i but it does not appear that explicit to me since I am used to using var i =0 and with each alert the is written into the alert?

Answer 1 · 2017-05-25T12:40:25Z

May 25, 2017 12:40pm

These are both scope issues.

The variable "button" has a scope of the loop's code block. That means each time through the loop, it is created fresh, and before the loop repeats, it is disposed. So while the loop may run several times, the constant is only assigned one time before it is disposed.

Now the reason why using "let" in loop initialization works but "var" would not is also a scope issue. Using "let" limits the scope to within the loop, so each event handler will have a separate value. But if you used "var", you would be creating a permanent global variable which all event handlers would share. And in the process of creating them, that value ends up being the number of handlers instead of the specific button number.

And to make posted code more readable, always use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area.

Answer 2 · 2017-05-25T14:57:51Z

May 25, 2017 2:57pm

Not an answer but a thanks you, for your explanation it made it a lot clearer.. Do you have a url where I can read more about this so I can get a firmer understanding..

Also without the keyword let, doing the above would seem to be fairly tricky.....

Welcome to the Treehouse Community

Looking to learn something new?

Laurence kite

Laurence kite

Let Const and Var

2 Answers

Steven Parker

Steven Parker

These are both scope issues.

Laurence kite

Laurence kite

Steven Parker

Steven Parker