Hoisting em JavaScript

Você já ouviu falar sobre Hoisting em JavaScript? Esse conceito pode parecer confuso no início, mas é fundamental para entender como o JavaScript manipula variáveis e funções no momento de execução.

O que é Hoisting?

Hoisting é um comportamento padrão do JavaScript no qual variáveis e funções são movidas para o topo do escopo, seja ele global ou local, antes da execução do código. Isso significa que você pode declarar variáveis e funções em qualquer parte do seu código, e elas estarão acessíveis antes mesmo de serem declaradas.

Como funciona na prática?

Para entender melhor, vejamos um exemplo com variáveis:

console.log(nome); // undefined
var nome = "João";
console.log(nome); // João

No exemplo acima, você poderia esperar um erro na primeira linha, mas o que acontece é que o JavaScript “eleva” a declaração da variável nome para o topo do escopo, embora o valor atribuído a ela só seja definido na linha onde está a inicialização. Por isso, o resultado é undefined na primeira chamada.

No caso das funções, o comportamento é um pouco diferente. As funções são completamente elevadas, incluindo seu conteúdo:

saudar(); // Olá!
function saudar() {
  console.log("Olá!");
}

Aqui, mesmo chamando a função saudar() antes de sua definição, o JavaScript a “eleva”, tornando-a acessível em qualquer parte do escopo.

Hoisting com let e const

Com a introdução do let e const no ES6, o comportamento de hoisting foi parcialmente modificado. Embora essas variáveis ainda sejam elevadas, elas não podem ser acessadas antes da linha de sua declaração:

console.log(nome); // ReferenceError: Cannot access 'nome' before initialization
let nome = "João";

Isso acontece porque, diferentemente de var, as variáveis declaradas com let e const entram em um estado de “zona morta temporal” (TDZ – Temporal Dead Zone), onde não podem ser acessadas até que sua definição seja encontrada no código.

Outro exemplo prático

console.log('Valor = ', x)
var x = 5
concole.log('Valor = ', x)

No exemplo acima será impresso os valores Valor = undefined e Valor = 5, pois a variável x foi declarada na linha 2 mas foi “içada” para a linha 1 (existia mas não foi definida – sem valor).

 function valor() {
  console.log('Valor = ', x)
  var x = 5
  concole.log('Valor = ', x)
 }

No exemplo acima a variável x foi “içada” para fora da função.

Não é possível utilizar a técnica do hoisting em variáveis declaradas com a palavra chave let. O uso gera um erro.

O hoisting é um comportamento peculiar, mas poderoso, que pode causar confusão se não for bem compreendido. Ao trabalhar com JavaScript, é essencial lembrar-se de como variáveis e funções são elevadas no escopo para evitar erros inesperados e garantir que o seu código funcione como planejado.

Dúvidas ou sugestões sobre hoisting em JavaScript? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: hoisting