Logo JavaScript

5 façons de tester une variable en Javascript

Flattr this!

 

Méthode #1 : typeof + déclaration de variable

if (typeof MyApp == 'undefined') {
  var MyApp = { };
}

Ceci est sûrement la variante la plus populaire. Une bonne vieille déclaration de variable et un contrôle typeof. Lorsqu'exécuté comme programme principal, cela va créer une variable globale et une référence pointant vers celle-ci. Ce qu'il est important de comprendre ici, c'est que la déclaration de la variable MyApp suit ici le comportement dit "hoisting". C'est à dire qu'étant donné que MyApp est déclarée avant toute exécution de code, celle-ci est alors considérée comme faisant partie du contexte parent. Le code précédent est donc totalement équivalent à celui-ci :

var MyApp;
...
if (typeof MyApp == 'undefined') {
  MyApp = { };
}

Du coup MyApp est déjà défini est donc le test ne sera pas vérifié et MyApp pas réinitialisée. Cependant, si MyApp n'est pas encore défini typeof MyApp va effectivement retourner 'undefined'. MyApp est une référence vers un objet fraîchement créé. La raison pourquoi il ne contrôle pas "null" mais "undefined" est tout simplement qu'à ce moment, MyApp n'est pas encore redéfini comme un objet.

Méthode #2 : Conversion booléenne + déclaration de variable

if (!MyApp) {
  var MyApp = { };
}

Une autre façon très courante et aussi très proche de la précédente. La différence réside dans le retrait de typeof au profit d'une conversion vers un booléen. Cela simplifie le code mais n'est pas forcément un critère de confiance. En ajoutant avant votre déclaration la déclaration de la variable, vous éliminez le déclenchement d'une ReferenceError :

var MyApp;
if (!MyApp) {
  MyApp = { };
}

Votre variable existe et initialisée.

Méthode #3 : Conversion booléenne + assignation dynamique

if (!MyApp) {
  MyApp = { };
}

On repart sur l'exemple de départ de la méthode précédente.

Avec ECMAscript, quand quelque chose est assignée à une variable non-existante, une variable globale de ce nom est créée et est donc disponible pour tout code.

Attention, var MyApp = { }; et MyApp = { }; sont fondamentalement différents. Le premier va créer une variable locale quand le second va créer une variable globale.

Historiquement, cette méthode d'assignation dynamique est une mauvaise pratique. Cela amène une certaine confusion et peut aisément provoquer des collisions. En plus des risques de bogues du côté de l'interpréteur, notamment sur certaines versions d'Internet Explorer qui utilisaient MSHTML DOM. Ne jamais utiliser cette méthode évitera aussi qu'un développeur débutant "oublie" le mot clé var ou pense que ce soit juste la même chose.

Depuis la version 5 d'ECMAscript, celle-ci spécifie qu'en mode strict, les assignations dynamiques doivent lever une ReferrenceError.

Méthode #4 : typeof + assignation dynamique

if (typeof MyApp == 'undefined') {
   MyApp = { };
}

Je vous avais déjà parlé dans mon billet sur les 13 erreurs les plus courantes en Javascript (cf. point 13).

Dans ECMAscript, quand typeof reçoit une variable inexistante, il est défini qu'il doit renvoyer la chaîne "undefined". Pas de risque de renvoi d'erreur.

Reste le problème que vous utilisez l'assignation dynamique (cf. point précédent). Donc on oublie.

Méthode #5 : == null et === undefined

La vérification par typeof peut être remplacée par une comparaison directe avec undefined ou null.

if (MyApp === undefined) {
   var MyApp = { };
}

if (MyApp == null) {
   var MyApp = { };
}

Dans le cas du second exemple, la comparaison avec null renvoie true si on teste avec une variable null ou undefined.

Remplacer la comparaison typeof par comparaison stricte avec undefined est certes plus court mais moins rigoureux.

Comparer avec null est propre et sécurisé mais vous pouvez faire plus simple : (!MyApp), cf. méthode 2.

Conclusion

Vous l'aurez compris, il y a différentes façons de travailler avec des variables en Javascript, elles sont toutes utilisées par les développeurs. Certaines à tort, d'autres à raisons. L'essentiel à retenir ici est que vous devez rester toujours rigoureux. Javascript contrairement à la croyance populaire n'est pas un langage qui permet l'allocation dynamique, il le tolère, parfois.

Restez en donc à la méthode 2 corrigée, elle est efficace, fonctionne tout le temps et partout. En plus d'être propre et maintenable.

[Source]

Flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans JavaScript, avec comme mot(s)-clef(s) , , , , . Vous pouvez la mettre en favoris avec ce permalien.

Articles liés