Desvendando o Hoisting do Javascript

O Básico do Hoisting: "Ei, eu já te conheço!"

Sabe quando você entra numa festa e vê alguém que jurava que só ia chegar mais tarde, mas a pessoa já tá lá, te esperando? No JavaScript, isso acontece direto, só que com variáveis e funções. Isso se chama hoisting, ou em bom português, "içamento". O JavaScript dá uma espiada no código antes mesmo de rodar pra valer e fala: "Ah, tá aqui uma variável/função. Deixa eu lembrar dela para quando precisar mais pra frente".

Variáveis: "Eu sei que você tá aí, mas não sei quem você é"

Com as variáveis, é como se o JavaScript dissesse: "Sei que você existe, mas só vou saber mais sobre você quando a gente se encontrar de verdade". Se você tentar usar uma variável antes de dizer ao JavaScript quem ela é de fato, ele vai te responder com um belo undefined. Isso porque ele sabe da existência da variável, mas não sabe o valor dela até que você declare.

Exemplo no mundo real:

console.log(meuPet); // O JavaScript diz: "Conheço um 'meuPet' sim, mas ainda não sei quem é"
var meuPet = "doguinho"; // Agora sim, o JavaScript sabe que seu pet é um doguinho

Nessa brincadeira, o JavaScript age como se tivesse feito isso:

var meuPet; // "Tô sabendo que tem um 'meuPet' por aí"
console.log(meuPet); // "Hmm, 'meuPet'... Não sei quem é ainda, então é 'undefined'"
meuPet = "doguinho"; // "Aaah, então 'meuPet' é um doguinho!"

Funções: "Já sei todos os seus segredos antes mesmo de você contar"

Agora, quando o papo é função, o JavaScript parece aquele amigo que já sabe de tudo antes mesmo de você contar. As funções são completamente içadas, então você pode chamar uma função antes mesmo de declará-la no código.

Exemplo:

falaAe(); // O JavaScript já tá ligado e executa a função de boa

function falaAe() {
  console.log("Salve, JavaScript na área!");
}

Aqui, não importa onde você colocou a função no seu código. O JavaScript já deu um jeito de saber tudo sobre ela antes mesmo de começar a festa.

Recapitulando

• let e const: Se você tentar esse truque de chamar antes de declarar com let ou const, o JavaScript vai te dar um gelo, um tal de ReferenceError. Isso porque let e const são mais tímidos e só se revelam no momento certo.
• Moral da história: Saber sobre hoisting ajuda a evitar aquelas situações embaraçosas no código, tipo chamar alguém que você ainda não apresentou direito.