Explication de l'affectation des variables JavaScript OU (||)

Compte tenu de cet extrait de JavaScript ...

var a;
var b = null;
var c = undefined;
var d = 4;
var e = 'five';

var f = a || b || c || d || e;

alert(f); // 4

Quelqu'un peut-il m'expliquer comment s'appelle cette technique (ma meilleure estimation se trouve dans le titre de cette question!)? Et comment / pourquoi ça marche exactement?

Ma compréhension est que la variable se fverra attribuer la valeur la plus proche (de gauche à droite) de la première variable qui a une valeur qui n'est ni nulle ni indéfinie, mais je n'ai pas réussi à trouver beaucoup de matériel de référence sur cette technique et à avoir vu qu'il a utilisé beaucoup.

De plus, cette technique est-elle spécifique à JavaScript? Je sais que faire quelque chose de similaire en PHP aurait pour résultat d' favoir une vraie valeur booléenne, plutôt que la valeur d' delle - même.

Voir l' évaluation des courts-circuits pour l'explication. C'est une façon courante de mettre en œuvre ces opérateurs; il n'est pas propre à JavaScript.

Ceci est fait pour assigner une valeur par défaut , dans ce cas la valeur de y, si la xvariable est fausse .

Les opérateurs booléens en JavaScript peuvent renvoyer un opérande, et pas toujours un résultat booléen comme dans d'autres langues.

L'opérateur OU logique ( ||) renvoie la valeur de son deuxième opérande, si le premier est faux, sinon la valeur du premier opérande est renvoyée.

Par exemple:

"foo" || "bar"; // returns "foo"
false || "bar"; // returns "bar"

Falsy valeurs sont celles qui contraignent à falsequand il est utilisé dans le contexte booléen, et ils sont 0, null, undefined, une chaîne vide, NaNet bien sûr false.

Javacript utilise l'évaluation des courts-circuits pour les opérateurs logiques ||et &&. Cependant, il est différent des autres langages en ce qu'il retourne le résultat de la dernière valeur qui a interrompu l'exécution, au lieu d'une valeur trueou false.

Les valeurs suivantes sont considérées comme fausses en JavaScript.

• faux
• nul
• "" (chaîne vide)
• 0
• Nan
• indéfini

En ignorant les règles de priorité des opérateurs et en gardant les choses simples, les exemples suivants montrent quelle valeur a interrompu l'évaluation et est retournée en conséquence.

false || null || "" || 0 || NaN || "Hello" || undefined // "Hello"

Les 5 premières valeurs jusqu'à NaNsont fausses donc elles sont toutes évaluées de gauche à droite, jusqu'à ce qu'elle rencontre la première valeur véridique - "Hello"ce qui rend toute l'expression vraie, donc tout ce qui est plus haut ne sera pas évalué et sera "Hello"renvoyé à la suite de l'expression . De même, dans ce cas:

1 && [] && {} && true && "World" && null && 2010 // null

Les 5 premières valeurs sont toutes véridiques et sont évaluées jusqu'à ce qu'elles rencontrent la première valeur falsifiée ( null), ce qui rend l'expression fausse, elle 2010n'est donc plus évaluée et nullest renvoyée à la suite de l'expression.

L'exemple que vous avez donné utilise cette propriété de JavaScript pour effectuer une affectation. Il peut être utilisé partout où vous avez besoin d'obtenir la première valeur véridique ou fausse parmi un ensemble de valeurs. Ce code ci-dessous attribuera la valeur "Hello"à bcar il facilite l'attribution d'une valeur par défaut, au lieu de faire des vérifications if-else.

var a = false;
var b = a || "Hello";

Vous pouvez appeler l'exemple ci-dessous une exploitation de cette fonctionnalité, et je pense que cela rend le code plus difficile à lire.

var messages = 0;
var newMessagesText = "You have " + messages + " messages.";
var noNewMessagesText = "Sorry, you have no new messages.";
alert((messages && newMessagesText) || noNewMessagesText);

À l'intérieur de l'alerte, nous vérifions si messagesc'est faux, et si oui, évaluons et retournons noNewMessagesText, sinon évaluons et retournons newMessagesText. Comme c'est faux dans cet exemple, nous nous arrêtons à noNewMessagesText et alertons "Sorry, you have no new messages.".

Les variables Javascript ne sont pas typées, donc f peut se voir attribuer une valeur entière même si elle a été attribuée via des opérateurs booléens.

f reçoit la valeur la plus proche qui n'est pas équivalente à false . Donc 0, faux, null, non défini, sont tous passés:

alert(null || undefined || false || '' || 0 || 4 || 'bar'); // alerts '4'

