For loop printing out the same result

Question

Why does this javascript code output the same result?

var myAlerts = [];

  for (var i = 0; i < 5; i++) {
     myAlerts.push(
        function inner() {
            alert(i);
        }
     );
 }

   myAlerts[0](); // 5
   myAlerts[1](); // 5
   myAlerts[2](); // 5
   myAlerts[3](); // 5
   myAlerts[4](); // 5

I'd expect to see in 1, 2, 3, 4. It feels like it's something related to lexical scoping, but what's the real reason behind?

Can someone explain exactly how this piece of code work behind the scenes?

Possible duplicate of [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — CBroe, Jun 18 '18 at 14:08
By the time each function is being called, `i` is already set to 5 because the function has finished iterating. — Dexygen, Jun 18 '18 at 14:10

Josh Adams · Accepted Answer · 2018-06-18T14:17:35.170

This will produce the expected results.

 var myAlerts = [];
    
     for (var i = 0; i < 5; i++) {
         myAlerts.push(alert(i));
     }
    
       myAlerts[0](); // 5
       myAlerts[1](); // 5
       myAlerts[2](); // 5
       myAlerts[3](); // 5
       myAlerts[4]();

By using the function inner() i is set to the same variable once it is called outside of your loop

let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope. An explanation of why the name "let" was chosen can be found here.

You can also use:

var myAlerts = [];
    
     for (let i = 0; i < 5; i++) {
        
         myAlerts.push(
         function inner(){
         alert(i)
         });
     }
    
       myAlerts[0](); // 5
       myAlerts[1](); // 5
       myAlerts[2](); // 5
       myAlerts[3](); // 5
       myAlerts[4]();

Glad I could help some @LeonardoFederico best of luck in your coding ! — Josh Adams, Jun 18 '18 at 14:26

For loop printing out the same result

1 Answers1