JavaScript - Opérateurs Conditionnels

Salut à toi, futurs magiciens JavaScript ! Aujourd'hui, nous allons plonger dans le monde magique des opérateurs conditionnels. Ne t'inquiète pas si tu n'as jamais écrit une ligne de code auparavant - je serai ton guide amical dans cette aventure passionnante. Alors, prends ton bâton virtuel (clavier), et lançons quelques sorts conditionnels !

Qu'est-ce que les Opérateurs Conditionnels ?

Imagine que tu es un feu de circulation. Ton travail est de décider si les voitures doivent avancer ou s'arrêter. C'est exactement ce que font les opérateurs conditionnels en JavaScript - ils aident nos programmes à prendre des décisions basées sur certaines conditions.

L'Opérateur Ternaire : Le Couteau Suisse des Conditionnels

L'étoile de notre spectacle aujourd'hui est l'opérateur ternaire. C'est comme un if-else compact et super efficace. Décortiquons-le :

condition ? expressionIfTrue : expressionIfFalse

C'est comme si on posait une question :

• Si la réponse est oui (vrai), fais la première chose.
• Si la réponse est non (faux), fais la seconde chose.

Syntaxe : La Recette de la Magie Conditionnelle

Regardons les ingrédients de notre potion conditionnelle :

1. condition : C'est notre question. Pleut-il ? L'utilisateur est-il connecté ? Le nombre est-il pair ?
2. ? : C'est comme dire "ensuite..."
3. expressionIfTrue : Ce qu'il faut faire si la condition est vraie
4. : : C'est comme dire "sinon..."
5. expressionIfFalse : Ce qu'il faut faire si la condition est fausse

Exemple 1 : Le Décideur de Météo

Commençons par un exemple simple. Nous allons créer un programme qui décide de prendre un parapluie en fonction de la météo.

let isRaining = true;
let decision = isRaining ? "Prends un parapluie" : "Laisse le parapluie à la maison";
console.log(decision);

Si tu exécutes ce code, il affichera : "Prends un parapluie"

Reprenons :

• isRaining est notre condition. Elle est définie sur true.
• Si il pleut (isRaining est true), notre expression retourne "Prends un parapluie".
• Si il ne pleut pas, elle retournerait "Laisse le parapluie à la maison".
• Nous stockons ce résultat dans la variable decision.

Essaye de changer isRaining en false et vois ce qui se passe !

Exemple 2 : Le Vérificateur d'Âge

Maintenant, créons un programme qui vérifie si quelqu'un est assez âgé pour voter.

let age = 20;
let canVote = age >= 18 ? "Oui, tu peux voter !" : "Désolé, tu es trop jeune pour voter.";
console.log(canVote);

Cela affichera : "Oui, tu peux voter !"

Voici ce qui se passe :

• Nous définissons l'age à 20.
• Notre condition est age >= 18 (l'âge est-il supérieur ou égal à 18 ?).
• Si vrai, nous retournons "Oui, tu peux voter !".
• Si faux, nous retournons "Désolé, tu es trop jeune pour voter."

Essaye de changer l'âge à 16 et vois comment le résultat change !

Exemple 3 : L'Assignateur de Notes

Passons à quelque chose de plus complexe. Nous allons créer un programme qui attribue une note en fonction d'un score.

let score = 85;
let grade = score >= 90 ? 'A' :
score >= 80 ? 'B' :
score >= 70 ? 'C' :
score >= 60 ? 'D' : 'F';
console.log(`Ta note est : ${grade}`);

Cela affichera : "Ta note est : B"

Whaou, ça a l'air différent ! Nous avons enchaîné plusieurs opérateurs ternaires ensemble. C'est comme une cascade de décisions :

• D'abord, nous vérifions si le score est de 90 ou plus. Si oui, c'est un 'A'.
• Si non, nous vérifions si c'est 80 ou plus. Si oui, c'est un 'B'.
• Cela continue jusqu'à 'F' pour tout ce qui est en dessous de 60.

C'est une technique puissante, mais utilise-la avec sagesse - trop de chaînes peuvent rendre ton code difficile à lire !

Gérer les valeurs null : L'Opérateur de Coalescence Nulle

Parfois, nous devons traiter des valeurs qui pourraient être null ou undefined. Voici l'opérateur de coalescence nulle : ??

let username = null;
let displayName = username ?? "Invité";
console.log(`Bienvenue, ${displayName} !`);

Cela affichera : "Bienvenue, Invité !"

Voici ce qui se passe :

• Si username est null ou undefined, nous utilisons "Invité" à la place.
• Si username a une valeur, nous l'utilisons.

C'est une façon pratique de fournir des valeurs par défaut !

La Feuille de Triche des Opérateurs Conditionnels

Voici un tableau de référence rapide des opérateurs que nous avons appris :

Opérateur	Nom	But
?:	Opérateur Ternaire	Prendre une décision entre deux valeurs en fonction d'une condition
??	Opérateur de Coalescence Nulle	Fournir une valeur par défaut lors de la manipulation de null ou undefined

souviens-toi, la pratique rend parfait ! Essaye de créer tes propres exemples et expérimente avec ces opérateurs. Avant de t'en rendre compte, tu seras conducteur d'un orchestre entier d'opérateurs conditionnels dans ton code !

Bonne programmation, et puissent tes conditionnels toujours être vrais (quand tu le veux) !

Credits: Image by storyset