Explication de l'affectation des variables OR (||) en JavaScript

Question

Étant donné ce bout 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 supposition est dans le titre de cette question !)? Et comment/pourquoi elle fonctionne exactement ?

Si je comprends bien, la variable f se verra attribuer la valeur la plus proche (de gauche à droite) de la première variable dont la valeur 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 je l'ai vue utilisée à plusieurs reprises.

Par ailleurs, cette technique est-elle spécifique à JavaScript ? Je sais que si l'on fait quelque chose de similaire en PHP, on obtient les résultats suivants f ayant une valeur booléenne vraie, plutôt qu'une valeur de d lui-même.

Answer 1

Véase évaluation des courts-circuits pour l'explication. C'est une façon courante d'implémenter ces opérateurs ; elle n'est pas propre à JavaScript.

Answer 2

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 par des opérateurs booléens.

f se voit attribuer la valeur la plus proche qui est non équivalent à faux . Ainsi, 0, false, null, undefined, sont tous transmis :

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

Answer 3

Il n'y a pas de magie. Les expressions booléennes comme a || b || c || d sont évalués paresseusement. Interpeter recherche la valeur de a c'est indéfini donc c'est faux donc il passe à autre chose, puis il voit b qui est nulle, ce qui donne toujours un faux résultat, donc il continue, puis il voit c - même histoire. Finalement, il voit d et dit 'huh, ce n'est pas nul, donc j'ai mon résultat' et il l'assigne à la variable finale.

Cette astuce fonctionnera dans tous les langages dynamiques qui font une évaluation paresseuse en circuit court des expressions booléennes. Dans les langages statiques, elle ne compilera pas (erreur de type). Dans les langages qui sont avides d'évaluer les expressions booléennes, elle retournera une valeur logique (i.e. true dans ce cas).

Answer 4

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é. En effet, 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 sur les valeurs qui seront évaluées comme fausses.

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

1. Lisibilité du code : Ceci utilise des opérateurs booléens, et si le comportement de la compilation n'est pas compris, le résultat attendu sera une valeur booléenne.

2. Stabilité : Il s'agit de l'utilisation d'une caractéristique de la façon dont le langage est compilé qui est incohérente dans plusieurs langues, et pour cette raison, c'est quelque chose qui pourrait potentiellement être ciblé pour un changement à l'avenir.

3. Caractéristiques documentées : Il existe une alternative qui répond à ce besoin et qui est cohérente dans un plus grand nombre de langues. Il s'agit de l'opérateur ternaire :

   () ? valeur 1 : valeur 2.

L'utilisation de l'opérateur ternaire nécessite un peu plus de saisie, mais il fait clairement la distinction entre l'expression booléenne évaluée et la valeur attribuée. En outre, il peut être enchaîné, ce qui permet de recréer les types d'affectations par défaut effectuées ci-dessus.

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

Answer 5

Sortie de retour première valeur vraie .

Si toutes les valeurs sont fausses, la dernière valeur fausse est retournée.

Exemple:-

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