immediately-invoked function calling setTimeout calling for loop

Question

In the following scenario, event setTimeout get queued and only after stack clears out, i = 3 will print 3 times

//ver1
for (var i = 0; i < 3; i ++ ) setTimeout(()=> console.log(i), 3)

The following will print 1 2 3 in order since i is captured in func x ??

//ver2
for (var i = 0; i < 3; i++) {
    (function x(i) {
        setTimeout(() => {console.log(i)}, 30)
    })(i);
}

Why the following only prints 2 one time?

//ver3
for (var i = 0; i < 3; i++) {
    function x(i) {
        setTimeout(() => {console.log(i)}, 30)
    }(i);
}

I'm mostly confused between ver2 and ver3

---

EDIT: ver2 explanation can be found here . Any insight on why ver3 only prints 2 ?

Answer 1

Your version 3 doesn't do at all what you think it does. Parenthesis are not optional on an IIFE . But because you named the function, it does get parsed as a function declaration:

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

You were never calling x(…) here. The (i) is just an unnecessarily- parenthesised expression evaluating the i variable. Your code executes the same as

for (var i = 0; i < 3; i++) {
    i;
}

So why does this log 2 in the console? Because when you run this on the console, it prints the result value of the statement that was evaluated last: i , which had the value 2 in the last iteration of the loop.