Qual a diferença entre let e var ao declarar variáveis ?

Olá Cleber, tudo bem?

Atualmente em javascript iremos focar em utilizar:

• let : Para declarar variáveis que queremos que tenha seu valor alterado
• const: Para declarar uma constante que não podemos atribuir outro valor

Antigamente, não tínhamos nenhuma dessas duas, apenas o var que fazia o papel do let, por mais que tenhamos algumas peculiaridades, como por exemplo:

• Quando definimos var fora de um escopo local, acaba assumindo um valor global

• O var não tem escopo local dentro de ife fors, podendo substituir uma variável:

Caso ainda não saiba o que é escopo, podemos ver como o nível onde está o nosso código, cada bloco que temos {} é um escopo diferente, por exemplo:

-> Escopo global

for( var i = 0; i <=5 ; i++){
    -> Escopo do For
    if( i == 3){
        ->> Escopo do If
    }
    -> Fim do Escopo do For
} 
-> Escopo Global

E aqui temos uma grande diferença entre lete var, veja:

var i = "Não quero ser Modificado";
for( var i = 0; i <= 5; i++){
    console.log(i)
}
console.log(i)
>> 6

Enquanto com let:

let indice = "Não quero ser Modificado";
for( let indice = 0; indice <= 5; indice++){
    console.log(indice)
}

console.log(indice)
>> "Não quero ser Modificado"

Veja que com o var tivemos um problema, pois acabamos substituindo o valor de uma variável, e nunca queremos alterar um valor que está em um escopo acima, pois bagunçamos toda a nossa execução :)

Outro problema que temos é esse:

var queroDeclaraApenasUmaVez = 1
var queroDeclaraApenasUmaVez = "Consegui Declarar Novamente :/"

console.log(queroDeclararApenasUmaVez)
>> "Consegui Declarar Novamente"

let queroDeclararApenasUmaVez = "Foi?"
let queroDeclararApenasUmaVez = "Vai dar erro!!!"

>> Uncaught SyntaxError: redeclaration of let queroDeclararApenasUmaVez

Com var podemos fazer redeclarações no mesmo escopo, enquanto com let temos um erro, só podemos ter variáveis com nomes iguais em escopos diferentes

Bem, acredito que essa é algumas das maiores particularidades, durante muito tempo trabalhamos com var para manter a compatibilidade com os navegadores mais antigos que não tem esses recursos, por exemplo até a versão do Internet Explorer 10, não era suportado esse tipo de recurso, então teríamos que utilizar var para o nosso código funcionar

Hoje em dia podemos tranquilamente parar de utilizar var e adotar o let/ const!

Abraços e Bons Estudos!