Hoisting no Javascript, como funciona?

Se você já programou em Javascript, provavelmente já utilizou o hoisting, sabia? Mas, você sabe o que de fato é o hoisting e qual a sua utilização nos códigos?

Lançado a partir do ECMAScript 2015, o hoisting é uma característica do Javascript que permite com que você utilize variáveis e funções antes mesmo de declará-las, ou seja, é como se elas fossem “içadas” para o topo do código, mesmo que na prática isso não aconteça, já que isso ocorre porque elas elas são alocadas na memória durante a compilação do código.

E será que o hoisting funciona corretamente para todos os tipos de variáveis e funções? A resposta é NÃO!

Esse comportamento pode ser utilizado sem grandes problemas para variáveis globais do Javascript, aquelas declaradas com a palavra reservada VAR, e para funções de declaração, definidas pela palavra reservada FUNCTION, não sendo realizado para arrow functions, por exemplo.

Quer um exemplo de como funciona o hoisting? Olha só!

//Inicialização da variável antes de declará-la
nome = 'Jean';
var nome;
//Chamada da função antes de declará-la
imprime(nome)
function imprime(nome){
  console.log(nome)
}

O código acima pode ser executado sem problema algum. Mas, e se a variável nome fosse declarada utilizando a palavra reservada CONST, ou a função imprime fosse uma arrow function, sabe o que aconteceria? Bom, um ReferenceError seria lançado, que ocorre quando variáveis não inicializadas são referenciadas.

//Inicialização da variável antes de declará-la
nome = 'Jean';
let nome;
//Chamada da função antes de declará-la
imprime(nome)
const imprime = nome => console.log(nome)

Erros que poderiam ser lançados:

ReferenceError: Cannot access 'nome' before initialization
ReferenceError: Cannot access 'imprime' before initialization

Por fim, e legal saber que o hoisting não ocorre com a inicialização das variáveis globais, somente com as suas declarações. Aqui vai mais um exemplo:

console.log('O meu nome é' + nome)
nome = 'Jean';
var nome;

Nesse caso, visto que o console.log() é realizado antes da inicialização da variável, no terminal seria impresso a seguinte frase:

O meu nome é undefined

Quer entender um pouco mais sobre o hoisting e suas aplicações? Dê uma conferida na documentação oficial do Javascript!