Variáveis Var, Let, e Const em JavaScript

Em JavaScript, var, let, e const são três formas de criar variáveis. Aqui, vamos falar sobre o escopo e a diferença entre estas três formas.

Um pouco de história sobre a declaração de variáveis

No início do JavaScript, havia uma maneira de declarar uma variável e, isto é, usando a palavra-chave var. Depois let e const são introduzidas no ES6, mas não foi possível utilizá-la imediatamente. Agora, todos os principais navegadores compatíveis com a sintaxe let e const, e a maioria dos desenvolvedores usam let e const atualmente.

Var

Variáveis declaradas usando a palavra-chave var ao contexto de execução atual. Isto significa que se elas estão dentro de uma função só podemos acessá-las dentro da função. e se não estão, elas fazem parte do escopo global que podemos acessar em qualquer lugar. veja o exemplo abaixo para melhor compreensão.

var personagem = "Mario";
console.log(personagem); // imprime Mario

(function novaFunction() {
  var personagem = "Luigi";
  console.log(personagem) // imprime Luigi
})();

Aqui, a Luigi é escopo de função e o Mario pertence ao escopo global. Se tentarmos acessar uma variável global é possível. mas se tentarmos acessar uma variável com escopo de função, não é possível. veja outro exemplo abaixo.

var personagem = "Mario";
console.log(personagem); // imprime Mario

(function novaFunction() {
  var inimigo = "Rei Kopa";
  console.log(inimigo) // prints Rei Kopa
  console.log(personagem); // imprime Mario
})();

console.log(inimigo); // Error (inimigo is not defined)

Um dos problemas com o uso da palavra-chave var é que eles podem ser redeclarados dentro do mesmo escopo. Isto trará alguns problemas sérios se declararmos outra variável usando o mesmo nome dentro do mesmo escopo, a nova variável substituirá a antiga. var também pode ser atualizada.

var personagem = "Mario";
var personagem= "Luigi";

console.log(personagem) // imprime Luigi

personagem = "Princesa";

console.log(personagem) // imprime Princesa

E outra questão com var é que estas variáveis não são delimitadas por blocos, o que significa que se temos declarações de condições, estas não são delimitadas a essa declaração, mas a toda a função ou ao escopo global.

(function olaMundo(){
    for(var i = 0; i < 5; i++){
      console.log("Olá Mundo"); // imprime Olá Mundo 5 vezes
    }
  
    console.log(i); //imprime 5
})();

Let

Esta é a versão melhorada das declarações var. A declaração de variáveis usando esta forma elimina todas as questões que discutimos anteriormente. vamos criar variáveis que são codificadas em bloco. Além disso, elas não podem ser redeclaradas e podem ser atualizadas. O exemplo abaixo mostra a melhor escolha para usar let do que var.

let personagem = "Mario";
console.log(personagem); // imprime Mario

(function () {
  let personagem = "Luigi";
  console.log(personagem) // imprime Luigi
})();

let personagem = "Rei Kopa"; // Error

personagem = "Rei Kopa";

console.log(personagem) // imprime Rei Kopa

Confira o exemplo abaixo para entender mais sobre o comportamento do let dentro de um scopo.

(function olaMundo() {
  for(let i = 0; i < 5; i++){
    console.log("Olá Mundo"); // imprime Olá Mundo 5 vezes
  }
  
  console.log(i); // Error
})();

Const

Variáveis ​​Const não podem ser atualizadas ou redeclaradas. Esta forma é usada para declarar constantes. Igual às declarações let, as declarações const têm escopo de bloco. Ao contrário de var e let, quando estamos usando const para declarar uma variável que deve ser inicializada.

const personagem = "Mario";
console.log(personagem); // imprime Mario

(function (){
  const personagem = "Luigi";
  console.log(personagem); // imprime Luigi
})();

const personagem = "Rei Kopa"; // Error

personagem = "Rei Kopa"; // Error
console.log(personagem); // Error

Quando usamos const para criar um objeto, podemos atualizar as propriedades dentro desse objeto. Veja o exemplo abaixo para melhor compreensão.

const player = {
  nome: "Mario",
  status: "Grande",
};

player.status = "Pequeno";

console.log(player.status); // imprime Pequeno

Eu pessoalmente prefiro usar let e const em vez de var e usar const para declarar variáveis constantes e sempre usar let para declarar variáveis se não for uma constante.