Difference between var and let context

for (var i = 0; i < 5; i++) {
setTimeout(()=> { console.log(i); }, i * 1000 ); //output will be 5 and being called for 5 times

}
// when i use let instead of var i will be getting 0 ,1,2,3,4 please explain me

your loop is finished before the settimeout return

1 Like

can you explain me little briefly

my bad i did not explain well… basically the way it works is that the scoping is different between those two.

output will be 5 and being called for 5 times

about that… when you are using var your loop will finish incrementing before your settimeout. the value will be 5, your stack will be empty, event loop will pick up the setimeout from the task que it logs the value of i 5 times.

let is restricted in the block { } the var isnt restricted to the block, if you use var within a for loop inside a function, it’s available to the entire function, although in your case you have it inside of a block with is inside a for loop… it is a similar concept.

watch this video if the description still isnt clear he explains it better than me:

Edit:
sorry i mean the event loop will pick up the first timeout call from the que and put it on the stack, a second later it that will be repeated… i.e. when the webapi is done with the first settimeout it will push it onto the task que and so on… this explains:

although, I think the first video I shared with you is more relevant to answering your question…

look maybe explanation I gave above or those videos are not so good, because your example is slightly different.

the piece of code you have:

for (var i = 0; i < 5; i++) {
setTimeout(()=> { console.log(i); }, i * 1000 ); 
}

In the last part of your function i*1000 that does not change whether you use i or let you log to the console at the same intervals and the whole thing will be completed in around the same amount of time reguardless of if you use i or let

I think when event loop picks it up from the q and puts it back on the stack, before it can pop off the stack, all it knows is that it has to read out the number of what i is… and that is where the difference is. in the case of var it goes outside of the block {console.log(i)} and outside of that block the loop has already been completed… so the value is 5 each time it logs it.

after 0 second 5
1 seconds 5
2 seconds 5
etc…

I mean the intervals and the total time i think is the same reguardless…
but…
in the case of let it is restricted to the scope of the block {console.log(i)} ( i should say the value it will print is restricted to the scope of the block)

0 seconds 0
1 second 1
2 seconds 2

I guess it remembers. it is like a closure? it remembers its scope? Maybe I am wrong in this explanation but this is what i am thinking…

@ramgopaln you can use this to fix that, then you will get the same result as let:

for (var i = 0; i < 5; i++) {
  (function(x){
    setTimeout(()=> { 
  console.log(x); }, x * 1000 ); 
  })(i)
}
1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.