O que é Hoisting?

Hoisting é um mecanismo interno do JavaScript no qual declarações de variáveis var, let, const e funções function são movidas para o topo de seu escopo (global ou de função) antes da execução do código. Esse comportamento é um reflexo da fase de compilação do JavaScript, onde o ambiente de execução constrói o contexto de execução antes da execução propriamente dita.

Comportamento do Hoisting

Variáveis

Primeiro preciso separar o comportamento que acontece com a variável var é diferente das demais, a variável é elevado ao topo do escopo com um valor implícito de undefined. Esse comportamento ocorre porque o motor que interpreta o JavaScript processa as declarações de variáveis na fase de compilação, mas a atribuição de valor ocorre somente na fase de execução. Podemos ver no exemplo a seguir:

console.log(name) // Retorna undefined
var name // Declaração de variável
name = 'Ewerton' // Atribuição do valor

Processo do código no momento de compilação/interpretação:

var name // A variável é içada (hoisting) e inicializada com valor 'undefined'
console.log(name) // Retorna 'undefined'
name = 'Ewerton' // O valor é atribui na fase de execução

A variável var foi içada ao topo, portanto qualquer tentativa de acessar a variável antes de sua atribuição name = "Ewerton" teremos o retorno undefined.

Variáveis declaradas com let e const também sofrem hoisting, contudo, diferente var não são inicializadas automaticamente. Isso significa que, até a linha onde são declaradas, tentativas de acesso resultarão em um erro de referência. Exemplo:

console.log(name) // ReferenceError: name is not defined
let name = 'Ewerton'

Processo:

// 'name' está em Temporal Dead Zone (TDZ) até sua declaração ser executada
let name
console.log(name) // ReferenceError: name is not defined
name = 'Ewerton'

O espaço de memória para a variável let name = "Ewerton" é alocado na fase de compilação, mas não é inicializado antes da linha de declaração. Esse período entre o início do escopo e a declaração efetiva da variável é chamada de Temporal Dead Zone (TDZ). O mesmo comportamento ocorre com const, porém com a restrição adicional de que a variável deve ser inicializada na declaração.

Funções

Funções declaradas com function são totalmente içadas ao topo do escopo e podem ser invocadas antes de sua definição. Exemplo:

console.log(somar(2, 7)) // 9
 
function somar(x, y) {
  return x + y
}

Processo:

// A função é movida integralmente para o topo
function somar(x, y) {
  return x + y
}
 
console.log(somar(2, 7)) // 9

Funções atribuídas a variáveis como function expressions e arrow functions seguem o comportamento das variáveis, sendo içada ao top sem inicialização. Apenas um adendo ao comportamento das variáveis var como vimos anteriormente são inicializadas com undefined. Exemplificando:

console.log(multiplicar) // undefined
console.log(multiplicar(2, 7)) // TypeError: multiplicar is not a function
 
var multiplicar = function (x, y) {
  return x * y
}

Processo:

var multiplicar // Variável é içada e inicializada com valor 'undefined'
console.log(multiplicar) // undefined
console.log(multiplicar(2, 3)) // TypeError: multiplicar is not a function
multiplicar = function (x, y) {
  return x * y
}

Conclusão

Considerações finais, entender o funcionamento do Hoisting é fundamental para prevenir comportamentos indesejados e criar código mais confiável.

Referências

MOZILLA DEVELOPER NETWORK. Hoisting. MDN Web Docs, [s.d.]. Disponível em: https://developer.mozilla.org. Acesso em: 04 mar. 2025.

FREECODECAMP. What is the Temporal Dead Zone? 06 out. 2020. Disponível em: https://www.freecodecamp.org. Acesso em: 04 mar. 2025.

2ALITY. Why the Temporal Dead Zone? 19 out. 2015. Disponível em: https://2ality.com. Acesso em: 04 mar. 2025.

GEEKSFORGEEKS. JavaScript Hoisting. 29 jan. 2025. Disponível em: https://www.geeksforgeeks.org. Acesso em: 04 mar. 2025.