Diferença entre var, let e const no Javascript?

Tempo de leitura 3 minutos

Uma das maiores questões da atualidade quando falamos sobre variáveis no Javascript é sobre a diferença entre declarar variáveis com var, let ou const. Vou tentar ajudar explicando quais requisitos eu uso para decidir o que usar da forma mais correta possível.

Quer saber quando novos artigos forem publicados? Assine a newsletter!

Variable Hoisting no Javascript

A primeira informação importante a se relevar na hora de decidir qual das 3 palavras-chave usar é o hoisting.

Hoisting significa içamento ou elevação. Hoisting é a ação de pegar uma declaração de variável e elevar até o topo da execução.

Este comportamento acontece com a palavra-chave var e fica claro quando você testa o seguinte:

console.log(firstName);
var firstName = 'Erik';

O resultado deste teste é um undefined, já que quando o código é executado a declaração da variável firstName é içada ao topo e recebe um valor undefined, posteriormente o valor correto vem na linha em que você a definiu originalmente (antes de ser içada).

Quando você faz o mesmo teste com let ou const um erro do tipo ReferenceError acontece e o código para por ali mesmo, ou seja, um erro crítico que informa que não existe uma referência para esta variável, ou seja, ela NUNCA foi declarada até aquele momento.

Resumindo:

  • var: A declaração da variável é elevada para o começo e recebe um valor indefinido
  • let|const: A declaração da variável NÃO é elevada e recebe um erro de referência (crítico) caso seja usada antes de sua declaração.

Variable Scope

O escopo de variável é outro fator importante na hora da decisão, ele dita onde a variável estará visível.

A principal diferença aqui é entre o var e o let.

O var tem um escopo de função enquanto o let tem escopo de bloco, na prática isso quer dizer que quando o var é usado ele fica disponível por todo o function ou arquivo em que ele for declarado, o let fica disponível apenas naquele bloco, exemplo:

if (true) {
    var firstName = "erik";
}
console.log(firstName); // erik

if (true) {
    let lastName = "figueiredo";
}
console.log(lastName); // ReferenceError

Um outro exemplo bacana que eu vi aqui é este:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}

O setTimeout será executado DEPOIS que o loop termina em ambos os casos.

No caso do var, como o escopo da variável é “mais global” ele imprime 333, que é o valor de i ao final do loop.

No exemplo com let o resultado é 012, já que o i com let só existe naquele bloco e é exclusivo em cada iteração. No exemplo com var o i é atualizado a cada rodada do loop, com let ele se mantém com o mesmo valor.

E o const com isso?

Para quase todos os efeitos, o const é parecido com o let. A diferença se da pelo comportamento padrão do const, que é NÃO podermos atribuir seu valor novamente.

Um ponto importante:

atribuir !== atualizar

Atribuir o valor é informar o que você quer armazenar usando o operador =, assim:

const skills = ['Javascript'];
skills = ['Javascript', 'PHP']; // Uncaught TypeError: Assignment to constant variable

Isso quer dizer que uma vez declarada, a const não pode ser alterada diretamente, mas isso aqui é possível:

const skills = ['Javascript'];
skills.push('PHP')

Ou seja, eu posso alterar um conteúdo da variável (arrays e objects, por exemplo) desde que não atribua o valor novamente, qualquer ação que altere o valor SEM atribui-lo novamente é possível.

E agora? var, let ou const?

Embora o var NÃO tenha sido descontinuado e nem depreciado (eu pesquisei sobre depreciação do recurso e NÃO encontrei nada, por favor, se eu estiver errado, me corrijam, eu edito aqui) ele acabou ficando inútil pra mim, já que o let e o const SEMPRE me suprem, então eu já removi isso do meu arsenal.

Agora que o var está fora, a minha primeira escolha para declarar uma variável é o const, e caso eu precise atribuir algum valor posterior a atribuição original (e eu me esforço pra não precisar) eu troco de const para let.

É isso, eu simplesmente prefiro não ter que mudar algo que eu já defini e encaro isso como um possível “mau cheiro no código”, então minha prioridade é usar o const, mas também não sou rígido ao ponto de parar tudo e encarar como verdade absoluta, é só que pela minha experiência QUASE sempre que consigo uma solução para refatorar de let para const o código fica melhor.

Espero que tenha sido útil.

E se você quiser ser avisado sobre novos artigos, assine a newsletter do blog.

Autor: Erik Figueiredo

Músico, gamer amador, tutor de programação, desenvolvedor freelancer full cycle, com foco em PHP (Laravel e CakePHP), Javascript (Front e Node.js), Dart (Front e Flutter) e infra.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *