Pourquoi ma variable globale n'est-elle pas définie en JavaScript ?

Surpris qu'une variable globale ait une valeur non définie en JavaScript ?

Avez-vous déjà rencontré une situation dans laquelle une variable globale renvoie de manière inattendue une valeur non définie en JavaScript ? Considérez cet exemple déroutant :

var value = 10;

function test() {
    //A
    console.log(value);
    var value = 20;

    //B
    console.log(value);
}

test();

Le résultat de ce code en surprend beaucoup :

undefined
20

Pourquoi la variable globale n'est pas définie

Le La cause première de ce casse-tête réside dans un concept fondamental de JavaScript connu sous le nom de levage variable. Lorsque le moteur JavaScript interprète le code, il analyse initialement l'intégralité du bloc de code et « hisse » toutes les déclarations de variables vers le haut. Cependant, seules les déclarations sont levées, pas l'affectation.

Dans l'exemple ci-dessus, lorsque la fonction test est exécutée, la valeur de la variable globale n'est accessible à aucun moment. Au lieu de cela, une nouvelle valeur de variable locale est déclarée et attribuée. Cette variable locale masque la variable globale, ce qui entraîne une valeur non définie pour l'appel console.log(value) au point A.

Explication

Pour illustrer cela davantage, Réécrivons le code comme si le levage avait eu lieu :

// Variable declarations hoisted to the top of the function
var value = undefined;
var value = 20;

function test() {
    //A
    console.log(value);

    //B
    console.log(value);
}

Maintenant, il est clair pourquoi le premier appel console.log renvoie undefined. La valeur de la variable locale n'a pas encore été attribuée.

Un autre exemple

Pour souligner le concept de levage, considérons le code suivant :

var test = 'start';

function end() {
    test = 'end';
    var test = 'local';
}

end();
alert(test);

Ce code alerte sur la valeur « début », et non « fin » ou « local ». En effet, la variable test a été hissée au sommet de la fonction de fin, ombrageant ainsi la variable globale.

Les fonctions sont également hissées

Le levage s'applique non seulement aux variables, mais aussi aux fonctions. Le code suivant illustre ceci :

test("Won't work!");

test = function(text) { alert(text); }

Ce code génère une erreur de référence car lorsque test("Won't work!") est appelé, la variable de test a été déclarée mais la fonction n'a pas été affectée. Seule une syntaxe de déclaration de fonction appropriée garantit un levage complet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!