Há uma diferença de escopo.
Você deve saber que qualquer variável "declarada" sem let
, var
ou const
tem escopo global, ela vale para todo o script.
Talvez saiba que sempre deve usar o var
para tornar o escopo local, ou seja, ele vale apenas dentro da função onde ela foi declarada (pode ser global se não está dentro de função).
Mas isso não era suficiente, precisa ter um um escopo de bloco. O let
foi criado, e está disponível nas versões mais novas da linguagem justamente para prover este escopo mais limitado.
Exemplos:
function exemplo() {
console.log(x);
for (var x = 0; x < 5; x++) {
console.log(x);
};
console.log(x);
};
function exemplo2() {
//console.log(x); //daria erro
for (let x = 0; x < 5; x++ ) {
console.log(x);
};
//console.log(x); //daria erro
}
exemplo();
console.log(" ");
exemplo2();
Coloquei no GitHub para referência futura.
Documentação do let
.
const
pode ser usado em versões mais novas da linguagem e equivale ao let
só que é uma constante.
Como não é qualquer navegador que suporta estes comandos mais novos, eles devem ser evitados, até ter certeza que o objetivo é só rodar em browsers mais novos.
Quando der para usar de forma geral, o let
é preferível, o escopo mais restrito sempre é preferível. Se bem que se você manter suas funções bem pequenas como manda as tais da "boas práticas" não fará tanta diferença assim usar um ou outro. E de fato às vezes o var
é uma mão na roda quando precisa do valor "vivo" após o término de um escopo (não que não dê para fazer com let
também).
Tem ainda um outro motivo para o let
ter sido criado, é resolver uma questão de criar suas próprias referências em closures, eles não podiam mudar a semântica da linguagem em algo que já existia, eles criaram algo novo, assim a nova semântica seria opt-in. Vejamos este exemplo:
var funcs = [];
for (var i = 0; i < 3; i++) {
funcs[i] = () => console.log("Valor: " + i);
}
for (var j = 0; j < 3; j++) {
funcs[j]();
}
Parece estranho, certo? O var
deixa a variável viva por toda a função onde está declarada (neste caso é até global, mas dá na mesma), então a captura de uma closure pega uma referência para essa variável que é considerada universal para a função. Agora vejamos com o let
que faz com que o escopo seja o menor possível, ou seja, a variável só existe no bloco for
:
var funcs = [];
for (let i = 0; i < 3; i++) {
funcs[i] = () => console.log("Valor: " + i);
}
for (let j = 0; j < 3; j++) {
funcs[j]();
}
Por isso desde que use o Edge, FireFox 44 pra frente, Chrome desde 49 (41 em modo estrito, desde a 4 se ligar manualmente), Safari 11 e outros baseados neles, prefira o let
. O IE 11 aceita o let
, mas não trata a closure corretamente. Ou seja onde não funciona a pessoa já está acostumada com muita coisa dando errado.
Só lembre-se que se você usar o let
deve usar algum transpilador que gere um código mais adequado para versões antigas, ou ter certeza absoluta que sua página nunca será acessada por navegadores antigos. Garantindo isso, de forma geral, deve sempre preferir o let
. O var
fica para rodar em browsers antigos que você não rodará um Babel ou algo assim.