JavaScript est un langage qui se comporte souvent d'une manière qui peut dérouter les nouveaux arrivants. L'un de ces comportements est le hoisting, un concept que tout développeur JavaScript doit comprendre pour écrire du code plus prévisible. Dans cet article, nous explorerons ce qu'est le levage, comment il fonctionne avec des variables et des fonctions, et comment vous pouvez éviter les pièges qui y sont associés.

Qu'est-ce que le levage ?

Le levage fait référence au comportement par défaut de JavaScript consistant à déplacer les déclarations (mais pas les initialisations) vers le haut de leur portée. Cela se produit pendant la phase de compilation avant l'exécution du code. Cela signifie que vous pouvez utiliser des variables et des fonctions avant qu'elles ne soient réellement déclarées dans votre code.

Exemple:

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

Dans cet exemple, vous pouvez vous attendre à une ReferenceError car myVar est utilisé avant d'être déclaré. Cependant, en raison du levage, ce qui se passe réellement, c'est que la déclaration var myVar est déplacée vers le haut de sa portée, tandis que l'affectation (myVar = 5) reste en place. En interne, JavaScript l'interprète comme :

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

Pour cette raison, myVar est défini mais pas encore attribué lors de l'exécution du fichier console.log, c'est pourquoi il affiche un résultat non défini.

Levage et variables

Décomposons le fonctionnement du levage avec différents types de variables : var, let et const.

1. var Levage

Avec var, la déclaration et la variable sont hissées. Cependant, seule la déclaration est déplacée, pas l'affectation.

console.log(a); // undefined
var a = 10;

La déclaration var a est levée, mais l'affectation a lieu plus tard, donc a n'est pas défini une fois connecté.

2. let et const Levage

Les variables déclarées avec let et const sont également hissées, mais elles ne sont pas initialisées à undefined comme var. Au lieu de cela, ils entrent dans la Zone morte temporelle (TDZ) depuis le début de leur portée jusqu'à ce que la déclaration soit rencontrée.

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

Ici, b est levé, mais il n'est pas disponible tant que la ligne de déclaration réelle n'est pas exécutée, ce qui conduit à une ReferenceError.

Le même comportement s'applique à const, avec la règle supplémentaire selon laquelle les variables const doivent être initialisées au moment de la déclaration.

Levage et fonctions

Les déclarations de fonction sont entièrement hissées, ce qui signifie que le nom et le corps de la fonction sont déplacés vers le haut de la portée. Cela vous permet d'appeler des fonctions avant qu'elles ne soient déclarées.

Exemple de déclaration de fonction :

greet(); // "Hello, World!"

function greet() {
  console.log("Hello, World!");
}

Ici, la déclaration de fonction greet est entièrement levée, de sorte que la fonction peut être appelée avant même que le code n'atteigne sa définition.

Expressions de fonctions et levage

Les expressions de fonction, cependant, ne sont pas hissées de la même manière. Puisqu'elles sont traitées comme des affectations, seule la déclaration de variable est hissée, pas la définition de fonction.

greet(); // TypeError: greet is not a function

var greet = function() {
  console.log("Hello, World!");
};

Dans ce cas, la variable greet est levée, mais elle est affectée de manière non définie pendant le processus de levage. C'est pourquoi appeler greet() avant l'affectation renvoie une TypeError.

Éviter les pièges du levage

Pour éviter toute confusion causée par le levage, suivez ces bonnes pratiques :

1. Déclarez les variables en haut de leur portée – Bien que le levage déplace les déclarations vers le haut, c'est une bonne pratique de les déclarer au début de leurs portées respectives. Cela rend votre code plus lisible et prévisible.

2. Utilisez let et const au lieu de var – Les variables déclarées avec let et const ont une portée de bloc, ce qui rend le comportement de levage plus clair et moins sujet aux bugs. Cela réduit également la probabilité de référencer accidentellement des variables avant leur initialisation.

3. Organisez les déclarations de fonctions – Déclarez vos fonctions avant de les utiliser pour éviter de vous fier au comportement de levage.

Conclusion

Le levage est l'une des nombreuses bizarreries de JavaScript, mais comprendre son fonctionnement peut vous aider à écrire un code plus propre et moins sujet aux erreurs. N'oubliez pas que même si les déclarations de fonctions et les variables sont hissées, elles se comportent différemment. Tenez-vous-en à let et const sur var, et gardez votre code bien organisé pour éviter les surprises.

En prêtant attention au levage, vous pouvez rendre votre code JavaScript plus prévisible et plus facile à maintenir.