Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation.
Le levage est un mécanisme JavaScript qui vous permet d'accéder aux variables et aux fonctions avant de les initialiser. Le fait de hisser une telle déclaration la place effectivement au sommet de sa portée.
Apprenez tout sur le fonctionnement du levage en JavaScript et comment le gérer au mieux pour éviter les erreurs dans votre code.
Variables de levage Avec var, let et const
Le levage est possible car JavaScript utilise le système de compilation JIT (Just-in-Time), qui analyse votre code pour identifier toutes les variables dans leurs portées respectives.
Le compilateur JIT hisse ensuite toutes les instances de déclarations de variables au sommet de leur portée lors de la compilation. JavaScript ne hisse que les déclarations de variables, pas leurs initialisations.
Le comportement des variables, lorsqu'elles sont hissées, dépend du mot-clé avec lequel vous les déclarez, car chaque mot-clé se comporte différemment.
var
Accéder à une variable non initialisée déclarée avec la var le mot-clé reviendra indéfini. Par exemple:
console.log (foo); // indéfini
var foo = 2;
Le code ci-dessus enregistre indéfini parce que ça appelle console.log avant d'initialiser la variable.
Le compilateur JavaScript visualise le bloc de code précédent comme suit :
var fou ;
console.log (foo); // indéfini
foo = 2 ;
Lors du levage, les variables obéissent aux règles de portée JavaScript. Javascript ne fera que hisser une variable au sommet de la portée dans laquelle vous l'avez déclarée. Tenter d'enregistrer la valeur d'une variable en dehors de sa portée déclarée entraînera un Erreur de référence. Par exemple, si vous déclarez une variable dans une fonction, elle ne sera pas visible en dehors de cette portée :
fonctionmaFonction() {
console.log (foo); // indéfini
var foo = 10;
}
maFonction();
console.log (foo); // ReferenceError: foo n'est pas défini
Essayer d'accéder à une variable en dehors de sa portée entraînera un Erreur de référence.
laisser et const
Selon le MDN documents sur laisser et constante levage, JavaScript hisse également les variables déclarées avec le laisser et constante mots clés. Cependant, contrairement aux variables déclarées avec le var mot-clé, ils ne sont pas initialisés avec un indéfini valeur.
Par exemple:
fonctionmaFonction() {
console.log (foo); // indéfini
console.log (barre); // ReferenceError: Impossible d'accéder à 'bar' avant l'initialisation
console.log (baz); // ReferenceError: Impossible d'accéder à 'baz' avant l'initialisationvar foo = 5;
laisser barre = 10;
constante baz = 15;
}
maFonction();
Vous ne pouvez pas accéder aux variables déclarées avec les mots clés let et const avant de les initialiser avec une valeur.
Fonctions de levage
JavaScript hisse les fonctions de la même manière que les variables. Comme pour les variables, cela dépend de la façon dont vous les déclarez. Par exemple, JavaScript hisse les déclarations de fonction différemment des expressions de fonction.
Une déclaration de fonction est une fonction déclarée avec un nom, tandis qu'une expression de fonction est une fonction dont vous pouvez omettre le nom. Par exemple:
fonctionfou() {
// déclaration de fonction
}
constante barre = () => {
// expression de la fonction
}
JavaScript hisse les déclarations de fonction mais pas les expressions de fonction. Par exemple:
truc(); // 5
bar(); // TypeError: bar() n'est pas une fonction// Déclaration de fonction
fonctionfou() {
console.enregistrer(5);
}
// Expression de fonction
var barre = fonctionexpression() {
console.enregistrer(10);
};
Ce code appelle fou avant de le déclarer et de l'initialiser en tant que fonction, mais il se connecte toujours 5 à la console. Cependant, essayer d'appeler bar aboutit à une Erreur-type.
Gérer le levage
Être conscient du levage et des erreurs potentielles qui pourraient survenir s'il est mal géré peut vous faire économiser de longues heures de débogage. Voici quelques façons de gérer le levage.
Déclarer des variables à l'intérieur des fonctions
Déclarez des variables à l'intérieur des fonctions qui y accéderont. Vous ne pourrez pas toujours le faire, car vous aurez peut-être besoin d'une variable globale à laquelle vous pouvez accéder dans plusieurs fonctions. Assurez-vous donc de ne déclarer les variables globalement que si vous en avez vraiment besoin.
Déclarer des variables avec let ou const
Vous devez toujours utiliser le let et Cd'abord mots-clés à la place des var mot clé lors de la déclaration des variables. Cette pratique est bénéfique lors de la déclaration de variables locales à l'intérieur d'une fonction. Connaître les bonnes manières de déclarer des variables en JavaScript réduit les risques d'erreurs causées par le levage dans votre code.
Déclarez les variables au sommet de leur portée
Déclarez toutes vos variables en haut de leurs portées respectives, avant toute autre instruction. Cela garantira que le compilateur JavaScript n'aura pas à hisser ces variables pour y accéder.
Utilisation du mode strict
Le mode strict est un mode JavaScript qui régule la mauvaise syntaxe, optimise le temps d'exécution de votre code et interdit l'abus de la syntaxe peu typée de JavaScript en lançant des erreurs au moment de la compilation.
Par exemple, en « mode bâclé », en raison du levage, vous pouvez accéder à une variable en dehors de la fonction initialisée, même si elle n'a pas été déclarée :
maFonction();
console.log (foo); // 20
fonctionmaFonction() {
toto = 20;
}
Dans le bloc de code ci-dessus, JavaScript déclare automatiquement fou et le hisse au sommet de la portée globale, en ignorant la portée dans laquelle vous l'avez initialisé.
Vous pouvez utiliser le mode strict pour corriger ce comportement et générer une erreur si vous essayez d'accéder à la variable en dehors de sa portée de fonction.
Le mode strict n'arrête pas complètement le levage. Au lieu de cela, il empêche les formes de levage les plus déroutantes et les plus sujettes aux erreurs. Il est toujours important de comprendre le concept général et les règles de levage, même en utilisant le filet de sécurité en mode strict.
Pour activer le mode strict au niveau global, déclarez la syntaxe en haut de votre fichier de script :
"utiliserstrict"; // ou 'utiliserstrict'
Pour activer le mode strict au niveau d'une fonction, déclarez la syntaxe en haut du corps d'une fonction avant toute instruction :
fonctionmaFonctionStrict() {
"utiliserstrict";
}
Si vous déclarez le mode strict au niveau d'une fonction, le paramètre ne s'appliquera qu'aux instructions à l'intérieur de cette fonction.
Déclarer le mode strict au niveau global empêche l'accès aux variables en dehors de leurs portées respectives :
"utiliserstrict";
maFonction();
console.log (foo); // ReferenceError: foo n'est pas défini
fonctionmaFonction() {
toto = 20;
}
Avec le mode strict activé, le compilateur JavaScript lèvera maFonction() au sommet de sa portée sans la variable non déclarée.
Comprendre ce qui affecte le levage
Le levage est assez unique à JavaScript et peut être un comportement très déroutant à comprendre. Cela peut affecter les variables et les fonctions, mais il existe des moyens de l'empêcher si vous en avez besoin.
Plusieurs facteurs peuvent affecter le levage, il est donc préférable d'éviter toute occurrence de levage de variable ou de fonction dans votre code.