Levage en JavaScript

Le levage est un comportement dans lequel les déclarations de variables et de fonctions sont déplacées (ou "histées") vers le haut de leur portée contenant (soit la portée globale, soit la portée de la fonction) avant le code est exécuté. Cela signifie que vous pouvez utiliser des variables et des fonctions avant qu'elles ne soient réellement déclarées dans le code.

Levage en variables

var

• Les variables déclarées avec var sont hissées au sommet de leur portée, mais leurs valeurs ne sont initialisées qu'au point du code où l'affectation se produit.

console.log(x); // undefined
var x = 5;
console.log(x); // 5

laisser et const

• Les variables déclarées avec let et const sont également hissées mais sont placées dans une "zone morte temporelle" jusqu'à ce que leurs déclarations soient atteintes. Y accéder avant qu’ils ne soient déclarés entraînera une ReferenceError.

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;

// block scope
{
  let x = 5;
}

console.log(x); // ReferenceError: x is not defined

Levage dans les fonctions

Fonction traditionnelle

• Les déclarations de fonction sont entièrement hissées, ce qui signifie que la déclaration et le corps de la fonction sont déplacés vers le haut de la portée. Cela permet d'appeler une fonction avant sa déclaration dans le code.

sayHello(); // "Hello!"
function sayHello() {
  console.log("Hello!");
}

• En revanche, les expressions de fonction (où une fonction est affectée à une variable) ne sont hissées qu'en tant que variables, donc les appeler avant que la variable ne soit initialisée entraînera une erreur de type indéfinie ou TypeError.

greet(); // TypeError: greet is not a function
var greet = function () {
  console.log("Hi!");
};

greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
  console.log("Hi!");
};

Fonction flèche

• En revanche, les expressions de fonction (où une fonction est affectée à une variable) ne sont hissées qu'en tant que variables, donc les appeler avant que la variable ne soit initialisée entraînera une erreur de type indéfinie ou TypeError.

greet(); // TypeError: greet is not a function
var greet = () => {
  console.log("Hi!");
};

greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
  console.log("Hi!");
};

Zone Morte Temporelle (TDZ)

La zone morte temporelle (TDZ) existe pour les variables déclarées à l'aide de let et const car JavaScript est conçu pour vous empêcher d'accéder à ces variables avant qu'elles ne soient déclarées et initialisées.

Pourquoi var et let, const se comportent différemment lors du levage

• C'est à cause de l'évolution historique de JavaScript.
• Initialement, JavaScript a été conçu pour les utilisateurs qui ne sont pas des développeurs, et l'utilisation principale de JavaScript était d'ajouter de petits éléments interactifs à la page Web.
• Donc, var ne prend en charge que la portée fonctionnelle. À cette époque également, il n’y avait pas de portée de bloc.
• Mais dans l'évolution ultérieure de JavaScript, il est devenu plus compliqué de travailler avec var et de corriger les bugs.
• Ainsi, pour rendre JavaScript compétitif par rapport aux autres langages modernes, davantage de fonctionnalités ont été ajoutées telles que let, const, les fonctions fléchées, les méthodes ES6, etc.

Pourquoi var n'est pas mis à jour comme let et const

• C'est en raison de la compatibilité ascendante.
• À cette époque, JavaScript était largement utilisé par de nombreuses entreprises, donc la mise à jour ou la modification des fonctionnalités existantes entraîneraient une rupture de la base de code.
• Par conséquent, des fonctionnalités modernes ont été ajoutées individuellement.

Questions d'entretien courantes

• Qu'est-ce que le levage en JavaScript ?
• Qu'est-ce qui est hissé en JavaScript et qu'est-ce qui ne l'est pas ?
• Quelle est la différence entre var, let et const en ce qui concerne le levage ?
• Qu'est-ce que la zone morte temporelle (TDZ) en JavaScript ?
• Pouvez-vous expliquer le levage avec des déclarations de fonction par rapport aux expressions de fonction ?
• Qu'est-ce que le levage dans les modules ES6 ?
• Pourquoi devrions-nous éviter de compter sur le levage dans le code du monde réel ?

Résumé

• Le levage est le comportement par défaut en JavaScript où les déclarations de variables et de fonctions sont déplacées vers le haut de leurs portées respectives pendant la phase de compilation.
• Le levage ne fonctionne que pour les variables déclarées avec var et les fonctions traditionnelles, pas pour les fonctions let, const et arrow.
• Seule la déclaration de fonction est levée, donc les fonctions traditionnelles fonctionnent, mais si la fonction est affectée à une variable, elle ne pourra pas être appelée tant qu'elle n'est pas définie.
• La raison pour laquelle les fonctions var et traditionnelles sont levées mais pas les fonctions let, const et arrow est qu'au stade initial, JavaScript était principalement utilisé pour les petites interactions de l'interface utilisateur.
• Mais plus tard, à mesure que JavaScript était largement utilisé pour créer des applications par les entreprises, il est devenu plus difficile de corriger les bogues avec une portée uniquement mondiale.
• Ainsi, dans les futures mises à jour, des problèmes plus sécurisés ont été résolus.
• De plus, la mise à jour des fonctionnalités existantes aurait endommagé les bases de code, de nouvelles fonctionnalités ont donc été ajoutées séparément.