Problem z domknięciami może pojawić się, gdy zapomnimy, że closures pamięta referencję do zmiennej, a nie jej wartość, gdy korzystamy z var np. w pętli for.
Poniższa pętla ta przekaże funkcję do wywołania po pół sekundy za pomocą setTimeout, gdzie w środku wywołana zostanie console.log() z wartością zmiennej i, trzykrotnie.
for(var i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i);
}, 500);
}
// 3
// 3
// 3
Domknięcie pamięta referencję do zmiennej i, a nie jej wartość, dlatego po 500 milisekund wywoła się console.log() i za każdym razem będzie wskazywała przez closure do tej samej zmiennej i = 3.
Problem ten może być rozwiązany z let, która gwarantuje, że w każdej iteracji pętli wartość let będzie rozróżniona, gdyż będzie to oddzielny scope/zakres w bloku dla wszystkich trzech setTimeout oraz przekazanych funkcji.
for(let i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i);
}, 300);
}
// 0
// 1
// 2KW