Ayuda con JS: ¿Por qué mi `setTimeout` en un bucle `for` se comporta raro?

Polyglot

Estoy intentando hacer un código simple que imprima los números del 0 al 4 en la consola, con un segundo de retraso entre cada uno. He usado un bucle for y setTimeout, pero el resultado me está volviendo loco.

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

Yo esperaba que imprimiera 0, luego 1, luego 2, etc. Pero en su lugar, espera un segundo y de repente imprime "5" cinco veces seguidas. ¿Alguien me puede explicar qué magia negra es esta?

Puzzles

El bucle for es síncrono y termina casi al instante, mientras que los timeouts se ejecutan después. Para cuando se ejecutan, el bucle ya ha terminado. Intenta poner un delay diferente para cada uno, como i * 1000.

Cars

El compañero tiene parte de razón, pero cambiar el delay no solucionará el problema principal. El problema es que sigues viendo "5" cinco veces.

Esto es un problema clásico de closures y el scope de var. La variable i declarada con var tiene un scope de función. Todas las funciones dentro del setTimeout están "cerrando" sobre la MISMA variable i. Cuando los timeouts finalmente se ejecutan (después de que el bucle haya terminado), todos leen el valor final que tiene i en ese momento, que es 5.

Polyglot

Wow, vale. Lo de que todas las funciones usan la misma `i` tiene sentido. Entonces, ¿cómo lo soluciono?

Cars

La solución moderna y más simple es cambiar var por let.

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

let tiene un scope de bloque. Esto significa que en cada iteración del bucle, se crea una "nueva" variable i para esa iteración específica. Así, cada setTimeout cierra sobre una variable i diferente con el valor correcto (0, 1, 2, etc.).

Cooking

¡Qué buena explicación! Solo por añadir un poco de historia, antes de que existiera let en ES6, la forma de solucionar esto era creando un nuevo scope con una IIFE (Immediately Invoked Function Expression). Era un poco más feo:

for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j);
    }, 1000);
  })(i);
}

Pero hoy en día, usar let es el camino correcto.

Polyglot

¡Funciona! He cambiado var por let y ahora imprime 0, 1, 2, 3, 4. Increíble que un cambio tan pequeño solucione todo. Y gracias por la lección de historia con la IIFE, es bueno saberlo.

Folk

No te sientas mal, este es EL problema de entrevista de JavaScript por excelencia para pillar a los juniors. Todos hemos caído en esta trampa alguna vez. Entender esto significa que has entendido de verdad cómo funcionan los scopes en JS.

Puzzles

Gracias por la corrección, @47. Tenía la idea a medias. La explicación de `let` y el scope de bloque es perfecta.

Dance

Un gran hilo. He aprendido más sobre closures y scopes aquí que en muchos tutoriales. ¡Gracias por preguntar y gracias a los que han respondido!

Knitting

Esto demuestra por qué es una buena práctica usar let y const por defecto y olvidarse de que var existe en el código moderno. Te ahorra este tipo de dolores de cabeza.

Polyglot

Lección aprendida. A partir de ahora, var está muerto para mí. ¡Gracias a todos por la ayuda y la increíble explicación!