Bonjour ,

Dans cet article, nous allons essayer d'expliquer les concepts de levage et de zone morte temporelle en JavaScript.

Le levage est un terme couramment utilisé en Javascript qui fait référence au processus par lequel la déclaration des fonctions , des variables ou des classes semble être déplacée vers le haut de leur portée, avant l'exécution du code.

Contrairement à la croyance populaire, le terme levage n'est pas un terme défini de manière normative dans la spécification ECMAScript.

Par exemple, considérez le code suivant :

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

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

var bar = 42;

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

Cependant, en raison du levage , le moteur JavaScript déplace la déclaration de baret fooen haut de la portée globale , ce qui la fait ressembler à ceci :

// global scope
var bar;

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

console.log(bar); // undefined

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

bar = 42;

Parlons maintenant de la différence entre les mots-clés var, letet constet de leur relation avec le levage.

Var

Le varmot-clé est le premier moyen de déclarer des variables en JavaScript. Elle est sujette au levage , ce qui signifie que la déclaration d'une varvariable est automatiquement déplacée vers le haut de sa portée respective (globale ou fonction) lors de l'exécution :

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

Les mots-clés letet constont été introduits dans la version ECMAScript 2015 (ES6) de JavaScript comme moyen de déclarer des variables et des constantes à portée de bloc .

Contrairement aux idées reçues, les mots- clés letet font également l'objet d'un hissage .const

Par exemple, considérez les exemples de code suivants :

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

Les déclarations faites avec leslet mots-clés et const sont également sujettes au hissage (c'est-à-dire qu'elles sont déplacées vers le haut de leur portée respective (globale ou bloc)) mais sont dites dans une zone morte temporelle (TDZ) signifiant que toute tentative d'y accéder sera entraîner une erreur de référence .

Considérez les exemples suivants :

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

En guise d'exercice, essayez de supprimer la déclaration de variable dans le ifbloc. Pouvez-vous accéder à la barvariable de portée globale, maintenant ?

En conclusion, lors de votre prochain entretien, lorsqu'on vous posera la question « est-ce que laisser et const se faire hisser ? », vous pourriez dire que :

Les déclarations faites avec les mots-clés letet constsont effectivement hissées mais avec la restriction de la zone morte temporelle (c'est-à-dire que le moteur JavaScript connaît les variables, mais elles ne peuvent pas être utilisées tant qu'elles n'ont pas été déclarées). De plus, les classes sont également soumises à la même forme de levage que letet const.