Tu pregunta tiene una respuesta "oficial" en la documentación, que en resumen dice:
La razón es que cada setTimeout
crea un nuevo Closure que se cierra sobre la variable i
. Y si i
no está limitada al cuerpo del bucle (cuando es un var
), todos los Closure harán referencia a la misma variable.
Y la naturaleza asincrónica de setTimeout
, ocasiona que cada Closure se ejecute después de que bucle haya finalizado. Haciendo que el valor de i
en todos los cuerpos de las devoluciones de llamada en cola tenga el último valor asignado.
Esto último queda reflejado con este ejemplo más simple:
for(var i=0;i<100;i++){}
console.log(i); //al ejecutar esto luego del for, "i" tiene el último valor asignado
En otras palabras, y suponiendo que se conoce la diferencia entre var y let, lo que gatilla este comportamiento es que setTimeout
ejecuta las funciones luego de finalizado for
Si creamos un delay
en cada loop, podemos obligar a que el setTimeout
se ejecute dentro del for
y no fuera de él. Y así podemos apreciar que el problema no es solo de scope
y Closure
, si no que también tiene que ver con la asincronía
async function Init() {
for (var i = 1; i <= 3; i++) { // USAMOS VAR!!
setTimeout(() => console.log(i));
await delay(100);
}
}
function delay(n) {
return new Promise(a => setTimeout(a, n));
}
Init();
var
, desde hace algunos años que se considera mala práctica especialmente por el tipo de errores que puedes llegar a tener, se recomienda solamente usarlet
yconst
.