Skip to main content
1 de 2
bfavaretto
  • 66,2mil
  • 11
  • 151
  • 228

Se você está ciente de como funciona o hoisting, as maiores implicações são para outras pessoas que possam vir a mexer no seu código.

Eu acredito que essa recomendação se baseie principalmente nas consequências de variáveis capturadas por closures. Por exemplo:

var fns = [];

for(var i=0; i<5; i++) {
  // cria closures
  fns.push(function() {
    console.log('closure sobre i com valor ', i)
  });

}

for(var j=0; j<fns.length; j++) {
  fns[j]();
}

O código acima vai sempre logar 5 como o valor de i no console, porque só existe uma variável i, e 5 é o valor dela após o loop. Isso confunde muita gente, há inúmeras perguntas sobre o assunto aqui no site. Uma parte dessa confusão é porque as pessoas esperam que a variável declarada no inicializador do for tenha escopo restrito ao bloco do for, quando na verdade ela está no escopo externo.

Compare com a versão ES-2015, usando let para declarar variáveis com escopo de bloco:

var fns = [];

for(let i=0; i<5; i++) {
    // cria closures
    fns.push(function() {
        console.log('closure sobre i com valor ', i)
    });

}

for(var j=0; j<fns.length; j++) {
    fns[j]();
}

JSFiddle

Nessa versão, cada chamada loga um valor diferente, que era o valor de i no momento da criação de cada closure. Isso indica que com let a cada iteração do for existiu uma variável i distinta (versus um único i com var). Portanto tem o comportamento esperado por quem está acostumado com escopo de bloco.

De fato, em ES-2015 recomenda-se colocar as declarações com let sempre logo antes do uso, justamente por ele não criar a mesma confusão que o var.

bfavaretto
  • 66,2mil
  • 11
  • 151
  • 228