JavaScript - Instruction conditionnelle if...else : Guide pour les débutants

Salut à toi, futur.e codeur.euse ! Aujourd'hui, nous allons plonger dans l'un des concepts les plus fondamentaux de la programmation : l'instruction conditionnelle if...else. Pense à elle comme le décideur dans ton code, comme un feu de circulation guidant les voitures à un carrefour. C'est parti !

Diagramme de flux de l'instruction if-else

Avant de sauter dans le code, visualisons comment fonctionnent les instructions if...else. Imagine que tu es à un carrefour :

[Condition]
/    \
/      \
/        \
[Vrai]      [Faux]
|            |
[Action 1]   [Action 2]

Ce simple diagramme montre l'essence de l'instruction if...else : si une condition est vraie, fais une chose ; sinon, fais quelque chose d'autre.

Instruction 'if' en JavaScript

Commençons par l'instruction 'if' de base. C'est comme dire : "Si il pleut, prends un parapluie."

let estIlPleuvant = true;

if (estIlPleuvant) {
console.log("N'oublie pas ton parapluie !");
}

Dans cet exemple, si estIlPleuvant est vrai, le message sera affiché. Si c'est faux, rien ne se passe. Simple, n'est-ce pas ?

Essayons un autre exemple :

let temperature = 25;

if (temperature > 30) {
console.log("Il fait chaud dehors !");
}

Ici, le message n'apparaîtra que si la température est supérieure à 30. Dans ce cas, il neura rien car 25 n'est pas supérieur à 30.

Instruction if...else en JavaScript

Maintenant, que faire lorsque la condition est fausse ? C'est là que rentre en jeu 'else'. C'est comme dire : "Si il pleut, prends un parapluie ; sinon, porte des lunettes de soleil."

let estIlPleuvant = false;

if (estIlPleuvant) {
console.log("N'oublie pas ton parapluie !");
} else {
console.log("Profite de la journée ensoleillée !");
}

Dans ce cas, puisque estIlPleuvant est faux, le second message sera affiché.

Voici un autre exemple :

let age = 15;

if (age >= 18) {
console.log("Tu peux voter !");
} else {
console.log("Désolé, tu es trop jeune pour voter.");
}

Puisque 15 est inférieur à 18, le message "Désolé, tu es trop jeune pour voter" sera affiché.

Instruction if...else if... en JavaScript

Parfois, la vie n'est pas aussi simple que noir ou blanc. Nous avons besoin de plus d'options ! C'est là que 'else if' devient utile. C'est comme une question à choix multiples.

let note = 75;

if (note >= 90) {
console.log("A - Excellent !");
} else if (note >= 80) {
console.log("B - Bon travail !");
} else if (note >= 70) {
console.log("C - Pas mal !");
} else if (note >= 60) {
console.log("D - Tu dois étudier davantage.");
} else {
console.log("F - Oh non ! Tu as échoué.");
}

Dans cet exemple, la note est 75, donc la sortie sera "C - Pas mal !". Le code vérifie chaque condition dans l'ordre et s'arrête dès qu'il trouve une condition vraie.

Essayons un autre exemple :

let heure = 14;

if (heure < 12) {
console.log("Bonjour !");
} else if (heure < 18) {
console.log("Bon après-midi !");
} else {
console.log("Bonsoir !");
}

Puisque l'heure est 14 (14h00), la sortie sera "Bon après-midi !".

Instructions if...else imbriquées

Parfois, tu pourrais avoir besoin de vérifier des conditions à l'intérieur d'autres conditions. C'est là que les instructions if...else imbriquées deviennent utiles.

let estWeekend = true;
let estIlPleuvant = false;

if (estWeekend) {
if (estIlPleuvant) {
console.log("C'est un week-end pluvieux. Parfait pour lire un livre !");
} else {
console.log("C'est un week-end ensoleillé. Allons pique-niquer !");
}
} else {
console.log("C'est un jour de semaine. Il est temps de travailler !");
}

Dans cet exemple, nous vérifions d'abord si c'est un week-end. Si c'est le cas, nous vérifions ensuite si il pleut pour décider de l'activité à suggérer.

Tableau de comparaison des méthodes if...else

Voici un tableau pratique résumant les différentes méthodes if...else que nous avons couvertes :

Méthode	Syntaxe	Cas d'utilisation
if	if (condition) { ... }	Lorsque tu veux exécuter du code uniquement si une condition est vraie
if...else	if (condition) { ... } else { ... }	Lorsque tu veux un résultat si une condition est vraie, et un autre résultat si elle est fausse
if...else if...else	if (condition1) { ... } else if (condition2) { ... } else { ... }	Lorsque tu as plusieurs conditions à vérifier
if...else imbriqué	if (condition1) { if (condition2) { ... } else { ... } } else { ... }	Lorsque tu as besoin de vérifier des conditions à l'intérieur d'autres conditions

N'oublie pas, la programmation, c'est tout desprentissage par la pratique. N'aie pas peur d'expérimenter avec ces concepts. Essaie de changer les valeurs dans les exemples et observe comment la sortie change. C'est la meilleure façon d'apprendre !

Dans mes années d'enseignement, j'ai découvert que les élèves qui jouent avec le code et font des erreurs apprennent le plus rapidement. Alors vas-y, casse des choses, répare-les, et amuse-toi dans le processus !

Bonne programmation, futurs programmeurs !

Credits: Image by storyset