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 est conçu pour aider les débutants à comprendre et à utiliser efficacement les opérateurs logiques de JavaScript — &&, ||, ! et !! — avec des exemples complets et entièrement expliqués.
Vue d’ensemble des opérateurs logiques JavaScript
Les opérateurs logiques en JavaScript servent à évaluer des conditions et à renvoyer une valeur en fonction des opérandes, souvent pour produire un résultat booléen. Ils incluent :
&&(ET logique)||(OU logique)??(opérateur de coalescence nulle, techniquement distinct mais souvent regroupé avec les opérateurs logiques)!(NON logique)!!(double NON)
ET logique (&&)
L’opérateur && renvoie true uniquement si les deux opérandes sont vrais. En JavaScript, il renvoie en réalité la valeur du premier opérande falsy ou du dernier opérande si tous sont truthy (évaluation à court-circuit). Il est utilisé lorsque plusieurs conditions doivent être remplies simultanément.
Dans cet exemple, isLoggedin et hasPermissions doivent tous deux être vrais pour que l’accès soit accordé. Si l’un des deux est faux, l’accès sera refusé.
OU logique (||)
L’opérateur || renvoie true si au moins un des opérandes est vrai. En JavaScript, il renvoie la valeur du premier opérande truthy ou du dernier opérande si tous sont falsy (évaluation à court-circuit). Il permet de prévoir des solutions de repli ou des conditions alternatives.
Ici, l’opération peut continuer si networkStatus vaut 'good' ou si savedOffline est vrai, ce qui fournit une solution de repli lorsque l’état du réseau est mauvais.
INFO
Utilisez l’opérateur de coalescence nulle ?? pour définir des valeurs par défaut uniquement lorsque les variables sont null ou undefined. C’est une alternative plus propre à ||, surtout lorsqu’on gère des valeurs falsy comme 0 ou '' qui ne devraient pas déclencher de valeur par défaut.
Opérateur de coalescence nulle
Cet opérateur est particulièrement utile par rapport à || pour gérer les cas où des valeurs falsy comme 0 ou '' sont valides et ne doivent pas déclencher de valeurs par défaut. Par exemple :
Dans cet exemple, itemCount est défini à 0. Avec ??, defaultCount reste 0 car ?? ne réagit qu’à null ou undefined, et non aux autres valeurs falsy. Cela évite des valeurs par défaut involontaires et clarifie votre intention.
NON logique (!)
L’opérateur ! inverse la véracité de son opérande. Il est utile pour basculer des états ou vérifier des non-conditions.
Cet exemple vérifie si isActive est faux et, si c’est le cas, indique qu’une activation est requise.
Double NON (!!)
L’opérateur !! convertit une valeur en booléen, en s’assurant qu’elle représente strictement true ou false.
!!0 s’évalue à false parce que 0 est une valeur falsy en JavaScript. Le double NON clarifie la conversion en booléen.
Utiliser !! pour vérifier l’état booléen d’une propriété d’objet
Parfois, vous voulez vérifier si une propriété d’un objet est non seulement présente, mais aussi truthy. L’opérateur !! est parfait pour convertir n’importe quelle valeur dans un contexte strictement booléen, ce qui rend clair et explicite le fait que la propriété satisfait ou non les conditions.
Imaginez un scénario dans lequel vous avez un objet utilisateur pouvant contenir une propriété appelée isActive. Vous souhaitez effectuer une action uniquement si isActive n’est pas seulement présent, mais aussi truthy.
Dans cet exemple :
- L’objet utilisateur possède une propriété
isActivequi vautundefined. - L’utilisation de
!!user.isActiveconvertitundefinedenfalse. - Comme
isActiveestundefined(une valeur falsy),!!undefineddonnefalse, et le résultat affiché sera "John is not active."
Scénarios d’utilisation pratique
Rendu conditionnel
Cet extrait montre l’utilisation de && pour le rendu conditionnel, en affichant 'UserDashboard' uniquement lorsque isLoggedIn est vrai.
Gérer les valeurs par défaut avec l’OU logique
Si currentUser est null, userName prend par défaut la valeur 'Guest'. Cela garantit qu’une salutation est toujours personnalisée.
Simplifier des conditions complexes
Ce code accorde un accès complet uniquement aux utilisateurs vérifiés qui sont soit administrateurs, soit éditeurs, en utilisant efficacement && et ||.
Bonnes pratiques
- Éviter la complexité : gardez les expressions logiques simples. Si elles deviennent trop complexes, découpez-les en parties plus petites et plus faciles à gérer.
- Tirer parti du court-circuit : utilisez le comportement de court-circuit de
&&et||pour optimiser les performances en évitant les évaluations inutiles. - Conversion booléenne explicite : utilisez
!!pour convertir clairement des valeurs en true ou false, afin d’améliorer la lisibilité et la prévisibilité de votre code. - Comparaisons cohérentes : assurez-vous que les types de données sont cohérents dans les comparaisons afin d’éviter un comportement inattendu dû à la coercition de type de JavaScript.
Conclusion
Comprendre et utiliser les opérateurs logiques en JavaScript est essentiel pour écrire un code efficace et performant. Grâce à des exemples bien expliqués et à de bonnes pratiques, vous pouvez maîtriser ces opérateurs et améliorer à la fois les fonctionnalités et la fiabilité de vos applications JavaScript. Expérimentez avec ces opérateurs pour bien comprendre leur potentiel dans différents scénarios.
Practice
What is the behavior of the logical operators in JavaScript?