4

No entiendo el siguiente bloque de código: tengo entendido que setTimeout es asíncrono, por lo que el ciclo for se termina de ejecutar antes de los 1000 milisegundos, además de que la variable i declarada con let es local al ciclo for. Entonces, según mi lógica, para cuando se ejecutan los callbacks, la variable i ya estaría fuera de su scope porque ya se terminó de ejecutar el ciclo for. Pero aún así funciona... ¿Por qué?

function example() {
  for (let i = 0; i < 10; i++){
    setTimeout(function(){
      console.log(i);
    }, 1000);
  }
}
example();

2 respuestas 2

2

Se llama clausura (closure en inglés). Es cuando usas una variable en un bloque de código en la que no fue declarada pero aún así tiene visibilidad, es algo bastante útil para cosas como la que estás haciendo o para hacer currying. Por ejemplo:

function suma(a,b) {
  return a + b;
}

function sumaN(n) { //devuelve/genera una función que suma n al parámetro que se le pase, usando clausuras
  return function (a) {
    return suma(a,n);
  }
}


const sumaSiete = sumaN(7);
console.log(sumaSiete(5));

Como curiosidad, me gustaría comentar que el código que has escrito funciona como funciona (una valor distinto para cada llamada a setTimeout) porque i está declarada con let: es una variable que sólo existe dentro del bucle for, por lo que se está creando una clausura nueva para cada iteración. Si hubieras usando var sólo habría una clausura porque la variable se consideraría declarada desde el inicio de la función example:

function example() {
  for (var i = 0; i < 10; i++){
    setTimeout(function(){
      console.log(i);
    }, 500);
  }
}
example();

Te remito a esta otra pregunta/respuesta para más detalles

1

Eso funciona porque cuando haces el llamado a setTimeout estás creando una función, y esa función tiene acceso a la variable i del for (porque la función la estás creando dentro del ciclo). Entonces mas adelante cuando esa función se ejecuta después (según el tiempo del setTimeout), se ejecuta con las variables a las que tenía acceso cuando se creó.


EDIT: Para responder la pregunta de los comentarios

Porque cuando se define la variable dentro del for, se crea esa variable dentro del ámbito de cada ciclo del for. Cuando la variable se define afuera, la variable es comun a todos los ciclos del for

Pongo 2 ejemplos

//La variable referenciada dentro de la funcion es única
for (let i = 0; i < 3; i++){
    setTimeout(() => console.log(i), 500);
}

let i;
//La variable referenciada dentro de la funcion es "global" y se comparte por todos
for (i = 0; i < 3; i++){
    setTimeout(() => console.log(i), 500);
}

2
  • @Mateo acabo de editar mi respuesta
    – Pipe
    Commented el 2 feb. 2023 a las 2:12
  • Disculpa, creí que no ibas a mencionar lo de los comentarios. Repito la pregunta para que se entienda. Entonces, si la función sigue contando con acceso a la variable, ¿Por qué al llamarla no imprime el último valor que adquirió (3)?
    – Mateo
    Commented el 2 feb. 2023 a las 3:12

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.