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 indefinidolet|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 Javascript? 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.
O post Diferença entre var, let e const no Javascript? apareceu primeiro em Blog Erik Figueiredo – Dicas para desenvolvedores.
Este artigo foi importado automaticamente por fazer parte do Planetário Dev. Quer fazer parte deste HUB de conteúdos? Faça parte do Planetário e veja as vantagens.
Não tem site ou blog? Seja um autor do site e ainda pode ser remunerado.
Leia também: