Se você começou a brincar com a linguagem JavaScript há alguns anos atrás, com certeza aprendeu que nela trabalhamos com variáveis através da palavra reservada var. Como a linguagem não é tipada, utilizamos o var para armazenar qualquer tipo de dado em variáveis, desde os primários (String, Number, Boolean, etc) até tipos complexos (estruturas criadas pelo desenvolvedor). Seguem alguns exemplos:

var numero = 1; // ok
var string = “1”; // ok
var olaMundo = function() {
    console.log(“Olá mundo!”);
} // também ok!

Entretanto, tudo isso mudou em meados de 2015, quando a sexta versão da especificação ECMAScript foi lançada. Essa especificação – regulamentada pela ECMA Internacional – trouxe um grande número de mudanças para a linguagem JavaScript. Entre elas, o surgimento de mais duas palavras reservadas: let e const.

Assim como o var, essas palavras são utilizadas para que trabalharmos com as variáveis dentro do JavaScript. Entretanto, apesar de parecer que funcionam da mesma maneira, elas possuem grandes diferenças na prática.

Neste artigo vamos explorar um pouco melhor essas diferenças.

Versão em vídeo

Além das instruções que daremos abaixo, você também pode acompanhar todos os passos que serão feitos na versão em vídeo!

Let e Const

Antes que possamos falar das diferenças entre todas elas, vamos fazer uma revisão de como o let e const funcionam por si só. O let é muito semelhante ao var, no sentido de que podemos instanciar e armazenar qualquer tipo de objeto nelas. Veja só alguns exemplos:

let numero = 1; // ok
let string = “1”; // ok
let olaMundo = function() {
    console.log(“Olá mundo!”);
} // também ok!

Uma vez criadas as variáveis, quando utilizamos o let os seus valores podem ser sobrescritos, até mesmo por outros tipos de dados como, por exemplo:

let numero = 1;
numero = “1”;

console.log(numero); // 1

Até aí não há muitos segredos (mas há diferenças ocultas que já veremos!). O const também funciona de forma análoga aos demais, entretanto, uma vez que o valor foi atribuído à variável, ele não pode ser modificado. Vamos tentar executar o exemplo anterior utilizando o const:

const numero = 1;
numero = “1”;

console.log(numero); // 1

Ao tentar executar este código, temos um resultado semelhante a este:

TypeError: Assignment to constant variable.
	at evalmachine.<anonymous>:2:8
	at Script.runInContext (vm.js:74:29)
	at Object.runInContext (vm.js:182:6)
	at evaluate (/run_dir/repl.js:133:14)
	at ReadStream.<anonymous> (/run_dir/repl.js:116:5)
	at ReadStream.emit (events.js:180:13)
	at addChunk (_stream_readable.js:274:12)
	at readableAddChunk (_stream_readable.js:261:11)
	at ReadStream.Readable.push (_stream_readable.js:218:10)
	at fs.read (fs.js:2124:12

Reparem que o erro diz que estamos tentando fazer uma atribuição a uma variável constante. Isso significa que a referência desta variável na memória é sempre a mesma, por isso não podemos trocá-la. Porém, podemos fazer isso:

const pessoa = {
  nome: 'Diego',
  idade: 26
}

pessoa.sobrenome = 'Pinho';

console.log(pessoa);
// { nome: 'Diego', idade: 26, sobrenome: 'Pinho' }

A referência continua a mesma, por isso conseguimos inserir mais propriedades no objeto.

Const e let x var

Até este ponto talvez eu ainda não tenha te convencido que realmente existe uma diferença relevante entre as três palavras chave, mas acho que meu último argumento te fará mudar de ideia. Repare no seguinte trecho de código abaixo:

var mensagem = 'olá';
{
    var mensagem = 'adeus'
    console.log(mensagem);
}
console.log(mensagem);

Qual você acha que será o resultado da execução deste código?

a) olá olá
b) olá adeus
c) adeus olá
d) adeus adeus

Se você respondeu qualquer alternativa que não seja a “d”, você errou. Por que? Porque o var possui o que chamamos de escopo de função. Em termos práticos, significa que dentro de uma mesma função, a referência da variável é a mesma. Como não temos nenhuma distinção de função neste código, assim que atribuímos o valor “adeus” na variável mensagem, ela é impressa com este valor no console.log().

A grande diferença é que tanto o let quanto o const possuem o que chamamos de escopo de bloco. Ou seja, uma mesma referência só existe enquanto estiver dentro de um bloco. Veja como isso funciona no exemplo a seguir:

let mensagem = 'olá';
{
    let mensagem = 'adeus'
    console.log(mensagem);
}
console.log(mensagem);

Ao executar este código, temos um resultado diferente:

adeus
olá

Interessante, né? Como o escopo é de bloco, as duas variáveis com nome mensagem coexistem e trabalham de formas distintas dentro do seu próprio escopo. E agora, te convenci?

Conclusão

O var continua funcionando mesmo após várias versões da especificação terem saído após o ES6 (ECMAScript 2015). No entanto, sua utilização não é recomendada. O motivo é simples: há opções melhores. Com o let e const evitamos alguns dos problemas mais irritantes do JavaScript, e de quebra, damos mais segurança e legibilidade ao nosso código.

Aproveito o gancho para te fazer um convite especial! Se você gostou do artigo e quiser aprender mais sobre o ES6, te convido a ler o meu livro e assistir o meu curso sobre o assunto. Em ambos, exploro cada um dos aspectos mais relevantes da especificação, inclusive o assunto deste artigo. Confere lá e depois e conte-me o que achou!

• http://entendendoes6.com.br/