JavaScript Hoisting : ce que vous devez savoir

Si vous travaillez avec JavaScript depuis un certain temps, vous avez probablement entendu le terme « hisser ». En fait, pour les intervieweurs, c'est l'un des concepts sur lesquels ils aiment poser des questions car cela montre le niveau de compréhension du candidat en JavaScript. Cependant, que signifie exactement le levage et comment cela affecte-t-il votre code ? Dans cet article, je vais vous expliquer ce que vous devez savoir à ce sujet et ses impacts sur votre code.

Tout d'abord, regardons la signification linguistique de ce terme avant de parler de son utilisation technique. Le levage est simplement utilisé pour désigner l'acte de soulever ou de tirer quelque chose, généralement à l'aide de cordes ou de poulies. Vous entendrez des déclarations comme « elle a hissé son sac à dos sur son épaule », « hissez un drapeau », « la cargaison a été hissée dans le navire » , etc. D'autres mots pour le levage incluent le levage ou la montée.

En ce qui concerne JavaScript, le « levage » fait référence au comportement dans lequel l'interpréteur déplace automatiquement les déclarations de variables ou de fonctions vers le haut de leur portée contenante avant leur exécution. Cela signifie qu'avant qu'une variable ou une fonction ne soit déclarée dans votre code, vous pouvez toujours l'utiliser.

Par exemple, considérez le code suivant :

La ligne var x = 10 contient deux actions :

1. Déclaration des variables « var ».
2. Affectation variable "=".

Fait intéressant, il convient de noter que le levage n'affecte que les déclarations, pas les affectations ou les initialisations. Dans l'exemple ci-dessus, la valeur de x n'est pas définie lorsqu'elle est consignée dans la console car l'affectation à 10 n'a pas encore eu lieu.

Pour mieux comprendre cela, examinons comment ce comportement est présenté par les fonctions.

Dans l'exemple ci-dessus, vous remarquerez que même lorsque la fonction a été appelée avant d'être déclarée, le code fonctionnait toujours correctement et nous donnait l'expression correcte lors de la connexion. Que la fonction soit déclarée avant l'appel ou inversement, le comportement reste le même. L'interpréteur JavaScript a saisi la déclaration de la fonction et l'a placée en haut de la portée avant son exécution. C'est comme si le code ressemblait à ceci :

D'autre part, considérons comment le levage fonctionne avec une fonction anonyme ou une fonction affectée à une variable. Un exemple de ceci montré dans l'exemple ci-dessous:

Comme vous pouvez le voir, le code ci-dessus a généré une erreur. Le levage ne prend pas en charge l'affectation, ce qui est l'explication mentionnée précédemment pour expliquer pourquoi c'est le cas. Une expression connue sous le nom d'"expressions de fonction immédiatement appelées" est une approche innovante pour exécuter une fonction anonyme (IIFE en abrégé).

Tout aussi importants pour le comportement de l'hébergement dans les variables JavaScript sont les deux mots-clés "let" et "const", qui sont également utilisés pour la déclaration de variable comme "var". Contrairement à leurs homologues « var », la valeur d'une variable déclarée avec « let » ou « const » n'est pas hissée. Si vous essayez d'accéder à la valeur de l'un d'eux avant qu'il ne soit déclaré, vous obtiendrez une exception ReferenceError comme indiqué dans les images ci-dessous.

Lors de l'utilisation du levage, une erreur courante commise par de nombreux développeurs est de supposer que la valeur d'une variable est toujours initialisée à undefined. Cependant, cela n'est exact que pour les variables qui ont le mot-clé « var » dans leur déclaration. Toute tentative d'accès à une variable qui a été déclarée avec "let" ou "const" avant que l'affectation n'ait eu lieu entraînera une ReferenceError. Les meilleures pratiques de codage modernes conseillent fortement d'éviter l'utilisation de « var » au profit de « let » et « const », car elles offrent une meilleure protection contre les modifications involontaires ou accidentelles de vos variables.

En conclusion, le levage est un concept important en JavaScript qui peut avoir un impact important sur votre code. Assurez-vous de le garder à l'esprit lorsque vous écrivez et déboguez vos programmes pour éviter toute ambiguïté ou tout comportement inattendu qu'il apporte. Il est généralement recommandé de déclarer toutes vos variables en haut de votre portée. Cela rendra non seulement votre code plus facile à comprendre, mais aussi simple à maintenir.