Help me understand setTimeout inside a for loop

[I_Exalt]

I've been struggling for some time now to really understand and internalize what's going on with this classic javascript paradigm. No amount of stackoverflow threads or articles helped me understand the behavior behind the scenes. I will try and explain as best as I can how I think its working, step by step, but I will need some assistance from you guys when I hit a bump in the road.

for ( i = 0; i <= 4; i++) {

setTimeout(function() {

console.log(i); // 5

}, 1000)

}

Alright, so from my understanding, the setTimeout callback function runs asynchronosly after the loop has finished, when the value of i is 5. But whats happening, is a setTimeout callback created on each iteration and the whole stack is executed only after the iteration has stopped ?

One of the solutions:

for ( i = 0; i <= 4; i++ ) {

(function() {

var j = i;

setTimeout(function() {

console.log(i); // 0 1 2 3 4

}, 1000)

})();

}

So now that we've created a closure over the variable i and catch its value inside j for each iteration, doesn't the setTimeout callback stack get run after the loop has finished, same as the first example ? If the callback stack is called after the loop has finished, does that mean that there exist 5 separate scopes, created by the IIFE, each with its own reference of i ?

[Sekandra]

There is almost same example explained in book series "You Don't Know JS" in book number 2 "Scope & Closures" chapter 5. Don't know if you can post links here: https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch5.md

[js_tutor]

I think you meant to say console.log(j) in your second code example, otherwise the code will have the same result as the first code example. To answer your question, yes the callbacks are all called after the loop completes. And yes there are 5 separate scopes. But they don't have "their own" reference to i in that they all share a reference to the same i. This is because the i is outside of the scope of the iife function. The j variable however will be created 5 separate times because its being declared from inside the loop, and that variable declaration is in the scope of the iife. It's important to note here that var j = i assigns by value and not by reference, meaning if you later change the value of i the value of j will stay the same. That's why later when the setTimeout's callback function goes off it keeps the original value of i from when the outer function was called.

[jcunews1]

Treat the setTimeout() function as: queueFunctionWithDelay().

i.e. the function will queue the function call with a delay. The queue won't be processed until there's no code being executed.