Ao trabalhar com javascript, podemos declarar variáveis usando const, let e var, mas estes tipos de variáveis, quando usadas de maneira exagerada ou inadequada, pode trazer comportamentos inesperados em nossa aplicação.

Pode parecer simples o assunto, mas é comum lermos códigos com uso de var e let pra todo lado sem muita coerência.

Na maioria das vezes, isto ocorre por desconhecido do desenvolvedor, esquecimento ou até mesmo preguiça, a pessoa está no automático e não percebe algo tão trivial.

Mas então, qual a diferença entre eles e porquê isto é importante?  O primeiro passo é entendermos as características em cada tipo de declaração.

Declaração de variáveis antes do ES6

É preciso destacar que até a versão 5 do EcmaScript, para declarar uma variável usávamos a palavra-chave var ou const. Só a partir da versão 6 foi incorporado o tipo let, como alternativa para resolver o problema de hoisting em declarações do tipo var, que eleva qualquer variável do nosso código para o escopo da função.

Por padrão o javascript eleva nossa variável independente de onde ela for declarada (hoisting), seja dentro de um laço ou condição, está variável vai estar acessível em toda função, antes ou depois de ser declarada. Isto podemos ser controlável quando temos código pequenos, mas pode se tornar uma grande dor de cabeça conforme nosso script crescer.

Agora com declarações let, este problema de hoisting foi resolvido, porquê passamos a ter uma variável atribuída a um escopo de bloco, desta forma ao declarar dentro de qualquer bloco, está variável será descartada no fim da instrução.

Exemplo até a versão ES5

var imprimiMensagem = function() {
     var mensagemForaDoIf = "DANIEL";

     if(mensagemForaDoIf == "DANIEL") {
          var mensagemDentroDoIf  = "JS"; // Cria a variável dentro do If
     }

     // mensagemDentroDoIf é mais acessível a partir deste ponto
     console.log(mensagemForaDoIf, mensagemDentroDoIf); // Imprime: DANIEL
}

imprimiMensagem(); // Saída: DANIEL JS

Exemplo a partir da versão ES6

var imprimiMensagem = function() {
     var mensagemForaDoIf = "DANIEL";

     if(mensagemForaDoIf == "DANIEL") {
          let mensagemDentroDoIf  = "JS"; // Cria a variável dentro do If
     }

     // mensagemDentroDoIf é mais acessível a partir deste ponto
    console.log(mensagemDentroDoIf); // Não vai imprimir, ela não existe mais.
    console.log(mensagemForaDoIf); // Imprime: DANIEL
}

imprimiMensagem(); // Saída: DANIEL

Substitua suas vars por let

Agora que sabemos a diferença entre var e let, podemos perceber que o uso de let passa a ser mais eficiente, pois garantimos que nossa variável vai estar acessível em um determinado escopo.

No exemplo, nossa variável foi declarada dentro do If, mas poderíamos ter feito logo após a declaração var mensagemForaDoIf e apenas atribuir o valor JS em nosso If, assim a variável mensagemDentroIf também estaria visível no escopo da função.

Constantes

Em qualquer linguagem de programação podemos declarar constantes, normalmente com a palavra-chave const. Uma constante é uma variável imutável, uma vez declarada e atribuído seu valor ela não poderá ser sobrescrita.

Em javascript uma const também está acessível dentro de um escopo de bloco, assim como temos em uma declaração let, assim podemos usar combinações de let e const em blocos e ter as variáveis descartar após a execução.

Exemplo constantes:

const cep = "90000001";

console.log(cep) // A saída será 90000001

cep = "80000002"; // A constante não será alterada.

Mas e agora, o que usar?

Sempre use constantes!

Parta do princípio que o dado é imutável, ao longo do código se perceber que a variável precisa ser sobrescrita, revise se o que está implementado e se realmente requer a substituição do valor declarado inicialmente.

Mas caso realmente faça sentido sobrescrever ou incrementar a variável, mu o tipo para let ou até mesmo para um array, mas sempre que possível, evite o uso de var.

Pode parecer um exagero, mas o uso de const vai evitar que sua variável seja sobrescrita em algum momento sem que você realmente deseje, além de ser descarregada sempre que o bloco de escopo for executado.

Isso é tudo, espero ter ajudado a esclarecer a diferença. Qualquer dúvida ou sugestão, deixe nos comentários.

Abraço! 🙂