Como funciona o var, let e const do JavaScript?
Tags: javascript, node
Published: 2020-02-20 12:31:25

A primeira forma que eu aprendi a declarar uma variável foi utilizando a `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!

{% youtube EFoEqHIwxqY %}

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:

```javascript
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:

```bash
Minha idade é: 30
```

Agora onde está o problema de escopo que eu comentei? Para entendermos isso, colocaremos estas duas linhas que escrevemos, dentro de uma função chamada `imprimeIdade` e depois executaremos ela:

```javascript
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:

```bash
Minha idade é: 30
```

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

```javascript
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:

```bash
/Users/marcobruno/Desktop/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 `while` essa variável irá vazar o escopo:

```javascript
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`:

```bash
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`:

```javascript
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:

```bash
/Users/marcobruno/Desktop/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`:

```javascript
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:

```bash
Idade dentro do for: 30
/Users/marcobruno/Desktop/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. 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:

```javascript
const pessoa = {
  nome: 'Henri',
  idade: 20
};

pessoa = {
  nome: 'Luna',
  idade: 19
};
```

Executando esse código iremos receber o seguinte erro:

```bash
/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:

```javascript
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 quer estudar ainda mais sobre JavaScript, recomendo você entrar na comunidade CollabCode no Discord: [http://bit.ly/discord-collabcode](http://bit.ly/discord-collabcode)