JavaScript let explicado: diferenças entre let, var e const (guia para iniciantes e intermediários)

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

.## 1. Introdução

A declaração de variáveis em JavaScript é um dos conceitos mais fundamentais da programação. Nos últimos anos, três palavras‑chave de declaração diferentes—var, let e const—tornaram‑se de uso comum, tornando importante escolher a mais adequada para cada situação.

Neste artigo, focamos na palavra‑chave “javascript let” e explicamos claramente as características e o uso do let, bem como suas diferenças em relação a var e const. O conteúdo foi pensado para desenvolvedores iniciantes a intermediários, cobrindo desde conceitos básicos até o uso prático.

Nosso objetivo é ajudar os leitores a entender com precisão quando e por que usar o let, permitindo que escrevam código JavaScript seguro, eficiente e de fácil manutenção.

2. Visão geral dos métodos de declaração de variáveis em JavaScript

Em JavaScript, as variáveis são usadas para armazenar dados temporariamente. Existem três palavras‑chave principais disponíveis para declarar variáveis:

• var: O método tradicional de declaração de variáveis usado em versões mais antigas do JavaScript
• let: Uma declaração de variável com escopo de bloco introduzida no ES6 (ECMAScript 2015)
• const: Uma palavra‑chave de declaração de constante, também introduzida no ES6

Cada uma dessas palavras‑chave possui características diferentes, portanto é importante escolher a mais adequada dependendo do propósito e do contexto.

A tabela abaixo resume suas principais características:

Conforme mostrado nesta tabela, o let é amplamente usado como uma declaração de variável flexível que suporta escopo de bloco e permite reatribuição, tornando‑o adequado para muitos cenários modernos de JavaScript.

3. let O que é? — Uso básico

let é uma palavra‑chave de declaração de variável mais recente, introduzida no ES6. Ela possui, principalmente, as seguintes características.

1. Possui escopo de bloco
2. Permite reatribuição
3. Seu comportamento de hoisting difere de var

3.1 Sintaxe básica do let

O código a seguir mostra a forma básica de declarar uma variável usando let.

let x = 10;  // Declare variable x and assign the value 10
x = 20;      // Reassignment is allowed
console.log(x); // Output: 20

Como pode ser visto neste exemplo, o let permite alterar o valor após a declaração. Isso difere do const e torna o let adequado para o gerenciamento flexível de dados.

3.2 Características do escopo de bloco

Como o let tem escopo de bloco, ele só é válido dentro do bloco onde foi declarado.

{
  let y = 30;  // Declared inside the block
  console.log(y); // Output: 30
}
console.log(y); // Error: y is not defined

Dessa forma, a variável y não pode ser referenciada fora do bloco, resultando em um erro. Isso ajuda a evitar poluição global não intencional e possibilita um gerenciamento de variáveis mais seguro.

3.3 Comportamento de hoisting

O let é hoisted, mas tentar acessá‑lo antes da declaração gera um erro.

console.log(z); // Error: Cannot access 'z' before initialization
let z = 50;

Esse comportamento contrasta com o var, que é inicializado como undefined durante o hoisting. Para evitar erros, use o let somente após ele ter sido declarado.

4. Diferenças entre var e let

Em JavaScript, você pode declarar variáveis usando var ou let, mas existem várias diferenças importantes entre elas. Nesta seção, focamos em escopo, redeclaração e comportamento de hoisting, explicando as diferenças em detalhes com exemplos concretos.

4.1 Diferenças de escopo

Uma diferença fundamental é que var tem escopo de função, enquanto let tem escopo de bloco.

Exemplo de escopo de função (var)

function exampleVar() {
  if (true) {
    var a = 10; // Variable declared inside the function
  }
  console.log(a); // Output: 10
}

exampleVar();

Exemplo de escopo de bloco (let)

function exampleLet() {
  if (true) {
    let b = 20; // Valid only within the block
  }
  console.log(b); // Error: b is not defined
}

exampleLet();

.Because of this difference, let is better suited to preventing unintended variable redefinition or overwriting.

Por causa dessa diferença, let é mais adequado para evitar redefinição ou sobrescrita não intencional de variáveis.

4.2 Whether Redeclaration Is Allowed

4.2 Se a Redefinição é Permitida

