&&, ||, !
Les opérateurs logiques ET (&&), OU (||) et NON (!). Ils combinent des conditions, et && et || renvoient l’un de leurs côtés.
- Renvoie
&&et||renvoient la valeur d’un des deux côtés (pas nécessairement de type boolean).!renvoie toujourstrueoufalse.
Exemple
#const isLoggedIn = true
const fuel = 0
console.log(isLoggedIn && fuel > 0)
console.log(isLoggedIn || fuel > 0)
console.log(!isLoggedIn)Définition et utilisation
#&& (et) est vrai quand les deux côtés sont vrais, || (ou) quand au moins un des deux l’est, et ! (non) inverse la valeur booléenne. Vous les utilisez le plus souvent pour combiner des conditions dans un if, par ex. if (isLoggedIn && hasFuel).
&& et || ne renvoient pas toujours true ou false, mais l’un de leurs côtés. a || b renvoie a s’il est vrai (truthy), et sinon b. a && b renvoie a s’il est faux (falsy), et sinon b. Le double !!value transforme n’importe quelle valeur en true ou false.
Les deux opérateurs fonctionnent par court-circuit : le côté droit n’est pas évalué quand le résultat est déjà connu à gauche. Grâce à cela, user && user.name ne lève pas d’erreur pour null. && a une priorité plus haute que ||, et les opérateurs ||= et &&= n’affectent une valeur que sous la condition correspondante.
Syntaxe
#a && b
a || b
!a
!!a
a ||= b
a &&= bPlus d’exemples
#console.log('Léa' || 'Invité')
console.log('' || 'Invité')
console.log('Léa' && 'connectée')
console.log(0 && 'jamais')
console.log(!!'texte', !!0)function loadAvatar() {
console.log('Récupération de l’avatar...')
return 'avatar.png'
}
const cached = 'cache.png'
const avatar = cached || loadAvatar()
console.log(avatar)loadAvatar() n’a pas été appelée, car le côté gauche de || était déjà vrai.
const player = { nickname: '', score: 40 }
player.nickname ||= 'Anonyme'
player.score &&= player.score * 2
console.log(player)Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Faites attention à
||pour les valeurs par défaut. Il remplace aussi0,""etfalse, qui peuvent être des données valides. Dans ces cas, utilisez??. - Dans des conditions complexes, ajoutez des parenthèses, même si la priorité suffirait :
(isAdmin || isMentor) && isActivese lit sans ambiguïté. - En React, l’écriture
{count && <Badge />}affichera0quandcountvaut zéro. Il est plus sûr d’écrire{count > 0 && <Badge />}.
Entrées associées
#- ??L’opérateur ?? (nullish coalescing) renvoie le côté droit seulement quand le côté gauche est null ou undefined. Idéal pour les valeurs par défaut.
- ? :L’opérateur conditionnel (ternaire) renvoie l’une de deux valeurs selon une condition, en une seule expression courte.
- if...elseExécute un bloc de code seulement si une condition est vraie, et sinon un bloc else optionnel.
- ===L’opérateur d’égalité stricte compare des valeurs sans conversion de types : true n’est obtenu que pour le même type et la même valeur.
- ?.L’opérateur ?. (optional chaining) lit une propriété de façon sûre. Quand l’objet est null ou undefined, il renvoie undefined au lieu d’une erreur.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.