Vou tentar ser muito detalhado porque em comentário foi dito pelo AP que não entendia a explicação inicial. E vou explicar porque realmente ocorre, não vou falar um coisa que não mostra de fato o motivo disto acontecer porque seria algo como "é assim e pronto" que foi o que o AP conclui, um dos motivos da pergunta estar sendo feita é que o livro usado que se propõe explicar JS em pontos obscuros não deixou claro o motivo disto acontecer. Eu tentei deixar o mais claro possível, se não serviu ao AP pelo menos pode servir a outras pessoas. Depois procurando links percebi que isso até já foi respondido.
Funciona justamente porque ele guarda uma referência. Sabe o que é uma referência? Se não entender isso não vai entender a explicação. Falo em referência porque é o que a pergunta falou. Eu poderia falar de escopo, que é algo colateral ao assunto se a pergunta falasse em escopo e fosse mais importante que entender a referência.
Uma referência é um valor endereçando um local onde ele tem um outro valor, então no contexto geral da programação (pode ser diferente em contextos específicos) é sempre um endereço de memória onde tem um valor. É uma indireção.
A primeira coisa que precisa entender sobre closures é que elas são funções anônimas que não são executadas até serem invocadas, o que está vendo aí é uma definição dela, não sua execução, não é chamada, a execução ocorrerá internamente dentro da setTimeout()
no seu exemplo, no momento oportuno. Esquece a ideia que a função está sendo executada aí, você não está vendo sua execução, ela está escondida de você.
Outro ponto importante é que o setTimeout()
nada tem a ver com a questão, ele apenas está usando um mecanismo de callback, algo comum em funções anônimas que possuem closures ou não.
Então este código está criando 4 closures diferentes, uma em cada passagem do laço, todas as 4 tem uma referência para o mesmo endereço da variável index
(caso não entenda o que é uma variável é importante ler esse link), note que não tem o valor de index
no momento da criação desta closure, em uma referência, são coisas diferentes. Podemos concluir que os 4 valores que entrarão nessas closures são o mesmo, ou seja, os 4 serão o endereço da variável index
, afinal o endereço onde está a variável index
está não muda em cada passagem pelo laço.
Depois que o laço acaba, e ele acaba conforme a condição (o AP demonstrou não entender porque ele acaba), ou seja, index
não é menor ou igual a 3, portanto ela vale 4 (isto é condição básica, só acaba quando a condição se torna falsa, e para se tornar falsa ela não pode ter mais o valor que a fazia verdadeira, então ele não pode valor nem um valor menor que 3 nem o valor 3, isso só acontece quando ela se torna 4, se não entende isso faça um teste de mesa, que existe justamente pra entender o funcionamento do código), em algum momento pra frente (1 segundo pra frente no exemplo, note que todos executarão quase encavalados porque todos demoram o mesmo tempo) estes eventos configurados no setTimeout()
através de closures serão executados com o valor que estiver na referência usada, ou seja usará o valor que está em index
, neste momento, que já será (1 segundo) depois que já encerrou o laço, portanto tem o valor 4 em todas as execuções.
Quem sabe isto ajudará entender pelo menos a condição:
for (var index = 0; index <= 3; index++) {
console.log(index); //varia de 0 até 3 porque esses valores dão condição verdadeira
console.log(index <= 3);
setTimeout(function() {
console.log(index)
}, 1000);
}
console.log("fora do for");
console.log(index); //houve 4 incrementos chegando neste número
//quando começa em 0 e vai incrementando a única forma de dar falso aqui é chegando no 4
console.log(index <= 3);
console.log("1 segundo depois vai executar o abaixo");
//note que não tem código aqui, é o setTimeout() que vai chamar a função com closure
Não esquece de mandar executar os códigos para ver os resultados.
Existem algumas técnicas para solucionar isto. Uma delas é encapsular em uma função, esta funciona em qualquer versão do JS:
for (var index = 0; index <= 3; index++) {
function timer(i) {
setTimeout(function() {
console.log(i)
}, 1000)
};
timer(index);
}
Outra técnica é usar o let
(citado na pergunta) que faz com que a variável deixe de ser uma referência natural porque a variável passar ser local ao bloco (não esqueça de ler esse link que explica o funcionamento do let
, é importante, lá eu falo de escopo), aí a referência passa ser criada no momento que está sendo capturada pela closure, então cada closure terá uma referência para uma "nova variável" que é criada só para isto, esta variável não existe no seu código, ela é interna da closure e o valor dela será o que está valendo no momento da criação da closure.
Note que sendo local não dá para demonstrar tão facilmente quando a variável fica falsa porque ela não existe mais fora do escopo (o for
). O escopo é solução, não a explicação de porque dá aquele problema citado na pergunta. O AP não entendeu isso.
for (let index = 0; index <= 3; index++) {
setTimeout(function() {
console.log(index)
}, 1000);
}
Coloquei no GitHub para referência futura.
Esta técnica não era possível há alguns anos. Um dos motivos do let
ter sido criado é justamente resolver essa questão e criar suas próprias referências, eles não podiam mudar a semântica da linguagem em algo que já existiam, eles criaram algo novo, assim a nova semântica seria opt-in.
Isto é explicado por algo chamado binding que é a forma como a variável vincula seu valor. O var
faz isso de forma universal a sua existência e o let
faz isso local ao contexto.