Hoisting JavaScript: o que é e como funciona

Hoisting é o comportamento padrão do JavaScript de mover declarações de variáveis e funções para o topo do escopo atual, antes da execução do código. Na prática, isso permite usar uma variável ou função antes de declará-la no código, mas apenas a declaração é elevada, não a inicialização.

O que exatamente é elevado (hoisted)?

Apenas declarações são içadas, nunca inicializações. Quando você escreve var nome = 'Ana', o JavaScript eleva apenas var nome para o topo do escopo, deixando a atribuição = 'Ana' no lugar original. Por isso, se você tentar usar a variável antes da linha de atribuição, recebe undefined, não um erro. A distinção entre declarar e inicializar é o coração do hoisting.

Como o hoisting funciona com var?

Com var, a declaração é elevada e a variável é inicializada com undefined automaticamente. O código abaixo não lança erro, apenas exibe undefined:

console.log(nome); // undefined var nome = 'Ana';

O interpretador lê o código como se fosse:

var nome; console.log(nome); // undefined nome = 'Ana';

Isso acontece porque var tem escopo de função, não de bloco, o que historicamente causava confusão e bugs sutis.

E com let e const?

let e const também sofrem hoisting, mas não são inicializados. A variável fica em uma zona morta temporal (TDZ, na sigla em inglês) até a linha de declaração ser executada. Acessar antes gera ReferenceError. Na prática, o hoisting existe, mas o efeito prático é diferente: você não consegue usar a variável antes da declaração sem erro.

console.log(idade); // ReferenceError: Cannot access 'idade' before initialization let idade = 30;

Essa diferença torna let e const mais seguros, pois forçam a declaração antes do uso.

Hoisting também se aplica a funções?

Sim, e de forma mais generosa. Declarações de função (function soma() {}) são elevadas com o corpo inteiro, permitindo chamá-las antes da declaração no código. Isso é útil para organizar funções de forma mais legível. Já expressões de função (const soma = function() {}) seguem a regra de variáveis: a atribuição não é içada, então tentar chamar antes gera erro.

Por que o hoisting existe?

O hoisting é uma consequência do processo de compilação do JavaScript. Antes de executar, o interpretador faz uma primeira passagem para reservar espaço de memória para declarações. O comportamento foi mantido por compatibilidade, mas as boas práticas recomendam declarar tudo no topo do escopo para evitar confusão.

Resumo prático

Declare variáveis no início do escopo, prefira const por padrão, use let quando precisar reatribuir e evite var em código novo. Entender hoisting ajuda a ler código legado e a prever erros de undefined e ReferenceError.

Perguntas frequentes sobre hoisting em JavaScript

Hoisting é exclusivo do JavaScript?

Sim, o termo é usado especificamente para o comportamento do JavaScript, embora outras linguagens tenham mecanismos semelhantes de elevação de declarações.

Hoisting acontece em arrow functions?

Arrow functions são expressões de função. Quando atribuídas a uma variável const, seguem as regras de const: hoisting da declaração, mas não da atribuição. Chamar antes gera erro.

Como evitar erros de hoisting?

Declare todas as variáveis no topo do escopo, use let e const em vez de var, e configure o ESLint com a regra no-use-before-define para pegar usos antes da declaração.

Hoisting funciona dentro de blocos if e loops?

var ignora blocos e eleva para o escopo da função. let e const respeitam blocos, então a variável só existe dentro do bloco e sofre hoisting apenas até o início do bloco.

Qual a diferença entre hoisting e escopo?

Hoisting é o mecanismo de elevação, escopo define onde a variável é visível. Os dois interagem: var tem escopo de função, let e const têm escopo de bloco, e o hoisting respeita esses limites.

O hoisting é considerado uma boa prática?

Não. Hoisting é um comportamento que existe, mas as boas práticas recomendam declarar antes de usar. Entender o mecanismo ajuda a debugar, mas não é algo para explorar intencionalmente.