var can be redeclared within the same scope, but let does not allow redeclaration.

var pode ser redeclarado dentro do mesmo escopo, mas let não permite redeclaração.

Redeclaration Example with var

Exemplo de Redefinição com var

var x = 10;
var x = 20; // Redeclaration is allowed without issues
console.log(x); // Output: 20

Redeclaration Example with let

Exemplo de Redefinição com let

let y = 10;
let y = 20; // Error: Identifier 'y' has already been declared
console.log(y);

With this characteristic, let helps prevent mistakes where the same variable is accidentally declared more than once.

Com essa característica, let ajuda a prevenir erros onde a mesma variável é declarada acidentalmente mais de uma vez.

4.3 Hoisting Differences

4.3 Diferenças de Hoisting

Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their scope.

Hoisting é um mecanismo do JavaScript onde declarações de variáveis e funções são movidas para o topo de seu escopo.

Hoisting Example with var

Exemplo de Hoisting com var

console.log(z); // Output: undefined
var z = 30;

Hoisting Example with let

Exemplo de Hoisting com let

console.log(w); // Error: Cannot access 'w' before initialization
let w = 40;

4.4 Summary of Usage

4.4 Resumo de Uso

var is used for older code or when backward compatibility is required, whereas let is used in modern code to achieve safer scope management.

var é usado para código antigo ou quando a compatibilidade retroativa é necessária, enquanto let é usado em código moderno para alcançar um gerenciamento de escopo mais seguro.

Comparison Table

Tabela de Comparação

5. Differences Between const and let

5. Diferenças entre const e let

In JavaScript, const is another commonly used variable declaration method alongside let. In this section, we take a closer look at the differences between let and const and explain how to use each appropriately.

No JavaScript, const é outro método de declaração de variável comumente usado ao lado de let. Nesta seção, analisamos mais de perto as diferenças entre let e const e explicamos como usar cada um adequadamente.

5.1 What Is const?

5.1 O que é const?

const is a keyword used to declare variables that cannot be reassigned.

const é uma palavra‑chave usada para declarar variáveis que não podem ser reatribuídas.

Basic Syntax

Sintaxe Básica

const pi = 3.14; // Declare a constant
pi = 3.14159;    // Error: Assignment to constant variable.

In this example, the value of pi cannot be changed after declaration, and attempting to reassign it results in an error.

Neste exemplo, o valor de pi não pode ser alterado após a declaração, e tentar reatribuí‑lo resulta em um erro.

5.2 Differences Between let and const

5.2 Diferenças entre let e const

5.3 Reassignment and Redeclaration Comparison

5.3 Comparação de Reatribuição e Redefinição

Reassignment Example with let

Exemplo de Reatribuição com let

let count = 1;  // Initialization
count = 2;      // Reassignment is allowed
console.log(count); // Output: 2

Reassignment Example with const

Exemplo de Reatribuição com const

const maxCount = 10;
maxCount = 20; // Error: Assignment to constant variable.

As shown above, let is suitable for handling changing values, while const is best for fixed values.

Como mostrado acima, let é adequado para lidar com valores que mudam, enquanto const é melhor para valores fixos.

5.4 Important Notes for Objects and Arrays

5.4 Observações Importantes para Objetos e Arrays

Although const prevents reassignment, the properties of objects and elements of arrays can still be modified.

Embora const impeça a reatribuição, as propriedades de objetos e os elementos de arrays ainda podem ser modificados.

Object Example

Exemplo de Objeto

const user = { name: "Taro" };
user.name = "Jiro"; // Modifying properties is allowed
console.log(user.name); // Output: "Jiro"

user = { name: "Saburo" }; // Error: Reassignment is not allowed

Array Example

Exemplo de Array

const numbers = [1, 2, 3];
numbers.push(4); // Adding elements is allowed
console.log(numbers); // Output: [1, 2, 3, 4]

numbers = [5, 6, 7]; // Error: Reassignment is not allowed

5.5 Practical Usage Examples

5.5 Exemplos Práticos de Uso

Cases where const should be used:

Casos em que const deve ser usado:

1. Constants or values that never change

2. Constantes ou valores que nunca mudam

   const TAX_RATE = 0.1;
   

2. When fixing references to objects or arrays

