Tentarei escrever, com minhas próprias palavras, uma breve explicação do que é hoisting no JavaScript, quais as condições para isso acontecer e erros comuns que cometemos.
Hoisting
Hoisting é um termo que surgiu no mundo do JavaScript a partir do ECMAScript 2015 e, de forma resumida, permite que funções, variáveis e classes possam ser chamadas antes de serem definidas, dependendo de alguns fatores que iremos discutir a seguir.
Hoisting é a habilidade do JavaScript de, em tempo de compilação, armazenar em memória todas as declarações de variáveis e/ou funções para serem utilizadas ao serem chamadas. Isso não significa que as declarações foram fisicamente movidas para o topo do contexto em que se encontram, elas apenas foram alocadas em memória antes da execução do código.
Variáveis
Apenas declarações são hoisted, inicializações não. Isso significa que não é possível atribuir um valor para a variável depois de sua utilização. Em um cenário como esse, a variável terá um valor igual à undefined.
É importante dizer também que apenas variáveis criadas com var são hoisted, const e let não são. Caso você tente utilizar uma constante (const) antes de sua declaração, a aplicação exibirá um erro de referência.
Exemplos
value = 2024
console.log('Value', value)
// Will show "2024"
var value
console.log('Another Value', anotherValue)
// Will show "undefined"
var anotherValue = 2024
newLet = 2024
console.log('New Let', newLet)
// Will throw an error like this:
// ReferenceError: Cannot access 'newLet' before initialization
let newLet
console.log('Another Let', anotherLet)
// Will throw an error like this:
// ReferenceError: Cannot access 'anotherLet' before initialization
let anotherLet = 2024
console.log('Another Const', anotherConst)
// Will throw an error like this:
// ReferenceError: Cannot access 'anotherConst' before initialization
const anotherConst = 2024Funções
As declarações de funções em JavaScript são hoisted, mas function expressions não são.
Exemplos
sayHello("John");
function sayHello(name) {
console.log("Hello " + name);
}
// Will show "Hello John"
sayGoodbye("John");
const sayGoodbye = (name) => {
console.log("Goodbye " + name);
};
// Will throw an error like this:
// ReferenceError: Cannot access 'sayGoodbye' before initialization
saySomething("John");
const saySomething = function (name) {
console.log("Something, " + name);
};
// Will throw an error like this:
// ReferenceError: Cannot access 'saySomething' before initializationTemporal Dead Zone (TDZ)
Variables declared with const, let, or class are considered within the Temporal Dead Zone TDZ from the start of the block until their declaration. Therefore, when we try to use one of these variables before its declaration, JavaScript returns a ReferenceError. But more details about this will be covered in a future post.
