Elevação de JavaScript: o que você precisa saber

Se você trabalha com JavaScript há algum tempo, provavelmente já ouviu o termo “hoisting”. Na verdade, para os entrevistadores, é um dos conceitos sobre os quais eles gostam de perguntar porque mostra o nível de compreensão do candidato sobre JavaScript. No entanto, o que exatamente significa hoisting e como isso afeta seu código? Neste artigo, mostrarei o que você precisa saber sobre isso e seus impactos em seu código.

Em primeiro lugar, vejamos o significado linguístico desse termo antes de passarmos a falar sobre seu uso técnico. Içar é simplesmente usado para se referir ao ato de levantar ou puxar algo, geralmente com o uso de cordas ou polias. Você ouvirá declarações como “ela colocou a mochila no ombro”, “içar uma bandeira”, “a carga foi içada para dentro do navio” e assim por diante. Outras palavras para içar incluem levantar ou subir.

Com relação ao JavaScript, “hoisting” refere-se ao comportamento em que o interpretador move automaticamente as declarações de variáveis ​​ou funções para o topo do escopo antes de sua execução. Isso significa que antes de uma variável ou função ser declarada em seu código, você ainda pode usá-la.

Por exemplo, considere o seguinte código:

A linha var x = 10 tem duas ações nela:

1. Declaração de variável “var”.
2. Atribuição de variável “=”.

Curiosamente, deve-se notar que a elevação afeta apenas declarações, não atribuições ou inicializações. No exemplo acima, o valor de x é indefinido quando é registrado no console porque a atribuição de 10 ainda não ocorreu.

Para entender isso melhor, vamos dar uma olhada em como esse comportamento é exibido pelas funções.

No exemplo acima, você observaria que mesmo quando a função era chamada antes de ser declarada, o código ainda funcionava bem e nos dava a expressão correta quando logado. Quer a função seja declarada antes da chamada ou vice-versa, o comportamento permanece o mesmo. O interpretador JavaScript pegou a declaração da função e a colocou no topo do escopo antes de sua execução. É como se o código fosse assim:

Por outro lado, vamos considerar como hoisting funciona com uma função anônima ou função atribuída a uma variável. Um exemplo disso mostrado no exemplo abaixo:

Como você pode ver, o código acima produziu um erro. O içamento não oferece suporte à atribuição, que é a explicação mencionada anteriormente para esse caso. Uma expressão conhecida como “expressões de função imediatamente invocadas” é uma abordagem inovadora para executar uma função anônima (IIFE em resumo).

Igualmente importantes para o comportamento de hospedagem em variáveis ​​JavaScript são as duas palavras-chave “let” e “const”, que também são usadas para declaração de variáveis ​​como “var”. Ao contrário de suas contrapartes “var”, o valor de uma variável declarada com “let” ou “const” não é elevado. Se você tentar acessar o valor de qualquer um deles antes de ser declarado, receberá uma exceção ReferenceError conforme mostrado nas imagens abaixo.

Ao usar hoisting, um erro comum que muitos desenvolvedores cometem é presumir que o valor de uma variável é sempre inicializado como indefinido. No entanto, isso só é preciso para variáveis ​​que possuem a palavra-chave “var” em sua declaração. Qualquer tentativa de acessar uma variável que tenha sido declarada com “let” ou “const” antes da atribuição resultará em um ReferenceError. As melhores práticas de codificação modernas recomendam fortemente evitar o uso de “var” em favor de “let” e “const” porque oferecem melhor proteção contra alterações não intencionais ou acidentais em suas variáveis.

Concluindo, hoisting é um conceito importante em JavaScript que pode ter um grande impacto em seu código. Certifique-se de mantê-lo em mente ao escrever e depurar seus programas para evitar qualquer ambigüidade ou comportamento inesperado que ele traga. Geralmente é uma boa prática declarar todas as suas variáveis ​​no topo do seu escopo. Isso não apenas tornará seu código mais fácil de entender, mas também simples de manter.