Como funciona o var, let e const? #01

A primeira forma que eu aprendi a declarar um variável foi utilizando o var mas faz algum tempo que temos outras duas formas para declararmos as nossas variáveis com JavaScript que são utilizando as palavras const e let. Bora entender no código como funcionam essas três formas de escrever uma variável com JavaScript.

Esse é o primeiro post de uma série que estou fazendo com o propósito de explicar, fixar e compartilhar as funcionalidades do JavaScript Moderno. Se quiser ver quais mais funcionalidades já tem vídeo e post você pode acessar esse post aqui:

Coisas do JavaScript Moderno

Se você preferir pode ver o conteúdo em vídeo. Só dar play no vídeo no canal que temos no YouTube. Gostando do vídeo não se esqueça de se inscrever no canal e se não gostou me fala o que posso melhorar, sempre gosto de feedbacks negativos porque é com eles que eu consigo crescer e melhorar :-)

Sem muitas delongas o problema que temos com a variável var é que ela tem um pequeno problema de escopo. Vamos entender isso melhor com um exemplo prático:

var idade = 30
console.log('Minha idade é:', idade)

Se você executar esse código tanto em cima da plataforma NodeJS ou abrindo no seu browser(navegador) favorito. Você terá a seguinte saída:

Minha idade é: 30

Agora onde está o problema de escopo que eu comentei? O que acontece se colocarmos estas duas linhas que escrevemos, o código da nossa variável idade criada com o vare a linha que chama o console.log que imprime o texto Minha idade é: concatenado com a nossa variável idade , dentro de uma função chamada imprimeIdade ? Logo após criarmos a função, vamos chamá-la para vermos o que acontece:

function imprimeIdade() {
  var idade = 30
  console.log('Minha idade é:', idade)
}
imprimeIdade()

Mesmo com esse código não temos problema de escopo. Se você executar o código acima no seu browser ou no NodeJS você terá a seguinte saída:

Minha idade é: 30

Agora o que deverá acontecer se colocarmos o console.log fora da nossa função imprimeIdade:

function imprimeIdade() {
  var idade = 30
}
imprimeIdade()
console.log('Minha idade é:', idade)

Se você está esperando receber um erro na execução desse código, você está certo. Executando o código você receberá um erro similar a este:

/Users/marcobruno/Desktop/medium/index.js:7
console.log('Minha idade é:', idade)
                              ^
ReferenceError: idade is not defined

Mas pera lá, eu disse que o var tem um problema de escopo. Sim ele tem, mas esse problema de escopo não acontece dentro de uma função. Dentro dela o escopo funciona como o esperado que é a variável só existir dentro das chaves da função. Agora quando criamos uma variável utilizando o var dentro de um if, for ou whileessa variável irá vazar o escopo:

function imprimeIdade() {
  for (var idade = 30; idade <= 40; idade++) {
    console.log('Idade dentro do for:', idade)
  }
  console.log('Idade fora do for:', idade)
}
imprimeIdade()

Pelo que aprendemos em lógica de programação nós deveriamos receber um erro na linha que utilizamos o console.log porque a variável idade foi criada dentro do escopo do for, mas ao invés disso não temos nenhum erro e nosso console.log executa sem problema nenhum após a execução do nosso loop for:

Idade dentro do for: 30
Idade dentro do for: 31
Idade dentro do for: 32
Idade dentro do for: 33
Idade dentro do for: 34
Idade dentro do for: 35
Idade dentro do for: 36
Idade dentro do for: 37
Idade dentro do for: 38
Idade dentro do for: 39
Idade dentro do for: 40
Idade fora do for: 41

Se você precisar que a variável idade se comporte como o esperado, você pode trocar o var por let:

function imprimeIdade() {
  for (let idade = 30; idade <= 40; idade++) {
    console.log('Idade dentro do for:', idade)
  }
  console.log('Idade fora do for:', idade)
}
imprimeIdade()

Agora com esse código nós recebemos uma mensagem de erro, como é o esperado dado o que estudamos em lógica de programação:

/Users/marcobruno/Desktop/medium/index.js:6
  console.log('Idade fora do for:', idade)
                                    ^
ReferenceError: idade is not defined

Por a let ter um comportamento mais previsível, nós evitamos ao máximo o uso da var. Portanto podemos concluir que a let é uma variável que podemos atribuir um novo valor para ela e a mesma não tem o problema de escopo como apresentado em variáveis que são criadas com a var.

E a const como ela funciona? Ela também não tem o problema de escopo mas você também não pode atribuir um novo valor para uma variável criada com const. Bora ver na prática o que acontece quando tentamos alterar o valor de uma variável que foi criada com const:

function imprimeIdade() {
  for (const idade = 30; idade <= 40; idade++) {
    console.log('Idade dentro do for:', idade)
  }
  console.log('Idade fora do for:', idade)
}
imprimeIdade()

No momento que você tentar executar o código acima receberá o seguinte erro:

Idade dentro do for: 30
/Users/marcobruno/Desktop/medium/index.js:2
  for (const idade = 30; idade <= 40; idade++) {
                                           ^
TypeError: Assignment to constant variable.

O erro que estamos recebendo diz que não podemos atribuir um novo valor para uma variável que foi criada com a const o que torna o comportamento dela muito mais previsível, já que o valor atribuído à ela não pode mudar, precisa ser constante. Por estes motivos procuramos sempre utilizar a const para criarmos as nossas variáveis e uma vez que recebemos o erro acima verificamos se realmente temos a necessidade de atribuir um novo valor à varíavel. Se isso for verdade, trocamos o const para let.

Vamos ver mais um exemplo com a const. No código a seguir vamos criar um variável chamada pessoa que receberá como valor um JSON com duas propriedades: nome e idade. Depois vamos tentar mudar o valor que setamos inicialmente:

const pessoa = {
  nome: 'Henri',
  idade: 20
}
pessoa = {
  nome: 'Luna',
  idade: 19
}

Executando esse código iremos receber o seguinte erro:

/Users/marcobruno/Desktop/medium/index.js:6
pessoa = {
       ^
TypeError: Assignment to constant variable.

Como vimos anteriormente não podemos atribuir um novo valor para uma const. Por outro lado conseguimos alterar o valor das propriedades do objeto da seguinte forma:

const pessoa = {
  nome: 'Henri',
  idade: 20
}
pessoa.nome = 'Luna'
pessoa.idade = 19
console.log('Nome:', pessoa.nome)
console.log('Idade:', pessoa.idade)

Portanto não podemos passar uma nova atribuição para uma const, mas podemos alterar as propriedades do objeto que definimos na const pessoa.

Espero que tenha ficado claro como funciona as três formas de variáveis do JavaScript. Se tiver qualquer dúvida você pode colocar nos comentários ou me adicionar nas redes sociais que eu tento te ajudar por lá também:

• Twitter
• Linkedin
• Facebook