JavaScript Closures: setTimeout and loop

Problem:

for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log("My value: " + i);
    }, 1);
}

> 

My value: 3

My value: 3

My value: 3

}

Why:

Variable Global scope, and JavaScript asynchronous event loop single thread execution.

Solution:

// Block scope, ES2005

for (let i = 0; i < 3; i++) {

    setTimeout(function() {

        console.log("My value: " + i);

    }, 1000);

}

//Immediately Invoked creation, and function scope.

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

    setTimeout((function(pNum) {

        return function() {

            console.log('i: ', pNum)

        }

    })(i), 1000);

}

//  IIFE (Immediately Invoked Function Expression)

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

    (function(pNum = i) {

        setTimeout(

            function() {

                console.log('i : ', pNum)

            }, 1000)

    })(i);

}

Enjoy the sunshine,