Se você é novo no JavaScript, pode ter se deparado com situações confusas em que variáveis ​​parecem indefinidas ou erros como ReferenceError aparecem inesperadamente. Muitas vezes, isso pode ser atribuído a um conceito conhecido como içamento. Mas o que é elevação e como isso afeta seu código?

Neste guia, detalharemos o conceito de içamento e como ele funciona em JavaScript. Ao final, você entenderá por que o içamento acontece e como evitar erros comuns.

O que é içamento?
Hoisting é o comportamento do JavaScript de mover declarações de variáveis ​​​​e funções para o topo de seu escopo antes da execução do código. Isso significa que as declarações (não as atribuições) são processadas durante uma fase de preparação antes da execução real do seu código.

JavaScript passa primeiro por uma fase de criação, onde aloca memória para variáveis ​​​​e funções. No entanto, a maneira como ele lida com funções e variáveis ​​é um pouco diferente.

Içamento de função: definições totalmente içadas
As funções declaradas usando a palavra-chave function são içadas com sua definição completa. Isso permite que você chame ou use uma função antes de sua declaração real no código.

Por exemplo:

sum(5, 3); // Output: 8

function sum(a, b) {
  console.log(a   b);
}

Mesmo que a função sum() seja chamada antes de ser declarada no código, ela funciona perfeitamente porque a declaração da função é elevada ao topo de seu escopo durante a fase de criação.

Elevação variável: var, let e const
O içamento de variável se comporta de maneira diferente do içamento de função e varia dependendo se você usa var, let ou const.

1. var Declarações
Quando você declara uma variável usando var, ela é elevada ao topo de seu escopo com um valor padrão indefinido. Isso significa que você pode acessar a variável antes de sua declaração, mas até que você atribua um valor a ela, a variável permanecerá indefinida.

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

Neste exemplo, a cidade é içada inicialmente com um valor indefinido. Depois que o valor "Nova York" é atribuído, o segundo console.log() gera corretamente "Nova York".

2. declarações let e const
Com let e const, as variáveis ​​também são elevadas, mas permanecem não inicializadas. Isso significa que se você tentar acessá-los antes de sua declaração, você receberá um ReferenceError.

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = "John Doe";

Este erro ocorre porque as variáveis ​​​​let e const existem em algo chamado Zona Morta Temporal (TDZ) entre o início de seu escopo e o ponto onde são realmente declaradas. Durante esse período, você não poderá fazer referência à variável.

Principal diferença entre let e const
Let e ​​const se comportam de maneira semelhante em termos de elevação, mas const exige que você atribua um valor durante a declaração, enquanto let permite que você declare uma variável sem atribuir um valor imediatamente.

const name = "John Doe"; // Must be initialized
let age; // Can be declared without assignment

Içamento na prática
Vejamos um exemplo que demonstra o içamento de função e variável em ação:

console.log(city); // Output: undefined
sum(3, 4);    // Output: 7

function sum(x, y) {
  console.log(x   y);
}

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

Aqui, a função sum é içada com sua definição completa, para que possa ser chamada antes da função ser declarada. No entanto, a cidade é içada com um valor indefinido, o que explica porque o primeiro console.log() gera indefinido. Assim que a atribuição ocorrer, o segundo console.log() gera o valor correto.

Dicas para evitar armadilhas de içamento
Para evitar problemas causados ​​pelo içamento, siga estas práticas recomendadas:

1. - Use let e const em vez de var para evitar acessar variáveis ​​antes de sua declaração.
2. - Declare variáveis ​​e funções no topo de seu escopo para garantir que seu código se comporte de maneira previsível.

Recapitulação dos principais conceitos de içamento

• Hoisting refere-se ao comportamento do JavaScript de mover declarações para o topo de seu escopo antes da execução do código.
• Funções declaradas com function são içadas com suas definições completas, permitindo que sejam usadas antes de serem declaradas.
• Variáveis ​​declaradas com var são içadas com um valor padrão indefinido, enquanto variáveis ​​declaradas com let e const permanecem não inicializadas, causando um ReferenceError se acessadas antes da declaração.
• A Zona Morta Temporal (TDZ) se aplica a let e const, impedindo que eles sejam acessados ​​antes de serem inicializados.

Ao compreender o içamento, você pode evitar problemas comuns em JavaScript e escrever um código mais previsível. Com a prática, esses conceitos se tornarão uma segunda natureza.