Qu'insère le bloc JavaScript suivant dans la page HTML ?

var x = 9;
function test() {
    document.write(x);
    document.write("<br/>");
 
    var x = 10;
 
    document.write(x);
    document.write("<br/>");
}
test();
document.write(x);

Réponse :

undefined
10
9

Étonnant, non ?

Explication :

Le 9 final n'est pas très surprenant : la variable locale x déclarée dans test() masque la variable globale x. Nous avons donc deux variables x qui vivent leur vie indépendamment, et il est logique que la variable globale x conserve sa valeur tout au long de ce quiz, puisqu'on ne la modifie jamais après son initialisation.

Du coup, le 10 en second est tout aussi logique : c'est la valeur de la variable locale que l'on affiche ici.

Mais pourquoi le undefined ? Pourquoi pas 9 ?

En fait, JavaScript ne gère pas la portée des variables locales comme en C, en C++ ou en Java.

En particulier, lorsqu'une variable locale est déclarée avec var, elle existe dans toute la fonction dans laquelle elle est déclarée. Peu importe qu'elle soit déclarée au milieu du code : elle existe dès le début. Donc elle masque la variable globale dès le début de la fonction.

Par contre, JavaScript ne fait pas de différence entre initialisation et affectation d'une variable -- contrairement à C++, par exemple. Pour JavaScript, une initialisation n'est rien d'autre qu'une instruction d'affectation. Et cette instruction est exécutée là où le développeur l'a placée. Le code de la fonction test() ci-dessus est donc strictement équivalent à celui ci-dessous :

function test() {
    var x;
 
    document.write(x);
    document.write("<br/>");
 
    x = 10;
 
    document.write(x);
    document.write("<br/>");
}

Du coup, on est en droit de se demander quelle valeur x peut avoir entre sa déclaration et sa première affectation. En fait, JavaScript initialise systématiquement, et de manière automatique, toutes les variables à la valeur spéciale undefined au moment où elles sont déclarées. Et c'est bien cette valeur que l'on obtient dans le résultat du quiz !