JavaScript : Les opérateurs logiques && et || séquentiels

#1 Ce qui est commun au && et au || open

Ces deux opérateurs sont des opérateurs logiques, ça veut dire qu'ils font des opérations sur des booléens. Par contre, les opérandes sont soit de vrais booléens, soit des valeurs qui ont un équivalent booléen. Ce qu'il faut savoir, c'est que dans tous les cas, c'est l'opérande qui est retourné. Ce n'est pas son équivalent booléen.

On va regarder les opérandes les plus courants et leur équivalent booléen.

Vous rencontrerez probablement l'anglicisme falsy pour désigner les valeurs qui sont équivalentes à un booléen qui vaut false. De même que vous rencontrerez truthy pour désigner celles qui sont équivalentes à un booléen qui vaut true.

Valeurs équivalentes à false (falsy)
un number qui vaut 0
une chaîne de caractère vide
undefined
null
NaN
Valeurs équivalentes à true (truthy)
number différent de 0
+Infinity ou -Infinity
chaîne de caractères différentes de la chaîne vide
objet
fonction

#2 Le && (ET logique séquentiel) comment ça marche ? open

Principe pour évaluer un &&
Principe pour évaluer un && logique séquentiel
Exemples d'évaluation de &&
Exemples d'évaluation d'un && logique séquentiel

Pour bien comprendre comment fonctionne le && on va faire une table de vérité. La table de vérité d'un ET logique séquentiel && c'est la même table de vérité que celle d'un ET en logique. On verra plus tard pourquoi j'ai précisé séquentiel.

Si on considère que C1,C2 et C3 sont des variables booléennes. Pour que le résultat de C1 && C2 && C3 soit true, il faut que toutes les variables soient true. Il suffit donc qu'une seule variable soit false pour que le résultat, soit false. La conséquence, c'est que dès que le moteur JavaScript trouve une variable qui est false, le résultat est attribué immédiatement, car il n'est pas utile de continuer à évaluer les variables qui restent. Les opérandes sont donc évalués en séquence, les uns après les autres, et on s'arrête, dès que l'on connaît le résultat. C'est par rapport à cette manière de fonctionner que l'on parle de ET logique, en ajoutant le séquentiel derrière. En fait, c'est plutôt en C que l'on utilise cette terminologie, mais je ne vois pas de raison de s'interdire de l'utiliser pour le JavaScript.

C1, C2, C3 sont des variables booléennes.
Résultat = C1 && C2 && C3.
C1 C2 C3 Résultat
false false false false
false false true false
false true false false
false true true false
true false false false
true false true false
true true false false
true true true true

#3 Tester si un objet existe avec un && avant d'y accéder open

Il y a une situation qui se présente fréquemment qui est celle où on récupère un objet dans l'arbre DOM pour accéder à une de ses propriétés. Le problème vient du fait, que pour diverses raisons, il peut y avoir un échec au moment de la récupération de l'objet dans l'arbre DOM. Dans le cas où il y a échec, par exemple, d'un getElementById ce dernier retourne la valeur null. Dans ce cas, si l'on cherche à accéder à une propriété en pensant qu'on a récupéré l'objet correctement, eh bien, on va déclencher une exception typeError. Pour éviter ce type d'erreurs, on va utiliser un ET logique séquentiel.

On va faire un exemple, supposons que j'essaie d'accéder à un élément par son id, mais que cet élément, pour une raison ou pour une autre, n'existe plus.

Si je ne mets pas de protection sur le console.log je vais déclencher une exception typeError.

Tester le code
Tester avant d'accéder à une propriété

Si je mets une protection en utilisant un ET logique séquentiel, eh bien, je ne la déclenche pas.

Tester le code
Tester avant d'accéder à une propriété

Notez bien que si la valeur de elt.textContent doit être retournée, elle le sera quelle que soit sa valeur booléenne. Si c'est une chaîne vide évaluée à false, elle sera retournée en tant que première valeur évaluée à false. S'il y a un contenu textuel évalué à true, eh bien, il sera retourné en tant que dernière valeur évaluée à true.

#4 Le || (OU logique séquentiel) comment ça marche ? open

Principe pour évaluer un ||
Principe pour évaluer un || (OU logique séquentiel)
Exemples d'évaluation de ||
Exemples d'évaluation d'un || (OU logique séquentiel)

Pour bien comprendre comment fonctionne le || on va faire une table de vérité. Ici, c'est la table de vérité d'un OU en logique.

Si on considère que C1,C2 et C3 sont des variables booléennes. Pour que le résultat de C1 || C2 || C3 soit false, il faut que toutes les variables soient false. Il suffit donc qu'une variable soit true pour que le résultat soit true. La conséquence, c'est que dès que le moteur JavaScript trouve une variable qui est true le résultat est attribué immédiatement et il n'est pas utile de continuer à évaluer les variables qui restent.

C1, C2, C3 sont des variables booléennes.
Résultat = C1 || C2 || C3.
C1 C2 C3 Résultat
false false false false
false false true true
false true false true
false true true true
true false false true
true false true true
true true false true
true true true true

#5 Attribuer une valeur par défaut avec un || open

Supposons que vous essayez d'accéder à la propriété d'un objet pour récupérer sa valeur. L'objet existe, mais la propriété n'existe pas. Vous pouvez avoir besoin d'attribuer une valeur par défaut, et vous pouvez le faire avec un ||.

Dans l'exemple ci-dessous, je vais essayer d'accéder à la propriété age de l'objet personne. Dans cet objet, la propriété age n'existe pas. Je vais me servir d'un ||, pour attribuer une valeur par défaut, à la variable age.

Ensuite, je vais essayer d'accéder à la propriété age de l'objet etudiant. Dans ce cas, la propriété existe et c'est elle qui va être utilisée et pas la valeur par défaut.

Tester le code
Valeur par defaut

Politique de confidentialité

Mentions Légales