? :
L’opérateur conditionnel (ternaire) renvoie l’une de deux valeurs selon une condition, en une seule expression courte.
- Renvoie
- La valeur
exprIfTruequand la condition est vraie, sinon la valeurexprIfFalse. Seule l’expression choisie est évaluée.
Exemple
#const points = 85
const isPremium = false
const result = points >= 50 ? 'Validé' : 'À revoir'
console.log(result)
console.log(`Compte : ${isPremium ? 'Premium' : 'Gratuit'}`)Définition et utilisation
#L’opérateur conditionnel, aussi appelé ternaire, se compose de trois parties : la condition, la valeur en cas de vrai et la valeur en cas de faux. L’écriture condition ? a : b renvoie a quand la condition est vraie (truthy), et sinon b.
À la différence de if...else, c’est une expression, pas une instruction. Vous pouvez donc l’insérer directement dans une affectation, un argument de fonction, un template de texte ou du JSX en React, par ex. const label = points >= 50 ? "Validé" : "À revoir".
On peut enchaîner les opérateurs pour choisir une valeur parmi plusieurs, mais au-delà de deux ou trois niveaux, le code perd en lisibilité. Dans ce cas, if...else, switch ou une fonction séparée convient mieux.
Syntaxe
#condition ? exprIfTrue : exprIfFalsePlus d’exemples
#const medal = (place) =>
place === 1 ? 'or'
: place === 2 ? 'argent'
: place === 3 ? 'bronze'
: 'aucune'
console.log(medal(1))
console.log(medal(3))
console.log(medal(7))function reward() {
console.log('Récompense accordée')
return 50
}
const finished = false
const bonus = finished ? reward() : 0
console.log(bonus)reward() n’a pas été appelée, car la condition était fausse. L’opérateur n’évalue qu’une seule des deux branches.
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
#- Utilisez l’opérateur pour choisir une valeur, pas pour déclencher une action. L’écriture
isValid ? save() : showError()est plus lisible sous forme deif...else. - S’il s’agit seulement d’une valeur par défaut,
??et||sont plus courts :name ?? "Invité". - Formatez les conditions imbriquées sur des lignes séparées, chaque ligne commençant par
?ou:. Il est alors plus facile de voir quelle valeur appartient à quelle condition.
Entrées associées
#- if...elseExécute un bloc de code seulement si une condition est vraie, et sinon un bloc else optionnel.
- &&, ||, !Les opérateurs logiques ET (&&), OU (||) et NON (!). Ils combinent des conditions, et && et || renvoient l’un de leurs côtés.
- ??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.
- switchCompare une valeur à une liste de cas case et exécute le code à partir du premier qui correspond.
- Template literalsDes templates de texte entre guillemets inversés : ils insèrent des valeurs via ${} et peuvent s’étendre sur plusieurs lignes.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.