Que signifie "var FOO = FOO || {}" (assigner une variable ou un objet vide à cette variable) en Javascript ?

Question

En regardant un code source en ligne, j'ai trouvé ceci en haut de plusieurs fichiers source.

var FOO = FOO || {};
FOO.Bar = …;

Mais je n'ai aucune idée de ce que || {} fait.

Je sais {} est égal à new Object() et je pense que le || est pour quelque chose comme "s'il existe déjà, utilisez sa valeur, sinon utilisez le nouvel objet".

Pourquoi est-ce que je verrais ça en haut d'un fichier source ?

Answer 1

Votre avis sur l'intention de || {} est assez proche.

Ce modèle particulier, lorsqu'il est vu en haut des fichiers, est utilisé pour créer un espace de noms c'est-à-dire un objet nommé sous lequel on peut créer des fonctions et des variables sans polluer indûment l'objet global.

La raison pourquoi il est utilisé de sorte que si vous avez deux (ou plus) fichiers :

var MY_NAMESPACE = MY_NAMESPACE || {};
MY_NAMESPACE.func1 = {
}

et

var MY_NAMESPACE = MY_NAMESPACE || {};
MY_NAMESPACE.func2 = {
}

qui partagent tous deux le même espace de noms, l'ordre dans lequel les deux fichiers sont chargés n'a pas d'importance, vous obtenez toujours func1 et func2 correctement définis dans le cadre de l MY_NAMESPACE correctement.

Le premier fichier chargé sera créer l'initiale MY_NAMESPACE et tout fichier chargé ultérieurement sera augmenter l'objet.

De manière utile, cela permet également asynchrone chargement des scripts qui partagent le même espace de noms, ce qui peut améliorer les temps de chargement des pages. Si le <script> Les balises ont l'attribut defer vous ne pouvez pas savoir dans quel ordre ils seront interprétés, donc comme décrit ci-dessus, cela résout également ce problème.

Answer 2

var AEROTWIST = AEROTWIST || {};

En gros, cette ligne dit de définir le AEROTWIST à la valeur de la variable AEROTWIST ou la définir comme un objet vide.

Le double tuyau || est une instruction OU, et la deuxième partie de l'instruction OU n'est exécutée que si la première partie renvoie un résultat faux.

Par conséquent, si AEROTWIST a déjà une valeur, il sera conservé comme cette valeur, mais s'il n'a pas été défini auparavant, il sera défini comme un objet vide.

c'est à peu près la même chose que de dire ça :

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

J'espère que cela vous aidera.

Answer 3

Une autre utilisation courante de || est de définir une valeur par défaut pour un paramètre de fonction non défini également :

function display(a) {
  a = a || 'default'; // here we set the default value of a to be 'default'
  console.log(a);
}

// we call display without providing a parameter
display(); // this will log 'default'
display('test'); // this will log 'test' to the console

L'équivalent dans d'autres programmes est habituellement :

function display(a = 'default') {
  // ...
}

Answer 4

S'il n'y a pas de valeur dans AEROTWIST ou si elle est nulle ou indéfinie, la valeur assignée au nouvel AEROTWIST sera {} (un objet vide).

Answer 5

En || prend deux valeurs :

a || b

Si a est véridique il retournera a . Sinon, il renvoie b .

Les valeurs fausses sont null , undefined , 0 , "" , NaN et false . Les valeurs de vérité sont tout le reste.

Donc si a n'a pas été défini (est-ce undefined ), il retournera b .