Hoisting & Temporal Dead Zone

Hoisting e Temporal Dead Zone são conceitos importantes no JavaScript que estão relacionados à forma como as declarações de variáveis e funções são tratadas durante a fase de compilação e execução do código. Vou explicar ambos os conceitos e fornecer exemplos para ilustrar melhor cada um deles.

Hoisting

Hoisting é um comportamento no JavaScript onde as declarações de variáveis e funções são movidas para o topo do seu escopo atual durante a fase de compilação. Isso significa que, mesmo que você declare uma variável ou função após usá-la, o JavaScript "eleva" essas declarações para o topo do escopo, permitindo que você as utilize antes de serem declaradas no código.

Exemplo de Hoisting com variáveis:

console.log(name); // Output: undefined
var name = "Alice";

Neste exemplo, a declaração da variável nameé"elevada" para o topo do escopo, mas a atribuição de valor permanece no mesmo local. Portanto, quando você tenta imprimir name, ele existe, mas seu valor é undefined até que seja atribuído.

Exemplo de Hoisting com funções:

sayHello(); // Output: "Hello, there!"
function sayHello() {
console.log("Hello, there!");
}

Neste caso, a função sayHello é elevada para o topo do escopo, permitindo que ela seja chamada antes de sua declaração no código.

Temporal Dead Zone (TDZ)

O Temporal Dead Zone é um período entre a criação de uma variável e a sua declaração real no código. Durante esse período, se você tentar acessar a variável, um erro será gerado. Isso acontece porque a variável existe, mas ainda não foi inicializada com um valor.

Exemplo de Temporal Dead Zone:

console.log(age); // ReferenceError: age is not defined
let age = 25;

Neste exemplo, mesmo que a variável age seja declarada mais tarde no código, ela ainda está no TDZ quando você tenta acessá-la. Isso resulta em um erro de referência.

Exemplos combinados:

console.log(city); // Output: undefined
var city = "New York";

function getLocation() {
console.log(city); // Output: undefined
var city = "San Francisco";
console.log(city); // Output: "San Francisco"
}

getLocation();

Neste exemplo, a variável city é elevada para o topo do escopo da função getLocation, mas o valor é indefinido até a atribuição dentro da função. Isso ilustra tanto o conceito de hoisting quanto o Temporal Dead Zone.

Lembre-se de que, embora o hoisting seja um comportamento peculiar do JavaScript, é uma boa prática sempre declarar suas variáveis e funções antes de usá-las para evitar confusões e erros devido ao Temporal Dead Zone.

Resumo

O içamento (hoisting) em JavaScript ocorre quando as variáveis que você define dentro de uma função são movidas para o topo da função. Isso acontece toda vez que você define uma variável usando var.
Você não deve depender do comportamento de içamento.
Embora variáveis definidas com let e const também sejam içadas, você não pode acessá-las antes de serem inicializadas, pois elas não recebem um valor padrão.
A Zona Temporal Morta (Temporal Dead Zone) é uma maneira sofisticada de dizer que variáveis definidas com let e const não podem ser acessadas antes de serem inicializadas.
Ao usar código legado da Internet, na maioria dos casos, você pode substituir var por let, e o código continuará funcionando normalmente.