Il n'y a pas de magie. Les expressions booléennes comme a || b || c || dsont paresseusement évaluées. Interpeter recherche la valeur de a, elle n'est pas définie, elle est donc fausse alors elle bcontinue , puis elle voit ce qui est nul, ce qui donne toujours un résultat faux alors elle continue, puis elle voit c- même histoire. Enfin, il voit det dit «hein, ce n'est pas nul, j'ai donc mon résultat» et il l'assigne à la variable finale.

Cette astuce fonctionnera dans tous les langages dynamiques qui effectuent une évaluation par court-circuit paresseux des expressions booléennes. Dans les langages statiques, il ne se compile pas (erreur de type). Dans les langages désireux d'évaluer des expressions booléennes, il retournera une valeur logique (c'est-à-dire vrai dans ce cas).

Cette question a déjà reçu plusieurs bonnes réponses.

En résumé, cette technique tire parti d'une caractéristique de la façon dont le langage est compilé. Autrement dit, JavaScript «court-circuite» l'évaluation des opérateurs booléens et renvoie la valeur associée à la première valeur de variable non fausse ou à ce que contient la dernière variable. Voir l'explication d'Anurag de ces valeurs qui seront évaluées comme fausses.

L'utilisation de cette technique n'est pas une bonne pratique pour plusieurs raisons; toutefois.

1. Lisibilité du code: cela utilise des opérateurs booléens, et si le comportement de la façon dont cela se compile n'est pas compris, le résultat attendu serait une valeur booléenne.
2. Stabilité: cela utilise une fonctionnalité de compilation du langage qui n'est pas cohérente dans plusieurs langues, et pour cette raison, c'est quelque chose qui pourrait potentiellement être ciblé pour un changement à l'avenir.

3. Fonctionnalités documentées: Il existe une alternative existante qui répond à ce besoin et est cohérente dans plusieurs langues. Ce serait l'opérateur ternaire:

   ()? valeur 1: valeur 2.

L'utilisation de l'opérateur ternaire nécessite un peu plus de frappe, mais il distingue clairement entre l'expression booléenne évaluée et la valeur attribuée. De plus, il peut être chaîné, de sorte que les types d'affectations par défaut exécutées ci-dessus pourraient être recréés.

var a;
var b = null;
var c = undefined;
var d = 4;
var e = 'five';

var f =  ( a ) ? a : 
                ( b ) ? b :
                       ( c ) ? c :
                              ( d ) ? d :
                                      e;

alert(f); // 4

Renvoie la première valeur vraie de la sortie .

Si tous sont faux, retournez la dernière fausse valeur.

Exemple:-

  null || undefined || false || 0 || 'apple'  // Return apple

Il définit la nouvelle variable ( z) à la valeur de xsi elle est "véridique" (non nulle, un objet / tableau / fonction valide / quoi que ce soit) ou yautre. C'est une façon relativement courante de fournir une valeur par défaut au cas où il xn'existe pas.

Par exemple, si vous avez une fonction qui prend un paramètre de rappel facultatif, vous pouvez fournir un rappel par défaut qui ne fait rien:

function doSomething(data, callback) {
    callback = callback || function() {};
    // do stuff with data
    callback(); // callback will always exist
}

Cela signifie que si xest défini, la valeur de zsera x, sinon si yest défini, sa valeur sera définie comme la zvaleur de.

c'est la même chose que

if(x)
  z = x;
else
  z = y;

C'est possible parce que les opérateurs logiques en JavaScript ne renvoient pas de valeurs booléennes mais la valeur du dernier élément nécessaire pour terminer l'opération (dans une phrase OU ce serait la première valeur non fausse, dans une phrase ET ce serait la dernière ). Si l'opération échoue, elle falseest renvoyée.

Son appelé opérateur de court-circuit.

L'évaluation de court-circuit indique que le deuxième argument n'est exécuté ou évalué que si le premier argument ne suffit pas pour déterminer la valeur de l'expression. lorsque le premier argument de la fonction OR (||) est évalué à vrai, la valeur globale doit être vraie.

Il pourrait également être utilisé pour définir une valeur par défaut pour l'argument de la fonction. »

function theSameOldFoo(name){ 
  name = name || 'Bar' ;
  console.log("My best friend's name is " + name);
}
theSameOldFoo();  // My best friend's name is Bar
theSameOldFoo('Bhaskar');  // My best friend's name is Bhaskar`

Il évaluera X et, si X n'est pas nul, la chaîne vide ou 0 (faux logique), il l'affectera à z. Si X est nul, la chaîne vide ou 0 (faux logique), alors il attribuera y à z.

var x = '';
var y = 'bob';
var z = x || y;
alert(z);

Sortira «bob»;

Selon le blog de Bill Higgins ; l'idiome d'affectation OU logique Javascript (février 2007), ce comportement est vrai à partir de la version 1.2 (au moins)

Il suggère également une autre utilisation (citée): " normalisation légère des différences entre navigateurs "

// determine upon which element a Javascript event (e) occurred
var target = /*w3c*/ e.target || /*IE*/ e.srcElement;