Opérateurs logiques JavaScript (&&, ||, !)

Les opérateurs logiques sont essentiels pour contrôler le flux et la prise de décision en JavaScript. Ce guide explique comment utiliser les opérateurs logiques de JavaScript — &&, ||, !, le ?? associé, et l'idiome !! — et, tout aussi important, les deux comportements qui piègent la plupart des développeurs : l'évaluation en court-circuit et la sémantique de retour de valeur. Chaque exemple ci-dessous est exécutable.

Vue d'ensemble des opérateurs logiques JavaScript

Les opérateurs logiques évaluent un ou plusieurs opérandes et retournent une valeur. Ils font partie intégrante des opérateurs de JavaScript et sont le plus souvent utilisés dans des conditions, mais ils font bien plus que produire true/false :

• && (ET logique)
• || (OU logique)
• ?? (Opérateur de coalescence des nuls — techniquement distinct, mais résout le même problème de « choisir une valeur »)
• ! (NON logique)
• !! (Double NON — l'idiome de conversion en Boolean)

Valeurs truthy et falsy

Avant de comprendre les opérateurs, vous devez savoir ce que JavaScript considère comme « vrai » et « faux » dans un contexte Boolean. Il existe exactement huit valeurs falsy ; tout le reste est truthy.

Cela est important car &&, || et ! testent les opérandes selon leur truthiness, et non strictement d'après le Boolean true. Voir Types de données JavaScript pour les types de valeurs sous-jacents.

Évaluation en court-circuit et retour de valeur

Deux règles gouvernent presque tout ce que font ces opérateurs :

1. Court-circuit : l'évaluation s'arrête dès que le résultat est connu. L'opérande de droite peut ne jamais s'exécuter.
2. Ils retournent un opérande, pas un Boolean : && et || renvoient l'une des valeurs originales, pas true/false.

C'est précisément pour cette raison que || fonctionne comme un sélecteur de valeur par défaut et que && fonctionne comme un garde, comme illustré plus bas.

ET logique (&&)

Dans un contexte Boolean, && vaut true uniquement lorsque les deux opérandes sont truthy. Plus précisément, il retourne le premier opérande falsy, ou le dernier opérande si tous sont truthy. Utilisez-le lorsque plusieurs conditions doivent toutes être remplies, ou comme garde qui exécute le côté droit uniquement lorsque le côté gauche est truthy.

Dans cet exemple, isLoggedin et hasPermissions doivent tous les deux être truthy pour que l'accès soit accordé. Si l'un d'eux est falsy, l'accès est refusé — et grâce au court-circuit, si isLoggedin est false, hasPermissions n'est même jamais évalué.

OU logique (||)

Dans un contexte Boolean, || vaut true lorsqu'au moins un opérande est truthy. Plus précisément, il retourne le premier opérande truthy, ou le dernier opérande si tous sont falsy. C'est ce qui en fait un opérateur de repli / valeur par défaut.

Ici, l'opération peut continuer si networkStatus est 'good' ou si savedOffline est vrai, fournissant un repli lorsque la connexion réseau est mauvaise.

Opérateur de coalescence des nuls (??)

L'opérateur ?? retourne son côté droit uniquement lorsque le côté gauche est null ou undefined (collectivement appelés nullish). Il ignore les autres valeurs falsy comme 0, '' et false. C'est cette unique différence qui le distingue de ||.

Ici, itemCount vaut 0. Avec ??, defaultCount reste 0 car 0 n'est pas nullish — un zéro légitime est donc préservé.

?? vs ||

|| se replie sur toute valeur falsy ; ?? se replie uniquement sur null/undefined. Lorsque 0, '' ou false sont des entrées valides, cette distinction constitue une véritable mesure de prévention des bugs.

Préférez ?? lorsque vous souhaitez uniquement une valeur par défaut en cas d'« absence totale de valeur », et gardez || lorsque toute valeur falsy doit déclencher le repli.

NON logique (!)

L'opérateur ! inverse la truthiness de son opérande et retourne toujours un Boolean. Il est utile pour basculer des états ou vérifier des non-conditions.

Cet exemple vérifie si isActive est faux et, si tel est le cas, indique qu'une activation est requise.

Double NON (!!)

Appliquer ! deux fois convertit n'importe quelle valeur en son équivalent Boolean : le premier ! inverse (et convertit en Boolean), le second le remet dans le bon sens. Le résultat représente strictement true ou false.

!!0 s'évalue à false car 0 est une valeur falsy en JavaScript. Le double NON clarifie la conversion Boolean.

Utiliser !! pour vérifier le statut Boolean d'une propriété d'object

Parfois, vous souhaitez vérifier si une propriété d'object est non seulement présente, mais aussi truthy. L'opérateur !! est idéal pour convertir n'importe quelle valeur en un contexte strictement Boolean, rendant explicite si la propriété remplit les conditions.

Considérons un scénario où vous avez un object utilisateur qui pourrait avoir une propriété appelée isActive. Vous souhaitez effectuer une action uniquement si isActive est non seulement présente, mais truthy.

Dans cet exemple :

• L'object utilisateur a une propriété isActive qui vaut undefined.
• L'utilisation de !!user.isActive convertit undefined en false.
• Comme isActive est undefined (une valeur falsy), !!undefined donne false, et la sortie sera « John is not active. »

Scénarios d'utilisation pratiques

Rendu conditionnel

Ce fragment illustre l'utilisation de && pour le rendu conditionnel, affichant 'UserDashboard' uniquement lorsque isLoggedIn est vrai.

Gérer les valeurs par défaut avec le OU logique

Si currentUser est null, userName prend la valeur par défaut 'Guest'. Cela garantit qu'un message de bienvenue est toujours personnalisé.

Simplifier les conditions complexes

Ce code accorde un accès complet uniquement aux utilisateurs vérifiés qui sont soit administrateurs soit éditeurs, en combinant && et ||. Les parenthèses sont importantes — voir la précédence des opérateurs ci-dessous.

Précédence des opérateurs

Lorsque les opérateurs sont mélangés, JavaScript les évalue dans un ordre fixe. De la priorité la plus haute à la plus basse parmi ceux-ci :

1. ! (NON logique) — le plus prioritaire
2. && (ET logique)
3. || (OU logique) et ?? (ils ont la même priorité, c'est pourquoi ils ne peuvent pas être mélangés sans parenthèses)

Les opérateurs de comparaison (<, ===, etc.) ont une priorité plus élevée que && et ||, ils sont donc évalués en premier. Voir Opérateurs de comparaison pour ces opérateurs.

En cas de doute, ajoutez des parenthèses. Elles ne coûtent rien et rendent l'intention sans ambiguïté.

Bonnes pratiques

• Éviter la complexité : Gardez les expressions logiques simples. Si elles deviennent trop complexes, décomposez-les en parties plus petites et gérables.
• Exploiter le court-circuit : Tirez parti du court-circuit de && et || pour optimiser les performances en évitant les évaluations inutiles.
• Conversion Boolean explicite : Utilisez !! pour convertir clairement les valeurs en true ou false, améliorant la lisibilité et la prévisibilité de votre code.
• Comparaisons cohérentes : Assurez des types de données cohérents dans les comparaisons pour éviter les comportements inattendus dus à la coercition de types de JavaScript.

Conclusion

Les opérateurs logiques sont essentiels pour écrire du JavaScript efficace. Retenez les deux idées qui expliquent presque tout ce qu'ils font : l'évaluation en court-circuit (l'opérande de droite peut ne jamais s'exécuter) et le retour de valeur (&& et || retournent l'un des opérandes, pas un Boolean). Utilisez ?? plutôt que || chaque fois que 0, '' ou false sont des valeurs valides, et ajoutez des parenthèses chaque fois que la priorité n'est pas claire.

Pour aller plus loin, consultez l'Opérateur conditionnel (ternaire) pour choisir entre deux valeurs en ligne, et les Opérateurs de comparaison pour construire les conditions qui alimentent les expressions logiques.

Pratique