Console.log() and settimeout(fn, 0)

Question

I have a few questions about the following code that I ran in Chrome's console (I highlighted the difference between each loop). The intent of the code is to print out even numbers immediately, and then print out the odd numbers in order (because the stack is clear, and Chrome starts running through the event queue, from what I understand).

For the first loop, why does it show undefined? Why is there the little <· on the left of undefined?
For the second loop, why does 1 print where it does? It looks like this is something the console is doing, not my code.
For the second loop, why does 2 print out? The for loop is for strictly less than 2.
Why does the third loop print undefined and 3? What's different that the console didn't actually print out a number next to the <· symbol?
For the last loop, why didn't 1 and 3 print? Kind of seems like it printed 4 3 times.
How do you accomplish the intent of my code using setTimeout in this way?

console.log and set timeout

If you try the code yourself, it seems like the number next to <· increments each time you run the loop.

Note that the all those pieces of code suffer from this common problem http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — elclanrs, Mar 09 '15 at 20:59

score 2 · Answer 1 · answered Mar 09 '15 at 21:40

You need to use Immediately Invoked Function Expression (IIFE) to bound the current value of i

Example:

for( var i = 0 ; i < 5 ; i++) {
    if(i % 2 == 0) {
        console.log(i);
    } else {
        (function(_i) {
            setTimeout(function() { console.log(_i); }, 0);
        })(i);
    }
}

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

For the first loop, why does it show undefined? Why is there the little <· on the left of undefined?

The <- signifies the return value. The code doesn't return anything.

For the second loop, why does 1 print where it does? It looks like this is something the console is doing, not my code.

Here, the code does return something: 1. That is the ID of the setTimeout.

For the second loop, why does 2 print out? The for loop is for strictly less than 2.

See JavaScript closure inside loops – simple practical example -- by the time your code has run, i is now at 2.

Why does the third loop print undefined and 3? What's different that the console didn't actually print out a number next to the <· symbol?

undefined is the last value returned by the loop -- that of console.log(). 3 is logged in the timeout.

For the last loop, why didn't 1 and 3 print? Kind of seems like it printed 4 3 times.

How do you accomplish the intent of my code using setTimeout in this way?

See JavaScript closure inside loops – simple practical example again.

Interesting to see that i makes it above the upper bound I set right before the for loop finishes. I never knew that. Also didn't know that about the console. I'd seen undefined a ton, but never really knew why. Thanks. — chris, Mar 09 '15 at 22:44

Console.log() and settimeout(fn, 0)

2 Answers2