Pourquoi les variables globales donnent des valeurs indéfinies en JavaScript

JavaScript est l’un des langages de programmation les plus anciens. Puisqu’il est compilé et exécuté par le navigateur, son fonctionnement est quelque peu différent des langages de niveau système comme C ou Java.

Le comportement du langage de programmation JavaScript peut être un peu bizarre pour de nombreux programmeurs débutants. Pour comprendre complètement le langage JavaScript, vous devez bien comprendre divers concepts de ce langage, tels que la boucle d’événements, le bouillonnement et la capture, la pile d’appels et bien d’autres.

Dans cet article, nous allons découvrir un tel concept du langage de programmation JavaScript appelé levage. Avant d’expliquer pourquoi les variables globales donnent des valeurs undefined, commençons par comprendre le concept de levage en JavaScript.

Concept de levage et pourquoi les variables globales donnent des valeurs undefined en JavaScript

L’hébergement est un concept en JavaScript où toutes les déclarations de variables présentes dans le code JavaScript sont extraites et affectées d’une valeur undefined lors de la compilation. De même, toutes les déclarations de fonction à l’intérieur de JavaScript sont extraites et stockées dans la portée globale.

C’est ce qu’on appelle le levage variable. Ceci indépendamment du fait que la portée de la variable ou de la fonction soit locale ou globale.

Voyons maintenant comment fonctionne le concept d’hébergement en JavaScript et comment il attribue des valeurs undefined aux variables en JavaScript. Dans l’exemple de code ci-dessous, nous avons défini une variable globale appelée abc et une fonction a().

let abc;
function a() {
  console.log('This is a function...');
}
console.log(abc);
debugger
abc = 5;
console.log(abc);

Production:

undefined
5

Ici, avez-vous remarqué que vous pouvez utiliser la variable abc avant même qu’elle ne soit initialisée ? Vous êtes-vous déjà demandé comment cela est possible ?

Cette chose n’est pas autorisée dans les autres langages de programmation. La raison pour laquelle cela se produit est à cause du levage.

Le code ci-dessus représente la première instruction de la console. Ici, l’ajout d’un débogueur est important pour voir l’état des variables dans les outils de développement Chrome.

Après avoir scanné le code JavaScript, le compilateur JavaScript scanne toutes les variables et fonctions, les ajoute à la portée globale et affecte undefined à la variable abc.

Ensuite, le moteur JavaScript commence à exécuter le code ligne par ligne, et dès qu’il trouve la variable abc, on lui attribue une valeur, dans ce cas, 5. Il affectera 5 à la variable abc dans la portée globale.

La sortie ci-dessous représente la deuxième instruction de la console après que la variable ait reçu la valeur 5.

C’est ainsi que fonctionne le concept de variables et de levage de fonction. Et c’est la raison réelle pour laquelle les variables globales en JavaScript donnent la valeur undefined.