title: let keyword and closures?
body: <p>I am learning about the new features in ES6. I have a question about let and it concerns this code:</p>
  
  <pre><code>for (let i = 0; i &lt; 45; i++) {
      var div = document.createElement('div');
      div.onclick = function() {
          alert("you clicked on a box #" + i);
      };
      document.getElementsByTagName('section')[0].appendChild(div);
  }
  </code></pre>
  
  <p>I am confused by this code. What is happening with that div object that is declared at the start of each loop? Is that a brand new, separate object each time, somehow enclosed in the block scope of i? Or is this div object being overwritten each pass through the loop and if so, how does it maintain it's connection to the i it is given via let?</p>