3. Ao fixar referências a objetos ou arrays

   const CONFIG = {
     apiUrl: "https://example.com/api",
   };
   

Cases where let should be used:

Casos em que let deve ser usado:

1. When values need to change dynamically

2. Quando os valores precisam mudar dinamicamente

   let count = 0;
   count++;
   

2. Variables incremented within loops

3. Variáveis incrementadas dentro de loops

   for (let i = 0; i < 10; i++) {
     console.log(i);
   }
   

6. When to Use let and Key Considerations

6. Quando Usar let e Considerações Principais

JavaScript provides three variable declaration options: var, let, and const. Among them, let plays a particularly useful role in specific situations.

O JavaScript oferece três opções de declaração de variável: var, let e const. Dentre elas, let desempenha um papel particularmente útil em situações específicas.

In this section, we explain when you should use let and the key points to keep in mind.

Nesta seção, explicamos quando você deve usar let e os pontos chave a serem lembrados.

6.1 Recommended Use Cases for let

6.1 Casos de Uso Recomendados para let

1. Quando o escopo de bloco é necessário
   Como o let tem escopo de bloco, ele permite um gerenciamento seguro de variáveis dentro de instruções condicionais e loops. Exemplo: Gerenciando variáveis dentro de um bloco condicional

   if (true) {
     let message = "Hello, World!";
     console.log(message); // Output: Hello, World!
   }
   console.log(message); // Error: message is not defined
   

2. Quando os valores precisam ser atualizados dinamicamente
   const não permite reatribuição, mas let é adequado para cenários em que os valores mudam dinamicamente. Exemplo: Gerenciamento de variáveis dentro de um loop

   let total = 0;
   for (let i = 1; i <= 5; i++) {
     total += i;
   }
   console.log(total); // Output: 15
   

3. Quando armazenar valores temporários
   Para variáveis usadas apenas brevemente dentro de uma função, let melhora a legibilidade e a manutenção do código. Exemplo: Variáveis locais dentro de uma função

   function calculateDiscount(price) {
     let discount = 0.1; // Temporary discount rate
     return price * (1 - discount);
   }
   console.log(calculateDiscount(1000)); // Output: 900
   

6.2 Pontos a observar ao usar let

1. Tenha cuidado com a inicialização da variável
   Acessar uma variável let antes de sua declaração resulta em erro. Exemplo: Acesso antes da inicialização

   console.log(a); // Error: Cannot access 'a' before initialization
   let a = 10;
   

2. Entenda o comportamento de hoisting
   Embora o let seja içado (hoisted), ele não pode ser acessado dentro da “Zona Temporal Morta (TDZ)”. Exemplo: comportamento da TDZ

   if (true) {
     console.log(b); // Error: Cannot access 'b' before initialization
     let b = 20;
   }
   

3. Esteja ciente dos limites de escopo
   Você não pode redeclarar uma variável com o mesmo nome dentro do mesmo bloco. Exemplo: Erro de redeclaração

   let c = 10;
   let c = 20; // Error: Identifier 'c' has already been declared
   

4. Use let para evitar poluição global
   Usar var aumenta o risco de afetar o escopo global, enquanto let ajuda a reduzir esse risco. Exemplo: Evitando conflitos entre variáveis globais e locais

   let d = 50; // Global variable
   function test() {
     let d = 30; // Local variable
     console.log(d); // Output: 30
   }
   test();
   console.log(d); // Output: 50
   

7. Seção de FAQ (Perguntas Frequentes)

Nesta seção, resumimos perguntas comuns e respostas relacionadas ao let em JavaScript. Preocupações práticas e soluções para problemas frequentes são explicadas com exemplos concretos.

Q1: Por que devo usar let?

R:
let é recomendado pelos seguintes motivos.

1. Escopo de bloco: Como o let restringe o escopo da variável a um bloco, impede sobrescritas não intencionais.
2. Prevenção de redeclaração: Redeclaração dentro do mesmo escopo não é permitida, reduzindo o risco de bugs.
3. Segurança com hoisting: let lança erro dentro da Zona Temporal Morta (TDZ), facilitando a detecção de erros onde variáveis são acessadas antes da declaração.

Q2: Que problemas ocorrem ao usar var?

R:
Embora o var mantenha compatibilidade com código antigo, ele apresenta os seguintes problemas.

