Photo by Fabian Grohs on Unsplash

Afinal, qual a diferença entre var, let e const?

Novas formas de declarar variáveis foram implementadas no ECMAScript 6, você realmente sabe o por que e quando usar cada uma delas? Neste breve artigo vou falar sobre estes diferentes tipos e sobre os escopos do JavaScript.

Variáveis e escopos antes do ES6

Antigamente no JavaScript nem todos os blocos de código criavam escopo, o único escopo de variável existente era o de função, e a única forma de se declarar uma variável era utilizando o famoso var.

Exemplo do antigo escopo de variáveis do javascript

No exemplo acima, conseguir acessar a variável fora do for, mas não fora da função, nos mostra que o bloco criado pelo for não gerou escopo, mas o de função sim. Essa não é a realidade de muitas outras linguagens de programação, gerando assim uma confusão na migração para o javascript.

Além disso, o JavaScript permite a criação de variáveis sem utilizar a palavra reservada var antes da atribuição.

Declaramos uma variável sem a palavra reservada var

Quando declaramos uma variável sem a palavra reservada var, o JavaScript vai jogar essa variável para o escopo mais alto que ele encontrar (Window no caso de navegadores, ou Global no caso de Node.js), podendo gerar mais confusões e efeitos colaterais.

Exemplo de efeitos colaterais sem utilização de var, let ou const

Percebam que por um simples engano (ou falta de atenção) podemos estar alterando variáveis que não desejamos naquele momento (alterando o valor da variável total que não está em um escopo específico sem querer nas 2 funções) gerando assim um exemplo de efeito colateral.

Novos escopos, let e const

A partir do ES6, no JavaScript agora todo bloco tem seu escopo. No JavaScript, um bloco é determinado pelo uso de chaves, como por exemplo for, if e function. Um escopo determina a utilização (e visibilidade) das variáveis. Porém, isso só foi possível por conta das novas formas de atribuição de variáveis, o let e o const.

Exemplo do novo escopo de variáveis do javascript utilizando let

Quando utilizamos os novos let e const, eles respeitam o escopo léxico que agora existe em todos os blocos de código. Isso quer dizer que variáveis que são declaradas fora de uma função (escopo acima) podem ser acessadas dentro de uma outra função que foi criada depois da declaração daquela variável.

Exemplo de escopo léxico

Como o próprio nome já diz, devemos utilizar const no JavaScript quando vamos precisar atribuir um valor que não sofrerá alteração, mantendo assim um valor único em todo o sistema.

Exemplo de use do const

Porém, quando a nossa constante é um Object ou um Array, os valores de dentro deles podem ser alterados. Encontrei algumas discussões na internet sobre esse ponto e cheguei a conclusão de que nós não podemos atribuir um novo valor para aquela constante, mantendo assim a mesma referência, mas podemos modificar os valores da lista que essa referência aponta.

Exemplo de const com object e array

Para criarmos Objects e Arrays com valores realmente constantes vamos precisar utilizar o método Object.freeze(), isso irá congelar os valores no estado atual.

Criando Object e Array que não podem ser alterados

Conclusão

Nunca devemos criar variáveis sem utilizar palavras reservadas, para podermos ditar a visibilidade e utilização das nossas variáveis dentro dos escopos. O let é o novo var, deixando de lado o uso do var. O const do JavaScript não é tão const assim para Objects e Arrays, devemos utilizar o método Object.freeze() para congelarmos o valor.