open

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 soit 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.
C1C2C3Résultat
falsefalsefalsefalse
falsefalsetruefalse
falsetruefalsefalse
falsetruetruefalse
truefalsefalsefalse
truefalsetruefalse
truetruefalsefalse
truetruetruetrue

#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 des raisons diverses 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 et si on cherche à accéder à une propriété en pensant qu'on a récupéré l'objet correctement et bien on va déclencher une exception typeError. Pour éviter ces 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 et bien je ne la déclenche pas.

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

Notez bien que la valeur elt.textContent sera retournée quelque 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. Si il y a un contenu textuel évalué à true et 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 soit 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.
C1C2C3Résultat
falsefalsefalsefalse
falsefalsetruetrue
falsetruefalsetrue
falsetruetruetrue
truefalsefalsetrue
truefalsetruetrue
truetruefalsetrue
truetruetruetrue

#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