Hosting no Javascript: o que é e como as variáveis se comportam?

Hoisting é um comportamento peculiar do Javascript que afeta a maneira como as variáveis são tratadas durante a execução do código. Durante a fase de compilação do Javascript, as declarações de variáveis (var, const e let) são movidas para o topo do escopo em que foram definidas, independentemente da posição real em que aparecem no código.

No entanto, é importante ressaltar que apenas a declaração da variável é movida para o topo, não a atribuição de valor. Isso significa que se você atribuir um valor a uma variável antes de declará-la, o valor não será movido para o topo junto com a declaração. Apenas a declaração em si será hoisted.

Vamos considerar o exemplo a seguir:

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

No código acima, mesmo que a declaração da variável nome apareça após o primeiro console.log, o hoisting faz com que essa declaração seja movida para o topo, fazendo com que a variável exista no escopo. No entanto, o valor “undefined” é retornado na primeira chamada ao console.log, pois a atribuição de valor ocorre apenas depois.

No caso das variáveis declaradas com const e let, o hoisting ocorre da mesma forma, mas com um comportamento um pouco diferente. Enquanto as declarações com var são inicializadas com o valor “undefined”, as declarações com const e let não são inicializadas, resultando em um erro de referência antes da declaração.

Por exemplo:

console.log(nome); // ReferenceError: Cannot access 'nome' before initialization
const nome = "Maria";
console.log(nome); // "Maria"

No código acima, a tentativa de acessar a variável nome antes da declaração resulta em um erro. Isso ocorre porque o hoisting move apenas a declaração da variável para o topo, mas não a inicializa. Portanto, é importante sempre declarar as variáveis antes de utilizá-las para evitar erros de referência.