Piège JavaScript no. 4

Pour moi, ce fût une grosse semaine au travail. Beaucoup de bidules à fignoler dans la programmation en vue d'une livraison en plus d'une révision des spécifications du cahier des charges à passer au peigne fin. Pour bien amorcer le weekend, je suis revenu chez moi, j'ai pris un comprimé d'aspirine et je suis prêt à voir avec vous le 4ème piège JavaScript. Après quoi, un repos sera bien mérité.

Ceux qui ont un peu d'expérience en programmation trouveront que ce piège est probablement le plus facile jusqu'à maintenant. En fait, c'est une question de logique et de portée des variables :

function b(x, y, a) {
   arguments[2] = 10;
   alert(a);
}
b(1, 2, 3);

Si on appelle la fonction b() avec 3 paramètres, qu'affichera l'alerte ? 10, 2 ou 3 ? Que représente arguments ? A-t-il un effet direct pour modifier la valeur de la variable a (troisième paramètre) ? Est-ce que arguments[2] représente la deuxième valeur, soit 2 ? Si c'est le cas, on assignerait 10 à la variable y et a resterait inchangé.

Réponse : alert(a) affichera 10.

Vous avez sûrement déjà vu dans du code "arguments.length" ? Dans ce contexte, le mot clé arguments est une variable qui existe automatiquement et qui fait référence à la liste des arguments reçus par la fonction, même s'ils n'étaient pas nommés explicitement (le concept existe dans de nombreux autres langages de programmation). En JavaScript, les arrays commencent à l'indice 0. Donc une liste d'une longueur de 2 éléments sera composée des indices 0 et 1.

function c(){
   for(var i=0 ; i<arguments.length ; i++){
       console.log(arguments[i]);
   }
}

c('Code', 18);

Dans l'exemple initial de la fonction b(), en modifiant la valeur à l'indice 2, on écrase la valeur passée en paramètre lors de l'appel. Parce que la variable est nommée localement, arguments[2] est une référence à la variable a.

On peut vérifier le tout avec une trace :

function b(x, y, a) {
   console.log(arguments); // [1, 2, 3]
   console.log(a); // 3
   console.log(arguments[2]); // 3
   arguments[2] = 10;
   alert(a); // 10
}
b(1, 2, 3);