1

Quizás esto sea básico pero sigo sin entenderlo. ¿Por qué el siguiente código siempre regresa 3?

var crearFuncion = function() {
  var arreglo = [];
  for (var i = 0; i < 3; i++) {
    arreglo.push(
      function() {
        console.log(i);
      }
    )
  }
  return arreglo;
}
var arr = crearFuncion();

arr[0]();
arr[1]();
arr[2]();

Lo lógico será pensar que regresaría 0, 1 y 2, pero por más explicaciones que me dan sigo sin entenderlo.

1
  • Lógico sería si congelaras el valor de 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 variable i el cual es 3. Podes pensarlo como si i fuera una "variable global" para cada una de las funciones.
    – Marcos
    Commented el 25 abr. 2022 a las 17:36

3 respuestas 3

2

El valor de i cambia con el ciclo, por eso siempre se imprime solo el ultimo valor, debes usar una referencia que no cambie (por ejemplo una variable nueva) antes de crear la función.

var crearFuncion = function() {
  var arreglo = [];
  for(var i = 0; i < 3; i++) {
    const valor = i;
    arreglo.push(
     function() {
       console.log(valor);
     }
    )
  }
 return arreglo;
}
var arr = crearFuncion();

arr[0]();
arr[1]();
arr[2]();

1
  • discúlpame quise editar mi pregunta y edite la tuya igual en el análisis de pares no se realizara la modificación
    – nestdan
    Commented el 25 abr. 2022 a las 23:16
2

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

1

Le estás asignando a cada posición del arreglo la función que ejecuta el console.log, no la salida del console.log. Esa asignación no "congela" el contexto ni mucho menos el valor de las variables al momento de la asignación.

Así pues, al momento de la ejecución (cuando invocas arr[0]()), para los tres elementos del arreglo el valor de i es 3, que es el valor para el que el ciclo se termina en tu función inicial, y eso es lo que van a pintar en la consola.

Si quieres asignar el valor, corresponde asignar un valor y no una función :)

var crearFuncion = function() {
  var arreglo = [];
  for(var i = 0; i < 3; i++) {
    arreglo.push(i)
  }
 return arreglo;
}
var arr = crearFuncion();

console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.