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,
