JavaScript é uma linguagem que geralmente se comporta de maneiras que podem confundir os recém-chegados. Um desses comportamentos é hoisting, um conceito que todo desenvolvedor JavaScript deve entender para escrever código mais previsível. Neste artigo, exploraremos o que é elevação, como funciona com variáveis ​​e funções e como você pode evitar as armadilhas associadas a ela.

O que é içamento?

Hoisting refere-se ao comportamento padrão do JavaScript de mover declarações (mas não inicializações) para o topo de seu escopo. Isso acontece durante a fase de compilação, antes da execução do código. Isso significa que você pode usar variáveis ​​e funções antes que elas sejam realmente declaradas em seu código.

Exemplo:

console.log(myVar); // undefined
var myVar = 5;

Neste exemplo, você pode esperar um ReferenceError porque myVar é usado antes de ser declarado. Porém, devido ao içamento, o que realmente acontece é que a declaração var myVar é movida para o topo do seu escopo, enquanto a atribuição (myVar = 5) permanece no lugar. Internamente, o JavaScript interpreta como:

var myVar;
console.log(myVar); // undefined
myVar = 5;

Por causa disso, myVar está definido, mas ainda não atribuído quando o console.log é executado, e é por isso que ele gera indefinido.

Içamento e Variáveis

Vamos detalhar como o içamento funciona com diferentes tipos de variáveis: var, let e const.

1. var Içamento

Com var, tanto a declaração quanto a variável são içadas. No entanto, apenas a declaração é movida, não a atribuição.

console.log(a); // undefined
var a = 10;

A declaração var a é içada, mas a atribuição acontece mais tarde, então a é indefinido quando logado.

2. let e const Içamento

Variáveis ​​declaradas com let e const também são içadas, mas não são inicializadas como indefinidas como var. Em vez disso, eles entram na Zona Morta Temporal (TDZ) desde o início de seu escopo até que a declaração seja encontrada.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

Aqui, b é içado, mas não está disponível até que a linha real da declaração seja executada, levando a um ReferenceError.

O mesmo comportamento se aplica a const, com a regra adicional de que as variáveis ​​const devem ser inicializadas no momento da declaração.

Içamento e funções

As declarações de função são totalmente içadas, o que significa que o nome e o corpo da função são movidos para o topo do escopo. Isso permite que você chame funções antes de serem declaradas.

Exemplo de declaração de função:

greet(); // "Hello, World!"

function greet() {
  console.log("Hello, World!");
}

Aqui, a declaração da função greet é totalmente içada, então a função pode ser chamada mesmo antes de o código atingir sua definição.

Expressões de função e içamento

As expressões de função, no entanto, não são içadas da mesma maneira. Como são tratadas como atribuições, apenas a declaração da variável é elevada – não a definição da função.

greet(); // TypeError: greet is not a function

var greet = function() {
  console.log("Hello, World!");
};

Neste caso, a variável greet é elevada, mas é atribuída a ela como indefinida durante o processo de elevação. É por isso que chamar greet() antes da atribuição gera um TypeError.

Evitando armadilhas de içamento

Para evitar confusão causada pelo içamento, siga estas práticas recomendadas:

1. Declarar variáveis ​​no topo de seu escopo – Embora o içamento mova as declarações para o topo, é uma boa prática declará-las no início de seus respectivos escopos. Isso torna seu código mais legível e previsível.

2. Use let e const em vez de var – Variáveis ​​declaradas com let e const têm escopo de bloco, o que torna o comportamento de elevação mais claro e menos sujeito a bugs. Também reduz a probabilidade de referenciar variáveis ​​acidentalmente antes de sua inicialização.

3. Organize declarações de função – Declare suas funções antes de usá-las para evitar depender de comportamento de elevação.

Conclusão

Hoisting é uma das muitas peculiaridades do JavaScript, mas entender como ele funciona pode ajudá-lo a escrever um código mais limpo e menos sujeito a erros. Lembre-se de que, embora as declarações de funções e as variáveis ​​sejam içadas, elas se comportam de maneira diferente. Atenha-se a let e const sobre var e mantenha seu código bem organizado para evitar surpresas.

Ao estar atento ao içamento, você pode tornar seu código JavaScript mais previsível e mais fácil de manter.