O que é hoisting em JavaScript?

O hoisting é um comportamento presente no JavaScript que faz com que declarações de variáveis e funções sejam "elevadas" para o topo do escopo em que são definidas. Isso significa que, independentemente de onde uma declaração de variável ou função apareça no código, ela será tratada como se estivesse no topo do escopo. Isso pode levar a comportamentos inesperados se você não estiver ciente disso.

Por exemplo, veja o seguinte código:

console.log(x);
var x = 5;

Você pode esperar que esse código gere um erro, pois a variável x não foi definida antes de ser usada. No entanto, devido ao hoisting, o código é interpretado como se fosse o seguinte:

var x;
console.log(x);
x = 5;

Como você pode ver, a declaração de x é "elevada" para o topo do escopo, o que significa que a primeira linha do código original não gera um erro. Em vez disso, x é undefined quando é impressa na primeira linha.

O hoisting também afeta as declarações de função. Por exemplo:

foo();

function foo() {
  console.log('foo');
}

Esse código também é interpretado como se fosse o seguinte:

function foo() {
  console.log('foo');
}

foo();

Isso significa que a função foo é "elevada" para o topo do escopo e, portanto, pode ser chamada antes de sua declaração aparecer no código.

É importante lembrar que o hoisting só afeta declarações e não atribuições. Portanto, o seguinte código ainda gerará um erro, pois a variável x não foi declarada antes de ser usada:

console.log(x);
x = 5;