lmartns.com

O conceito de uma variável

Quando declaramos uma variável podemos considerar ou imaginar que ela seja um container, onde ele existe para armazenar algum valor, qual valor? em tese, qualquer um (dentro dos limites do código claro), mas podemos armazenar desde strings ate funções inteiras em uma variável. E como podemos declarar elas?

Dessa forma:

var number = 10;

Dessa forma vai funcionar? Sim. Mas é uma péssima ideia usar o “var” no Javascript e é sobre isso que vamos falar hoje. O let veio para concertar algumas coisas que o var faz de errado que com certeza podem resultar em dores de cabeça durante o desenvolvimento.

Talvez você possa estar se perguntando, alguém ainda usar var? Então... por incrível que pareça sim, e tive um exemplo recente disso em um projeto que participei, onde estávamos quebrando a cabeça para resolver uma issue e no final era um var perdido no código declarado de forma global resultando em undefined. Agora vamos falar um pouco sobre o let e por que devemos usa-lo.

Benefícios que temos ao usar o let:

Evita redeclaração no mesmo escopo.
Previne o uso antes da declaração.
Escopo limitado ao bloco.

Evita declaração no mesmo escopo

Não permite que você declare outra variável com o mesmo nome dentro do mesmo escopo. Isso ajuda a evitar bugs causados por redeclarações acidentais.

// Com 'var' 🚫
// Permite redeclarar variáveis no mesmo escopo, o que pode causar problemas
var number = 10;
var number = 20; // Isso funciona, mas pode levar a bugs, pois a variável é sobrescrita

console.log(number); // 20

// Com 'let' ✅
// Não permite redeclaração de variáveis no mesmo escopo, evitando erros
let number = 10;
let number = 20; // ❌ Isso gera um TypeError: Identifier 'number' has already been declared

Previne o uso antes da declaração

Variáveis declaradas com let não podem ser usadas antes de serem declaradas, pois o JavaScript não as inicializa automaticamente como undefined durante o hoisting.

// Com 'var' 🚫
// Permite usar a variável antes de sua declaração devido ao hoisting.
// A variável é "içada" para o topo do escopo e inicializada como undefined.
animal = "cat";

console.log(animal); // "cat"

var animal; // A declaração foi movida para o topo do escopo automaticamente

// Com 'let' ✅
// Não permite usar a variável antes de sua declaração.
// Gera um erro porque 'let' respeita a "zona temporal morta" (temporal dead zone - TDZ).
animal = "cat"; // ❌ ReferenceError: Cannot access 'animal' before initialization

console.log(animal);

let animal; // A declaração precisa estar antes do uso da variável

Escopo limitado ao bloco

Variáveis declaradas com let só existem dentro do bloco {} onde foram definidas. Isso reduz o risco de acessar acidentalmente uma variável fora do seu contexto pretendido.

// Com 'var' 🚫
// 'var' não respeita o escopo de bloco e pode ser acessada fora do bloco
if (true) {
  var message = "Olá, mundo!"; // Variável declarada dentro do bloco
}

console.log(message); // "Olá, mundo!" - A variável está acessível fora do bloco

// Com 'let' ✅
// 'let' respeita o escopo de bloco e só pode ser acessada dentro do bloco onde foi definida
if (true) {
  let message = "Olá, mundo!"; // Variável declarada dentro do bloco
  console.log(message); // "Olá, mundo!" - Acessível dentro do bloco
}

console.log(message); // ❌ ReferenceError: message is not defined

Conclusão

Como vimos, usar o let se tornou algo praticamente obrigatório (faz tempo na verdade, desde 2015), para termos uma boa experiência no desenvolvimento usando Javascript, então por favor não utilize o var a não ser que seja alguma questão de compatibilidade.

Referencias

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/let

https://developer.mozilla.org/pt-BR/docs/Glossary/Hoisting