Piège JavaScript no. 3

Avec ce qu'on a vu jusqu'à maintenant, ce troisième piège JavaScript me semble déjà plus facile à résoudre. Lors du dernier exercice (piège JavaScript no. 2), on a vu qu'une variable et une fonction pouvaient porter le même nom si elles n'étaient pas dans la même portée. Or ici, une fonction a() est définie, suivie d'une déclaration de variable du même nom (dans la même portée).

function a(x) {
   return x * 2;
}
var a;
alert(a);

Si vous avez répondu que alert(a) afficherait undefined, vous êtes tombé dans le piège.

Réponse : alert(a) affichera la définition de la fonction a.

Ici, ce n'est pas une question de priorité dans l'ordre des déclarations. Si on déplace "var a" avant la définition de la fonction, le résultat sera le même. JavaScript semble avoir la particularité de prioriser la fonction à la variable si les deux possèdent un nom identique.

Dès qu'on assigne une valeur à la variable a, on remarque que la fonction a est écrasée, ce qui rend la fonction totalement inutilisable.

console.log(typeof a); // function
console.log(a(2)); // 4
var a = 1;
console.log(typeof a); // number
console.log(a); // 1
console.log(a(2)); // a is not a function

Pour éviter ce type de conflit, on peut assigner la fonction à une variable avant de lui assigner une autre valeur (var fct = a; fct(2); a = 1;) ou encore utiliser une convention de notation qui vous permettra de distinguer les fonctions des variables.