Quelques pièges JavaScript

Après avoir effectué le quiz JavaScript avancé puis avoir obtenu un pointage lamentable de 3 sur 14, je me suis résolu à ravaler ma fierté et à essayer de comprendre un par un les pièges où j'étais tombé.

Mais tout d'abord, j'ai mis au banc d'essai les 5 attrapes proposées originalement par Dmitry Baranovskiy que je tenterai de décortiquer. Pour aujourd'hui, voyons la première attrape. À première vue, elle semble si simple...

Piège JavaScript # 1

if (!("a" in window)) {
   var a = 1;
}
alert(a);

Qu'est-ce qui sera affiché ? Si on y réfléchit un peu :

• Dans la condition, est-ce que "a" représente une chaîne de caractères ou correspond à la variable a ?
• On vérifie si a n'est pas déclarée à l'intérieur de l'objet fenêtre (window) à l'aide de l'opérateur in et de la négation ! mais on y fait référence pour la première fois qu'à la ligne suivante avec la déclaration et l'assignation d'une valeur
  
• Si var a = 1 est dans le if, la variable existe-t-elle au niveau de l'objet window au moment d'évaluer la condition if ?
  

Réponse : alert(a) affiche undefined.

Êtes-vous surpris de constater que la valeur de a soit indéfinie dans l'objet window ? Si on affiche la trace de l'objet dans la console de Firebug :

console.log(typeof window);
console.log(window);

La première ligne affiche le type "Object". La deuxième détaille les propriétés de l'objet window. On voit que la propriété a existe et fait partie de window mais qu'elle n'est pas initialisée (sa valeur est undefined).



Comment l'interpréteur JavaScript connaît globalement toutes les variables déclarées dans sa portée avant d'exécuter le code séquentiellement ? Ou bien est-ce dû à l'extension Firebug qui est lancée par la suite qui analyse le code ? Avec l'exemple suivant, l'impression du contenu de window indique bien l'existence de b et c qui apparaissent pourtant après l'appel. Leurs valeurs respectives sont aussi affichées correctement.

console.log(window);
var b = 1;
c = 2;

Par contre, si j'essaie cet autre test, un curieux comportement se produit. La première alerte (b) retoure "true" alors que la deuxième qui n'est pas déclarée par var (c) affiche false.

alert("b" in window); // true
alert("c" in window); // false

var b = 1;
c = 2;

// b et c s'affichent pourtant dans la portée de window!
console.log(window);

La différence ici est que b est une déclaration de variable dans sa portée courante qui crée du même coup une propriété à l'objet window alors que pour c, il s'agit d'une assignation de valeur à une propriété de l'objet global window. C'est pour cette raison que c ne fait pas parti de window en tant que variable mais bien en tant que propriété. Étrange différence, non ?

Si vous êtes dans une fonction, "var" créera une variable locale tandis que le fait d'omettre var cherchera à remonter la chaîne de portée jusqu'à ce qu'il trouve la variable ou frappe la portée globale (où il finira par la créer). C'est le concept des closures.

Pour mieux comprendre ce qui se passe, l'explication la plus complète se trouve sur ce billet de StackOverflow : Difference between using var and not using var in JavaScript. Dans le piège initial, retirez var dans le if pour que la condition devienne positive et l'alerte affichera 1.