Olá ,

Neste artigo, tentaremos explicar os conceitos de içamento e zona morta temporal em JavaScript.

Hoisting é um termo comumente usado em Javascript que se refere ao processo pelo qual a declaração de funções , variáveis ​​ou classes parece ser movida para o topo de seu escopo, antes da execução do código.

Ao contrário da crença popular, o termo hoisting não é um termo definido normativamente na especificação ECMAScript.

Por exemplo, considere o seguinte código:

// global scope
console.log(bar); // undefined

foo(); // "Hello, world!"

var bar = 42;

function foo() {
  console.log("Hello, world!");
}

No entanto, devido ao hoisting , o mecanismo JavaScript move a declaração de bare foopara o topo do escopo global , tornando-o assim:

// global scope
var bar;

function foo() {
  console.log("Hello, world!");
}

console.log(bar); // undefined

foo(); // "Hello, world!"

bar = 42;

Agora, vamos falar sobre a diferença entre as palavras-chave var, lete conste como elas se relacionam com a elevação.

var

A varpalavra-chave é a primeira forma de declarar variáveis ​​em JavaScript. Está sujeito a hoisting , o que significa que a declaração de uma varvariável é movida automaticamente para o topo de seu respectivo escopo (global ou função) em tempo de execução:

// global scope
console.log(bar); // undefined <-- PROOF OF THE HOISTING
var bar = 41;
console.log(bar); // 41

function foo() { // function scope
  console.log(bar); // undefined (not 41) <-- PROOF OF THE HOISTING
  var bar = 42;
  console.log(bar); // 42
}

foo();
console.log(bar); // 41

As palavras-chave lete constforam introduzidas na versão ECMAScript 2015 (ES6) do JavaScript como uma forma de declarar variáveis ​​e constantes com escopo de bloco .

Ao contrário da crença popular, as palavras- chave lete também estão sujeitas a içar .const

Por exemplo, considere os seguintes exemplos de código:

// global scope
console.log(bar); // ReferenceError
let bar = 42;
// global scope
console.log(bar); // ReferenceError
const bar = 42;

Declarações feitas com aslet palavras-chave e const também estão sujeitas a hoisting (ou seja, são movidas para o topo de seu respectivo escopo (global ou bloco)) , mas dizem que estão em uma zona morta temporal (TDZ) , o que significa que qualquer tentativa de acessá-las será resultar em um erro de referência .

Considere os seguintes exemplos:

// global scope
let bar = 41;
console.log(bar); // 41

if (true) { // block scope
 console.log(bar); // ReferenceError (not 41) <-- PROOF OF THE HOISTING / TDZ
 let bar = 42;
 console.log(bar); // 42
}

console.log(bar); // 41
// global scope
const bar = 41;
console.log(bar); // 41

if (true) { // block scope
 console.log(bar); // ReferenceError (not 41) <-- PROOF OF THE HOISTING / TDZ
 const bar = 42;
 console.log(bar); // 42
}

console.log(bar); // 41

Como exercício, tente remover a declaração da variável no ifbloco. Você pode acessar a variável com escopo global bar, agora?

Em conclusão, durante a sua próxima entrevista, quando lhe fizerem a pergunta “let e const são içados?”, você poderia dizer que:

As declarações feitas com as palavras-chave lete constsão efetivamente suspensas, mas com a restrição de zona morta temporal (ou seja, o mecanismo JavaScript está ciente das variáveis, mas elas não podem ser usadas até que sejam declaradas). Adicionalmente, as classes também estão sujeitas à mesma forma de içamento que lete const.