Escopo de Variáveis Javascript

Tempo de leitura: 4 minutos

Escopo de Variáveis Javascript: O Escopo (Scope) em JavaScript é o conjunto de regras que define a visibilidade e acessibilidade de variáveis, funções e objetos em diferentes partes do seu código. Entender o escopo é fundamental para prevenir conflitos de nomes, proteger dados e escrever código modular e previsível.

O escopo é determinado no momento da definição do código (Escopo Léxico).

1. Tipos de Escopo por Declaração

A visibilidade de uma variável é estritamente ligada à palavra-chave usada para declará-la (var, let, ou const).

A. Escopo Global

Variáveis declaradas fora de qualquer função ou bloco. Elas podem ser acessadas em qualquer lugar da aplicação.

JavaScript

let nomeApp = "MeuApp"; // Variável global

function mostrarNome() {
  console.log(nomeApp); // Acessível em qualquer lugar
}

Alerta: Evite o uso excessivo de variáveis globais, pois elas poluem o ambiente e aumentam a chance de conflitos entre diferentes partes do código.

B. Escopo de Função (Function Scope)

Aplicável a variáveis declaradas com var. A variável é visível em toda a função em que foi declarada, independentemente de onde dentro da função ela foi colocada.

JavaScript

function calcular() {
  var resultado = 10;
  if (true) {
    var resultado = 20; // Reutiliza a mesma variável 'resultado'
  }
  console.log(resultado); // Saída: 20
}

C. Escopo de Bloco (Block Scope – ES6+)

Aplicável a variáveis declaradas com let e const. A variável só é visível e acessível dentro do bloco de código ({}) onde foi definida (ex: dentro de um if, for ou while).

JavaScript

function calcular() {
  let resultado = 10;
  if (true) {
    let resultado = 20; // Cria uma NOVA variável 'resultado' no escopo do bloco
    console.log(resultado); // Saída: 20
  }
  console.log(resultado); // Saída: 10 (Acessa a variável do escopo da função)
}

A Regra de Ouro: Use let e const e evite var. O escopo de bloco previne confusão e sobreescrita acidental de variáveis.

2. Hoisting e a Zona Morta Temporal

Hoisting é o mecanismo do JavaScript que move as declarações (mas não as inicializações) para o topo do seu escopo antes da execução do código.

Palavra-Chave	Hoisting da Declaração	Comportamento na Inicialização
`var`	Sim.	Inicializada como `undefined`.
`let`/`const`	Sim.	Não inicializada.

JavaScript

// Com 'var': A declaração é içada, mas o valor é undefined
console.log(a); // Saída: undefined
var a = 5;

// Com 'let': A variável entra na Zona Morta Temporal
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;

A Zona Morta Temporal (TDZ) é o período de tempo desde o início do escopo de um let/const até o momento de sua declaração, durante o qual ela não pode ser acessada.

3. Escopo Léxico e a Cadeia de Escopo

O JavaScript usa Escopo Léxico (ou Estático), o que significa que o escopo é determinado pela localização física de onde as variáveis e as funções são escritas no código, e não por onde elas são chamadas.

Quando o JavaScript procura uma variável, ele segue a Cadeia de Escopo:

Procura no escopo local (o mais interno).
Se não encontrar, sobe para o escopo externo (o que o envolve).
Continua subindo até atingir o Escopo Global.

JavaScript

function externa(msgExterna) {
  const x = "Externa";
  function interna(msgInterna) {
    // Busca 'x' no escopo externo (externa)
    console.log(`${x} chamou ${msgInterna}`); 
  }
  interna("Função interna");
}
externa();

✅ Conclusão Escopo de Variáveis Javascript

Escopo de Variáveis Javascript: O escopo é o sistema de regras que dita a visibilidade das suas variáveis. Ao utilizar let e const, você garante o Escopo de Bloco moderno, evitando surpresas do var e do hoisting.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo: