Elevação de JavaScript

Resumo : neste tutorial, você aprenderá sobre o içamento de JavaScript e como ele funciona nos bastidores.

Introdução ao levantamento de JavaScript

Quando o mecanismo JavaScript executa o código JavaScript, ele cria o contexto de execução global . O contexto de execução global tem duas fases:

• Criação
• Execução

Durante a fase de criação, o mecanismo JavaScript move as declarações de variáveis ​​e funções para o topo do seu código. Isso é conhecido como elevação em JavaScript.

Elevação variável

Elevação de variáveis ​​significa que o mecanismo JavaScript move as declarações de variáveis ​​para o topo do script. Por exemplo, o exemplo a seguir declara a countervariável e inicializa seu valor como 1:

console.log(counter); // 👉 undefined
var counter = 1;Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, referenciamos a countervariável antes da declaração.

No entanto, a primeira linha do código não causa erro. A razão é que o mecanismo JavaScript move a declaração da variável para o topo do script.

Tecnicamente, o código se parece com o seguinte na fase de execução:

var counter;

console.log(counter); // 👉 undefined
counter = 1;
Linguagem de código:  JavaScript  ( javascript )

Durante a fase de criação do contexto de execução global, o mecanismo JavaScript coloca a variável counterna memória e inicializa seu valor como undefined.

A palavra-chave let

O seguinte declara a variável countercom a letpalavra-chave:

console.log(counter);
let counter = 1;Linguagem de código:  JavaScript  ( javascript )

O JavaScript emite o seguinte erro:

"ReferenceError: Cannot access 'counter' before initialization

A mensagem de erro explica que a countervariável já está na memória heap. No entanto, ele não foi inicializado.

Nos bastidores, o mecanismo JavaScript eleva as declarações de variáveis ​​que usam a letpalavra-chave. No entanto, ele não inicializa as letvariáveis.

Observe que se você acessar uma variável que não existe, o JavaScript gerará um erro diferente:

console.log(alien);
let counter = 1;Linguagem de código:  JavaScript  ( javascript )

Aqui está o erro:

"ReferenceError: alien is not definedLinguagem de código:  texto simples  ( texto simples )

Função de içamento

Assim como as variáveis, o mecanismo JavaScript também eleva as declarações de função . Isso significa que o mecanismo JavaScript também move as declarações de função para o topo do script. Por exemplo:

let x = 20,
  y = 10;

let result = add(x, y); 
console.log(result); // 👉 30

function add(a, b) {
  return a + b;
}Linguagem de código:  JavaScript  ( javascript )

Saída:

30

Neste exemplo, chamamos a add()função antes de defini-la. O código acima é equivalente ao seguinte:

function add(a, b){
    return a + b;
}

let x = 20,
    y = 10;

let result = add(x,y);
console.log(result); // 👉 30Linguagem de código:  JavaScript  ( javascript )

Durante a fase de criação do contexto de execução, o mecanismo JavaScript coloca a add()declaração da função na memória heap. Para ser mais preciso, o mecanismo JavaScript cria um objeto do Functiontipo e uma referência de função addque se refere ao objeto de função.

Expressões de função

O exemplo a seguir altera add de uma função regular para uma expressão de função:

let x = 20,
    y = 10;

let result = add(x,y); // ❌ Uncaught ReferenceError: add is not defined
console.log(result);

let add = function(x, y) {
    return x + y;
}Linguagem de código:  JavaScript  ( javascript )

Se você executar o código, ocorrerá o seguinte erro:

Uncaught ReferenceError: add is not definedLinguagem de código:  texto simples  ( texto simples )

Durante a fase de criação do contexto de execução global, o mecanismo JavaScript cria a addvariável na memória e inicializa seu valor para undefined.

Ao executar o código a seguir, addis undefined, portanto, não é uma função:

let result = add(x,y);Linguagem de código:  JavaScript  ( javascript )

A addvariável é atribuída a uma função anônima somente durante a fase de execução do contexto de execução global.

Funções de seta

O exemplo a seguir altera a addexpressão da função para a função de seta :

let x = 20,
    y = 10;

let result = add(x,y); // ❌ Uncaught ReferenceError: add is not defined
console.log(result);

let add = (x, y) => x + y; Linguagem de código:  JavaScript  ( javascript )

O código também emite o mesmo erro que o exemplo de expressão de função porque as funções de seta são açúcar sintático para definir expressões de função.

Uncaught ReferenceError: add is not definedLinguagem de código:  texto simples  ( texto simples )

Semelhante às expressões de funções, as funções de seta não são içadas.

Resumo

• A elevação do JavaScript ocorre durante a fase de criação do contexto de execução que move as declarações de variáveis ​​​​e funções para o topo do script.
• O mecanismo JavaScript eleva as variáveis ​​declaradas usando a letpalavra-chave, mas não as inicializa como as variáveis ​​declaradas com a varpalavra-chave.
• O mecanismo JavaScript não eleva as expressões de função e funções de seta.