Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado.

Hoisting é um mecanismo JavaScript que permite acessar variáveis ​​e funções antes de inicializá-las. Erguer tal declaração efetivamente a coloca no topo de seu escopo.

Saiba tudo sobre como o hoisting funciona em JavaScript e como gerenciá-lo da melhor forma para evitar erros em seu código.

Variáveis ​​de elevação com var, let e const

O hoisting é possível porque o JavaScript usa o sistema de compilação JIT (Just-in-Time), que varre seu código para identificar todas as variáveis ​​em seus respectivos escopos.

O compilador JIT eleva todas as instâncias de declarações de variáveis ​​para o topo de seu escopo durante a compilação. JavaScript apenas levanta declarações de variáveis, não suas inicializações.

O comportamento das variáveis, quando levantadas, depende da palavra-chave com a qual você as declara, pois cada palavra-chave se comporta de maneira diferente.

var

Acessando uma variável não inicializada declarada com o var palavra-chave retornará indefinido. Por exemplo:

console.log (foo); // indefinido
var foo = 2;

Os logs de código acima indefinido porque chama console.log antes de inicializar a variável.

O compilador JavaScript visualiza o bloco de código anterior da seguinte forma:

var foo;
console.log (foo); // indefinido
foo = 2;

Durante o levantamento, as variáveis ​​obedecem ao regras de escopo do JavaScript. O Javascript apenas elevará uma variável para o topo do escopo em que você a declarou. A tentativa de registrar o valor de uma variável fora de seu escopo declarado resultará em um ReferenceError. Por exemplo, se você declarar uma variável dentro de uma função, ela não ficará visível fora desse escopo:

funçãominhafunção() {
console.log (foo); // indefinido
var foo = 10;
}
minhaFunção();
console.log (foo); // ReferenceError: foo não está definido

Tentar acessar uma variável fora de seu escopo resultará em um ReferenceError.

deixe e const

De acordo com MDN documentação sobre deixar e const elevação, JavaScript também eleva variáveis ​​declaradas com o deixar e const palavras-chave. No entanto, ao contrário das variáveis ​​declaradas com o var palavra-chave, eles não são inicializados com um indefinido valor.

Por exemplo:

funçãominhafunção() {
console.log (foo); // indefinido
console.log (barra); // ReferenceError: Não é possível acessar 'bar' antes da inicialização
console.log(baz); // ReferenceError: Não é possível acessar 'baz' antes da inicialização
var foo = 5;
deixar barra = 10;
const baz = 15;
}
minhaFunção();

Você não pode acessar variáveis ​​declaradas com as palavras-chave let e const antes de inicializá-las com um valor.

Funções de Içamento

O JavaScript hoists funciona de forma semelhante às variáveis. Assim como as variáveis, depende de como você as declara. Por exemplo, o JavaScript eleva declarações de função de forma diferente das expressões de função.

Uma declaração de função é uma função declarada com um nome, enquanto uma expressão de função é uma função cujo nome você pode omitir. Por exemplo:

funçãofoo() {
// declaração da função
}
const barra = () => {
// expressão de função
}

JavaScript levanta declarações de função, mas não expressões de função. Por exemplo:

foo(); // 5
bar(); // TypeError: bar() não é uma função
// declaração de função
funçãofoo() {
console.registro(5);
}
// Expressão de função
var barra = funçãoexpressão() {
console.registro(10);
};

Este código chama foo antes de declarar e inicializá-lo como uma função, mas ainda registra 5 para o console. No entanto, tentando ligar bar resulta em um TypeError.

Gerenciando Içamento

Estar ciente da elevação e dos possíveis erros que podem ocorrer se gerenciados incorretamente pode economizar muitas horas de depuração. Aqui estão algumas maneiras de gerenciar o içamento.

Declarar variáveis ​​dentro de funções

Declare variáveis ​​dentro das funções que irão acessá-las. Você nem sempre poderá fazer isso, pois pode precisar de uma variável global que possa ser acessada em várias funções. Portanto, certifique-se de declarar variáveis ​​globalmente apenas se realmente precisar.

Declarar variáveis ​​com let ou const

Você deve sempre usar o let e Const palavras-chave no lugar do var palavra-chave ao declarar variáveis. Essa prática é benéfica ao declarar variáveis ​​locais dentro de uma função. Conhecer as formas adequadas de declarar variáveis ​​em JavaScript reduz as chances de erros causados ​​por hoisting ocorrendo em seu código.

Declarar variáveis ​​no topo de seu escopo

Declare todas as suas variáveis ​​no topo de seus respectivos escopos, antes de qualquer outra declaração. Isso garantirá que o compilador JavaScript não precise elevar essas variáveis ​​para acessá-las.

Usando o Modo Estrito

O modo estrito é um modo JavaScript que regula a sintaxe ruim, otimiza o tempo de execução do seu código e proíbe o abuso da sintaxe vagamente digitada do JavaScript lançando erros no tempo de compilação.

Por exemplo, em “modo desleixado”, devido ao hoisting, você pode acessar uma variável fora da função inicializada, mesmo que não tenha sido declarada:

minhaFunção();
console.log (foo); // 20
funçãominhafunção() {
 foo = 20; 
}

No bloco de código acima, o JavaScript declara automaticamente foo e o coloca no topo do escopo global, ignorando o escopo em que você o inicializou.

Você pode usar o modo estrito para corrigir esse comportamento e lançar um erro se tentar acessar a variável fora de seu escopo de função.

O modo estrito não para completamente o içamento. Em vez disso, evita as formas de elevação mais confusas e propensas a erros. Ainda é importante entender o conceito geral e as regras por trás do içamento, mesmo ao usar a rede de segurança de modo estrito.

Para optar pelo modo estrito em nível global, declare a sintaxe na parte superior do seu arquivo de script:

"usarestrito"; // ou 'usarestrito'

Para optar pelo modo estrito em um nível de função, declare a sintaxe na parte superior do corpo da função antes de qualquer instrução:

funçãomyStrictFunction() {
 "usarestrito";
}

Se você declarar o modo estrito em um nível de função, a configuração será aplicada apenas às instruções dentro dessa função.

Declarar o modo estrito em nível global evita que as variáveis ​​sejam acessadas fora de seus respectivos escopos:

"usarestrito";
minhaFunção();
console.log (foo); // ReferenceError: foo não está definido
funçãominhafunção() {
 foo = 20; 
}

Com o modo estrito ativado, o compilador JavaScript irá içar minhaFunção() ao topo de seu escopo sem a variável não declarada.

Entenda o que afeta o içamento

A elevação é bastante exclusiva do JavaScript e pode ser um comportamento muito confuso para você entender. Isso pode afetar variáveis ​​e funções, mas existem maneiras de evitá-lo, se necessário.

Vários fatores podem afetar o hoisting, portanto, é melhor evitar qualquer ocorrência de hoisting de variável ou função em seu código.