Ciao ,

In questo articolo, proveremo a spiegare i concetti di sollevamento e zona morta temporale in JavaScript.

Hoisting è un termine comunemente usato in Javascript che si riferisce al processo mediante il quale la dichiarazione di funzioni , variabili o classi sembra essere spostata nella parte superiore del loro ambito, prima dell'esecuzione del codice.

Contrariamente alla credenza popolare, il termine sollevamento non è un termine definito normativamente nella specifica ECMAScript.

Ad esempio, considera il seguente codice:

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

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

var bar = 42;

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

Tuttavia, a causa del sollevamento , il motore JavaScript sposta la dichiarazione di bare fooall'inizio dell'ambito globale , facendola apparire così:

// global scope
var bar;

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

console.log(bar); // undefined

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

bar = 42;

Ora parliamo della differenza tra le parole chiave var, let, e conste di come si relazionano al sollevamento.

Var

La varparola chiave è il primo modo di dichiarare le variabili in JavaScript. È soggetto a sollevamento , il che significa che la dichiarazione di una varvariabile viene automaticamente spostata all'inizio del rispettivo ambito (globale o funzione) in fase di esecuzione:

// 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

Le parole chiave lete constsono state introdotte nella versione ECMAScript 2015 (ES6) di JavaScript come un modo per dichiarare variabili e costanti con ambito di blocco .

Contrariamente alla credenza popolare, anche le parole chiave lete sono soggette a sollevamento .const

Ad esempio, considera i seguenti esempi di codice:

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

Anche le dichiarazioni effettuate con lelet parole chiave e const sono soggette a sollevamento (ovvero vengono spostate nella parte superiore del rispettivo ambito (globale o blocco)) ma si dice che si trovino in una zona morta temporale (TDZ) , il che significa che qualsiasi tentativo di accedervi verrà causare un errore di riferimento .

Considera i seguenti esempi:

// 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

Come esercizio, prova a rimuovere la dichiarazione di variabile nel ifblocco. barPuoi accedere alla variabile con ambito globale , ora?

In conclusione, durante il tuo prossimo colloquio, quando ti verrà posta la domanda "let e const vengono issati?", potresti dire che:

Le dichiarazioni fatte con le parole chiave lete constvengono effettivamente sollevate ma con la restrizione della zona morta temporale (cioè il motore JavaScript è a conoscenza delle variabili, ma non possono essere utilizzate fino a quando non sono state dichiarate). Inoltre, anche le classi sono soggette alla stessa forma di sollevamento di lete const.