1. Escopo muito amplo: Como possui apenas escopo de função, variáveis declaradas dentro de blocos podem ser acessíveis inadvertidamente fora deles.

   if (true) {
     var x = 10;
   }
   console.log(x); // Output: 10
   

2. Redeclaração é permitida: Isso pode resultar em sobrescrita acidental de variáveis.

   var y = 20;
   var y = 30; // Overwriting occurs
   

3. Comportamento de hoisting: Variáveis declaradas com var são inicializadas como undefined, permitindo acesso antes da inicialização.

   console.log(z); // Output: undefined
   var z = 50;
   

Q3: Como devo escolher entre let e const?

R:
A regra básica é a seguinte.

• const: Use quando o valor não deve mudar ou quando ele deve ser tratado como constante.
• let: Use quando o valor pode mudar ou precisar ser atualizado dinamicamente.

Exemplo:

const TAX_RATE = 0.1;
let price = 1000;
price = price * (1 + TAX_RATE); // Price calculation

Escolher a palavra-chave apropriada com base na natureza dos dados torna seu código mais expressivo e fácil de entender.

Q4: O que causa o ReferenceError ao acessar let antes da inicialização?

A:
Variáveis declaradas com let são elevadas (hoisted), mas não podem ser acessadas dentro da “Zona Morta Temporal (TDZ)”.

Exemplo:

console.log(a); // Error: Cannot access 'a' before initialization
let a = 10;

Solução:
Declare e inicialize variáveis juntas, e preste muita atenção à ordem do código.

8. Conclusão

Neste artigo, explicamos detalhadamente let nas declarações de variáveis em JavaScript. Cobrimos o uso básico, diferenças em relação a var e const, exemplos práticos e respostas a perguntas frequentes.

Abaixo está um resumo conciso dos pontos principais discutidos.

8.1 Características Principais de let

1. Possui escopo de bloco:

• let é válido apenas dentro de um bloco ( {} ).
• Isso previne a sobrescrita acidental de variáveis.

1. Permite reatribuição:

• Adequado para loops e lógica condicional onde os valores mudam dinamicamente.

1. Não permite redeclaração:

• Melhora a segurança do código ao prevenir declarações duplicadas.

1. Comportamento de hoisting:

• As declarações são elevadas, mas acessar variáveis antes da inicialização causa um erro devido à TDZ.

8.2 Comparação com Outros Métodos de Declaração

8.3 Onde let É Mais Útil

let é especialmente eficaz nos seguintes cenários.

• Instruções condicionais e loops: Usado quando os valores mudam dinamicamente.

  for (let i = 0; i < 5; i++) {
    console.log(i);
  }
  

• Variáveis locais dentro de funções: Ideal para armazenar valores temporários.

  function calculateTotal(price) {
    let discount = 0.1;
    return price * (1 - discount);
  }
  

• Gerenciamento de estado dinâmico: Útil quando os valores mudam com base na entrada do usuário ou estado da aplicação.

  let userInput = prompt("Please enter your name:");
  console.log(`Hello, ${userInput}!`);
  

8.4 Melhores Práticas e Precauções

1. Evite acessar variáveis antes da declaração: Declare variáveis cedo para prevenir erros relacionados ao hoisting.
2. Prefira const, e use let apenas quando a reatribuição for necessária: Isso melhora a clareza e a segurança do código.
3. Esteja atento ao gerenciamento de escopo: Sempre considere o escopo das variáveis para evitar acesso não intencional ou conflitos.

8.5 Resumo Final

let é uma escolha flexível e segura para declaração de variáveis na programação moderna em JavaScript.

• Use var apenas para código legado; prefira let ou const em novos projetos.
• Use let para valores que mudam e const para valores fixos para melhorar a legibilidade e confiabilidade.

8.6 Próximos Passos

Aplique o que você aprendeu experimentando com código real. Você também pode achar os seguintes tópicos úteis como próximos passos de aprendizado.

1. Tipos de dados JavaScript e conversão de tipos – Aprofunde seu entendimento do gerenciamento de dados.
2. Funções e escopo em profundidade – Domine o controle avançado de escopo e design de funções.
3. Visão geral de recursos do ES6 e posteriores – Explore capacidades modernas do JavaScript.