No es un problema de closure es el comportamiento esperado
un closure combina dos cosas: una función, y el entorno en que se creó esa función y si usas var en el for el entorno es el esperado por lo cual muestra 3 la funcion interna usa el valor que se declara fuera de su contexto pero en tu ejemplo se comporta como una unica variable global el contador i
Al usar let en lugar de var en un ciclo, con cada iteración
obtendremos una nueva variable. Así la podemos usar en un closure
dentro del loop
Si usas var
la salida está reflejando el valor final del i después de que el bucle termina porque todas están cerradas sobre el mismo ámbito global compartido por eso necesitamos más alcance de closure. Específicamente, necesitamos un nuevo ámbito de closure para cada iteración del bucle lo cual nos da el usar let --->referencia Loops + Closure
var crearFuncion = function() {
var arreglo = [];
for(let i = 0; i < 3; i++) {
arreglo.push(
function() {
console.log(i);
}
)
}
return arreglo;
}
var arr = crearFuncion();
arr[0]();
arr[1]();
arr[2]();
Entonces si definimos dentro del ciclo for a la variable i como global mediante var
for(var i = 0; i < 3; i++){}
solo hay una variable i global por lo cual todos los elementos del array--> los elementos arreglo[indice] se sobrescriben porque todo i en los miembros de la matriz todos finalmente apuntaran al mismo i relacionado con el ciclo for ,porque i se definió como una única variable global como resultado en el ultimo loop de salida en tiempo de ejecución es 3
En cambio si la variable i se declara mediante let
for(let i = 0; i < 3; i++){}
la variable i en cada bucle es una nueva variable no se sobrescribe y el motor JavaScript recordara internamente el valor del ciclo anterior
i
al momento de crear la función. Pero ese no es el caso, al invocar las funciones estas buscan en su contexto el valor de la variablei
el cual es 3. Podes pensarlo como sii
fuera una "variable global" para cada una de las funciones.