Estuvo pensandolo por un tiempo y después me di cuenta… El problema de var y let es la asincronicidad en su máxima expresión!
El setTimeout solo se ejecuta cuando se haya terminado de ejecutar el código principal. Entonces, estamos poniendo en la pila de tareas 7 veces la funncion () => this.iluminarColor(color), pero solo cuando ya haya terminado el ciclo for entero. Entonces cada uno de esas llamadas se fijará… Cual es el valor de la variable color? Y al terminar el ciclo, digamos que fue verde el ultimo color. Todas las llamadas van a usar el color verde porque solo se guardo ese!
si nosotros tenemos un ciclo for:
for(var i = 0; i < this.nivel; i++){
var num = i;
setTimeout(() => console.log(num), 1000 * i)
}
la pila de tareas se va a ver así finalizado el código principal:
1: console.log(num). cuanto vale num? 9
2: console.log(num). cuanto vale num? 9
3: console.log(num). cuanto vale num? 9
4: console.log(num). cuanto vale num? 9
5: console.log(num). cuanto vale num? 9
6: console.log(num). cuanto vale num? 9
7: console.log(num). cuanto vale num? 9
Porque 9? porque el ciclo for ya finalizo, y var num quedo con ese valor, porque es global.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?