1

¿Por qué con VAR da 444 y con LET da 123?

for(let i=1; i<=3; i++) {
  setTimeout(()=>{
      console.log( i )
    })
}

for(var i=1; i<=3; i++){
  setTimeout(()=>{
      console.log( i )
    })
}

Técnicamente, teniendo en cuenta los execution context y los lexical environment, ¿por qué?

Se que var tiene scope global y local, y let de bloque.

¿Será que se forma una Closure?

2
  • Sí, en este caso se forma una clausura (closure) debido al uso de la función de temporización setTimeout dentro de un bucle for. Podes probar sacar el setTimeout y vas a ver que con let y con var te va a devolver 1, 2, 3.
    – juancruz
    Commented el 18 abr. a las 18:42
  • No uses 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 usar let y const.
    – René
    Commented el 18 abr. a las 22:58

1 respuesta 1

0

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();

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.