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]();
}
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
.