Does JavaScript treat loops differently when you use let and differently when you use var?

Question

I'm trying to understand why

for(var x = 0; x<3; x++){
setTimeout(() => console.log(x), 2000)
}

Works differently than

for(let x = 0; x<3; x++){
setTimeout(() => console.log(x), 2000)
}

Answer 1

Well, I have something in mind, not sure if it's the answer:
in every loop scenario .. the function in the first argument of "setTimeout()" is thrown to the browser so it's done afrer the specefied time (2000 ms)
however, both scenarios differ in the following:
when function is excuted by the browser the "x" variable is looked at in the block level:
knowing that "var" has no block level except functions .. its value is taken from the last update recorded for the global variable X
which is after 2000ms (the loop will end way before this leaving x = 3, it just throws the function to the browser in the end)
this.. when the function is executed after two seconds .. x value is 3 for every call.
that's is not the case for "let".. because its scope is limited to the for loop block, thus .. its value must be thrown away alongside the function in every run (every function remembers its lexical environment)

I know my answer is so complicated, but your question scratches the surface of many deep aspects of the language, as event loop, asynchronous and synchronous excution and variables scopes

Answer 2

Read Morpheus's explanation and David Carroll's shared articles.

https://www.sololearn.com/post/91896/?ref=app

https://www.sololearn.com/post/91113/?ref=app

Answer 3

See these for differences between those :
https://alligator.io/js/var-let-const/

https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/amp/

Answer 4

I'm not sure if I got it right or not, is this what happens behind the scenes?
https://code.sololearn.com/WgwRxAY2IHNq/?ref=app

Answer 5

Ali Kh I'm not yet very sure but I think those three examples I made demonstrate what exactly happens:
https://code.sololearn.com/WgwRxAY2IHNq/?ref=app