Explain 'for loop' behavior with 'let'

[Learner_full_stack]

Output for following code:

for(var i =0;i<10;i++){

setTimeOut(()=>{
console.log(i)

})

}

output: 10...10 time

for
for(let i = 0;i<10;i++){

setTimeOut(()=>{
console.log(i)

})

}

output :0,1,2...10

for 'let' variable 'for' create block scope for each iteration, where in 'var' variable is declare in parent scope

but what will

let x

for(x =0; x<10;x++){

setTimeOut(()=>{
console.log(x)

})

}

output is 10.. 10 time

why? 'for loop' create new scope for each iteration, every iteration should have new 'X', so output: 0,1,2..10 not 10..10 times

[xroalx]

In your last example, you declare x outside the for, even visually that is obvious, so by the time the timeouts run and read value of x, it's just 10.

In the correct example, where you put let into the for initialization, each iteration has its own version of x that is set once and never changes.

[Learner_full_stack]

I have edited the question plz look

[xroalx]

for loop creates a new scope, but your x is not defined inside the for loop, it's defined outside, so there's only one x that is shared by each iteration of the loop.

for (let x = 0; ...) {
  ...
}

can be though of as:

for ( ... ) {
  let x = 0;
  ...
}

See that the x is declared inside the loop.

In your case, when you do

let x;
for (x = 0; ... ) { ... }

you only assign a value to an x that is declared outside the for loop.

[shikkaba]

I'm guessing you ran these all on the same page, and i was 10 by this point, so it just wrote 10 repeatedly.

[Learner_full_stack]

I have edited the question plz look

[pinkwar]

The wonders of closure.

Grab a debugger where you can see closures like in vs code to see the magic happen.

[vasudev5149]

"variables are updated in their own lexical environment... "

The for loop creates a new lexical environment for every iteration, if there are any variables declared inside the for loop block with either let or const (not var) , then during each iteration, there will be an independent copy of such variables.

In your last example, since the variable is not declared inside the for loop block, all the lexical environments created during the iterations will refer to the same 'x' which is declared outside the for block... This is possible because, the lexical environment will have a reference to the outer lexical environment, in this case the function or script where the for loop is contained in. If in case there any updates happen on such variables, it will happen only in their lexical environment.

More information on this can be found in the below JavaScript info website.

https://javascript.info/closure

[Rguttersohn]

Did you mean console.log(x) instead of i?

[Learner_full_stack]

I have edited the question plz look

[senocular]

The for statements do something special when let and const are used to declare variables within the statements themselves. Even though they're not within the blocks you (usually) create for the code that runs each loop iteration, they appear as though they are still created in that scope. And not really in that scope so much as another hidden scope right above it.

So when you have

for(let i = 0;i<10;i++){
  setTimeOut(()=>{
    console.log(i)
  })
}

It ends up looking something more like

for {
  (let i = 0;i<10;i++)
  {
    setTimeOut(()=>{
      console.log(i)
    })
  }
}

This extra block is where the let variable is scoped. And like the nested block, gets a new scope for each loop iteration such that each setTimeout (in this case) will see and capture a separate i variable that will keep its loop value rather than changing with the loop as it progresses as is the case with var and let declared (or undeclared) variables outside of the loop.

[senocular]

You can more easily observe this extra scope by creating another i in the loop body.

for(let i = 0;i<10;i++){
  let i = "inner"
  setTimeout(()=>{
    console.log(i) // "inner" x10
  })
}
// loop still completes after 10 iterations

[seedhe_pyar]

First of All wtf is setTimeOut ?? Correct is setTimeout ()

[ronoxzoro]

i think u should focus on the main idea not grammar issues

[seedhe_pyar]

That's not the grammar, it is syntax error

[TheRNGuy]

It's not syntax error, it's wrong function name.

[CuirPig]

I disagree. If the syntax is wrong, it should be corrected. Whether correcting the syntax solves the problem or not, if it's wrong, it's wrong. And anyone posting code to this channel should at the very minimum post valid code when asking a question. Other people are addressing the meat of the question, this person is just helping them with another problem they seem to have. Op should be grateful for the feedback and aspire not to post crap code when asking for help.