title: example of closure with setTimeOut()
body: <p>
  Can someone explain to me why the code does not act as expected? </p>
  
  <p>WHy would this happen? I know it is due to "scoping", but I don't know the exact mechanism.</p>
  
  <p>"Considering the above code, the console will display four identical messages "The value undefined is at index: 4". "</p>
  
  
  
  <pre><code>const arr = [10, 12, 15, 21];
  for (var i = 0; i &lt; arr.length; i++) {
        setTimeout(function() {
             console.log(`The value ${arr[i]} is at index: ${i}`);
        }, (i+1) * 1000);
  }
  </code></pre>
  
  <p>
  declare i using 'let' solves the problem;</p>
  
  <p>putting setTimeOut() into IIFE also solves the problem, but I could not understand why.
  </p>