L’opérateur ternaire en JavaScript expliqué avec des exemples

Quand vous créez des conditions dans votre code JavaScript, la plupart du temps, vous utilisez des conditions if, else, et else if.

Grâce à l’opérateur ternaire (aussi appelé « ternary operator »), vous allez pouvoir écrire des conditions if, else de manière abrégées.

Syntaxe de la condition ternaire

Une condition ternaire en JavaScript est représentée par ? et : dans votre code.

Si vous voulez comprendre comment elle fonctionne, vous pouvez la comparer à une déclaration if else abrégée.

// Condition traditionnelle JavaScript :
if (something) {
  console.log('Yes')
} else {
  console.log('No')
}

// Condition ternaire JavaScript :
something ? console.log('Yes') : console.log('No')
// [condition] ? [if] : [else]

Pour résumer, l’opérateur ternaire en JavaScript est une déclaration if else abrégée.

Ci-dessous, vous allez trouver des exemples pour comprendre comment et quand utiliser cette structure conditionnelle ternaire.

Conditions if else abrégées

Ci-dessous, vous trouverez le cas le plus commun avec ce type de condition. Il est souvent utilisé lorsque vous avez une condition courte et que vous voulez rendre votre code plus concis. Dans ce cas, vous pouvez utiliser l’opérateur ternaire :

const name = 'Julien'

// Condition ternaire ou condition if else en une ligne :
const color = name === 'Julien' ? 'blue' : 'green'
// Si la variable name est égale à "Julien", la couleur est "blue" sinon, elle est "green"

console.log(color)
// Sortie : "blue"

Opérateur ternaire avec plusieurs conditions imbriquées

La condition ternaire permet de créer des conditions imbriquées.

Ci-dessous, vous trouverez un exemple en utilisant l’opérateur ternaire JavaScript :

const age = 20

// Cette condition imbriquée avec l'opérateur ternaire :
age <= 25
  ? age <= 10
    ? console.log('inférieur ou égal à 10')
    : console.log('inférieur ou égal à 25, mais plus que 10')
  : console.log('trop agé')
// Sortie : "linférieur ou égal à 25, mais plus que 10"

// Est la même chose que cette condition imbriquée avec une condition if else :
if (age < 25) {
  if (age < 10) console.log('inférieur ou égal à 10')
  else console.log('inférieur ou égal à 25, mais plus que 10')
} else {
  console.log('trop agé')
}
// Sortie : "inférieur ou égal à 25, mais plus que 10"

Comme vous pouvez le remarquer, ce n’est pas facile à lire, ni à comprendre. Si votre condition est plus qu’un simple if else, alors je vous recommande de ne pas utiliser l’opérateur ternaire. Auquel cas, votre code risque de devenir difficile à lire et maintenir.

Opérateur ternaire avec plusieurs opérations

L’opérateur ternaire fonctionne aussi pour faire des opérations multiples dans le cas où une condition serait rencontrée.

Cela revient à la même chose qu’écrire plusieurs lignes dans une condition if else.

let letter = 'a'

// Cette opération ternaire avec plusieurs opérations :
letter === 'a'
  ? (console.log('la lettre est a'), console.log("c'est cool"))
  : console.log("la lettre n'est pas a")
// Sortie :
// "la lettre est a"
// "c'est cool"

// Est la même condition que cette condition if else:
if (letter === 'a') {
  console.log('la lettre est a')
  console.log("c'est cool")
} else {
  console.log("la lettre n'est pas a")
}
// Sortie :
// "la lettre est a"
// "c'est cool"

Pour les mêmes raisons que l’opérateur ternaire avec plusieurs conditions imbriquées, je ne recommande pas cet usage.

Ce qu’il faut retenir sur la condition ternaire

Pour résumer, l’opérateur ternaire en JavaScript est puissant, mais vous devez l’utiliser avec parcimonie.

L’un de ses avantages est qu’il permet d’écrire des conditions if else abrégées. Si vous avez une condition simple et que vous voulez l’écrire en une ligne, l’opérateur ternaire est parfait pour vous.

Lorsque vous avez des conditions multiples, ou alors des conditions avec beaucoup d’instructions, il est recommandé de ne pas utiliser la condition ternaire. Vos collègues vous remercierons ! 😄