Cours JavaScript et TypeScript · Module 1: Bases de JavaScript
Instructions conditionnelles (if, else, switch)
Dans cette leçon9
À Jurassic Park, les systèmes de sécurité et les protocoles opérationnels doivent prendre des décisions en continu : que faire lorsque le niveau d'alimentation descend sous le seuil critique ? Comment réagir lorsque le T-Rex s'approche de la clôture ? Quelles procédures lancer pour différents niveaux de menace ?
De même, en JavaScript, les instructions conditionnelles permettent de prendre des décisions dans le code en fonction de conditions précises. Examinons les trois principaux types d'instructions conditionnelles : if, else if/else, et switch.
L'instruction if
L'instruction if est la forme la plus simple de prise de décision. Elle exécute un bloc de code si une condition spécifiée est vraie.
1// Structure de base de l'instruction if
2if (condition) {
3 // Code à exécuter lorsque la condition est vraie
4}En pratique à Jurassic Park, nous pouvons utiliser l'instruction if pour vérifier si des mesures de sécurité supplémentaires doivent être activées :
1// Système de surveillance du niveau d'alimentation de la clôture
2let powerLevel = 75; // pourcentage
3let criticalLevel = 30; // pourcentage
4
5if (powerLevel < criticalLevel) {
6 console.log("ATTENTION ! Niveau d'alimentation critique. Démarrage des générateurs de secours.");
7 // Code pour activer les générateurs de secours...
8}
9
10// Système de surveillance de l'activité des dinosaures
11let tRexDistanceFromFence = 50; // mètres
12let safetyThreshold = 10; // mètres
13
14if (tRexDistanceFromFence <= safetyThreshold) {
15 console.log("ALERTE ! Le T-Rex s'approche de la clôture. Activation de mesures de sécurité supplémentaires.");
16 // Code pour augmenter la tension de la clôture...
17}Instructions if...else
Si nous voulons réaliser des actions différentes selon qu'une condition est vraie ou fausse, nous utilisons la construction if...else.
1// Structure if...else
2if (condition) {
3 // Code à exécuter lorsque la condition est vraie
4} else {
5 // Code à exécuter lorsque la condition est fausse
6}À Jurassic Park, une telle construction peut être utilisée pour décider d'ouvrir ou de fermer une attraction :
1// Système de décision de disponibilité d'une attraction
2let weatherSuitable = true;
3let safetyIndex = 3; // échelle 1-5
4let minimumSafetyLevel = 4;
5
6if (weatherSuitable && safetyIndex >= minimumSafetyLevel) {
7 console.log("L'attraction « Safari Dinosaure » est ouverte aux visiteurs.");
8 // Code pour ouvrir les grilles, activer la file d'attente...
9} else {
10 console.log("L'attraction « Safari Dinosaure » est temporairement fermée pour des raisons de sécurité.");
11 // Code pour fermer les grilles, informer le personnel...
12}Instructions if...else if...else
Lorsque nous avons plus de deux chemins d'action possibles, nous pouvons utiliser la construction if...else if...else.
1// Structure if...else if...else
2if (condition1) {
3 // Code à exécuter lorsque condition1 est vraie
4} else if (condition2) {
5 // Code à exécuter lorsque condition1 est fausse mais condition2 est vraie
6} else {
7 // Code à exécuter lorsqu'aucune des conditions n'est vraie
8}Dans le contexte de Jurassic Park, cette construction peut s'appliquer à un système d'avertissement de menace avec différents niveaux :
1// Système d'avertissement de menace
2let predatorsOnTheLoose = 0;
3let fenceDamageLevel = 15; // pourcentage
4
5if (predatorsOnTheLoose > 0) {
6 console.log("CODE ROUGE ! Évacuation immédiate ! Prédateurs en liberté !");
7 // Code pour lancer les alarmes, les procédures d'évacuation...
8} else if (fenceDamageLevel > 30) {
9 console.log("CODE ORANGE ! Risque élevé d'évasion de dinosaures. Préparez-vous à l'évacuation.");
10 // Code pour préparer le parc à une éventuelle évacuation...
11} else if (fenceDamageLevel > 10) {
12 console.log("CODE JAUNE ! Dommages détectés sur la clôture. Envoyez l'équipe de réparation.");
13 // Code pour convoquer l'équipe technique...
14} else {
15 console.log("CODE VERT. Tous les systèmes fonctionnent correctement.");
16 // Mode de fonctionnement normal...
17}Instructions if imbriquées
Nous pouvons aussi placer des instructions conditionnelles à l'intérieur d'autres instructions conditionnelles. De telles instructions if imbriquées sont utiles lorsque nous voulons vérifier plusieurs conditions de manière séquentielle.
1// Exemple d'instructions if imbriquées
2let systemStatus = "operational";
3let accessLevel = "administrator";
4let securityCode = "A123";
5
6if (systemStatus === "operational") {
7 console.log("Le système fonctionne correctement.");
8
9 if (accessLevel === "administrator") {
10 console.log("Accès administrateur accordé.");
11
12 if (securityCode === "A123") {
13 console.log("Accès aux protocoles de sécurité accordé.");
14 // Code pour révéler les protocoles de sécurité secrets...
15 } else {
16 console.log("Code de sécurité incorrect.");
17 }
18 } else {
19 console.log("Aucun privilège administrateur.");
20 }
21} else {
22 console.log("Le système ne fonctionne pas correctement. Lancez le diagnostic.");
23}Bien que les instructions if imbriquées soient parfois nécessaires, leur usage excessif peut mener à ce qu'on appelle la « pyramide de la mort » ou « code en escalier », difficile à lire et à maintenir. Dans de tels cas, il vaut la peine d'envisager de refactoriser le code en utilisant l'approche du retour anticipé (early return) ou les instructions switch.
L'instruction switch
L'instruction switch est une alternative aux multiples instructions if...else if...else, surtout lorsqu'on compare une valeur à de nombreuses valeurs possibles.
1// Structure de l'instruction switch
2switch (expression) {
3 case value1:
4 // Code à exécuter lorsque expression === value1
5 break;
6 case value2:
7 // Code à exécuter lorsque expression === value2
8 break;
9 // ... d'autres cas
10 default:
11 // Code à exécuter lorsqu'aucun cas ne correspond
12}À Jurassic Park, l'instruction switch peut être utilisée pour déterminer les protocoles pour différentes espèces de dinosaures :
1// Système de protocoles par espèce
2let dinosaurSpecies = "Velociraptor";
3
4switch (dinosaurSpecies) {
5 case "Tyrannosaurus":
6 console.log("Protocole de sécurité T-REX-01 : Niveau de sécurité maximum.");
7 console.log("Double clôture électrique requise, surveillance vidéo constante.");
8 break;
9 case "Velociraptor":
10 console.log("Protocole de sécurité RAPTOR-02 : Niveau de sécurité élevé.");
11 console.log("Clôture renforcée requise, surveillance de l'activité de groupe.");
12 break;
13 case "Triceratops":
14 console.log("Protocole de sécurité HERB-03 : Niveau de sécurité standard.");
15 console.log("Clôture de base requise, surveillance du bien-être du troupeau.");
16 break;
17 case "Brachiosaurus":
18 console.log("Protocole de sécurité HERB-04 : Niveau de sécurité faible.");
19 console.log("Marquage de la zone requis, livraisons régulières de nourriture.");
20 break;
21 default:
22 console.log("Espèce de dinosaure inconnue. Appliquez le protocole de sécurité standard.");
23 console.log("Contactez le département de paléontologie pour l'identification de l'espèce.");
24}L'instruction break dans switch
Remarque que chaque case se termine par une instruction break. C'est extrêmement important, car sans break, l'exécution du code se poursuivra à travers tous les cas suivants, qu'ils correspondent ou non à l'expression. Cette propriété est appelée « fall-through » (passage à travers).
1// Exemple sans instructions break - « fall-through »
2let threatLevel = 2; // échelle 1-3
3
4switch (threatLevel) {
5 case 3:
6 console.log("Lancez la procédure d'évacuation du parc !");
7 // pas de break - l'exécution passe au cas suivant
8 case 2:
9 console.log("Fermez toutes les attractions et rassemblez le personnel.");
10 // pas de break - l'exécution passe au cas suivant
11 case 1:
12 console.log("Augmentez la fréquence de surveillance du système de sécurité.");
13 // pas de break - l'exécution passe à default
14 default:
15 console.log("Maintenez les procédures de sécurité standard.");
16}
17
18// Résultat pour threatLevel = 2 :
19// "Fermez toutes les attractions et rassemblez le personnel."
20// "Augmentez la fréquence de surveillance du système de sécurité."
21// "Maintenez les procédures de sécurité standard."Parfois, le « fall-through » peut être intentionnel et utile, mais le plus souvent il résulte d'une erreur. Assure-toi toujours de comprendre et de vouloir un tel comportement si tu omets l'instruction break.
Plusieurs cas avec le même code
Une utilisation légitime du « fall-through » est la gestion de plusieurs cas avec le même code :
1// Regroupement de cas
2let dayOfWeek = "saturday";
3
4switch (dayOfWeek) {
5 case "monday":
6 case "tuesday":
7 case "wednesday":
8 case "thursday":
9 case "friday":
10 console.log("Jurassic Park ouvert de 9h00 à 18h00.");
11 break;
12 case "saturday":
13 case "sunday":
14 console.log("Jurassic Park ouvert de 8h00 à 20h00 (horaires du week-end).");
15 break;
16 default:
17 console.log("Jour de la semaine invalide.");
18}Expressions conditionnelles (opérateur ternaire)
Pour des conditions simples, nous pouvons utiliser l'opérateur conditionnel (aussi appelé opérateur ternaire), qui est plus concis qu'une instruction if...else.
1// Structure de l'opérateur conditionnel
2condition ? expressionIfTrue : expressionIfFalseExemple d'utilisation à Jurassic Park :
1// Assigner un niveau d'accès
2let isEmployee = true;
3let accessLevel = isEmployee ? "Full access" : "Visitor access only";
4
5console.log(accessLevel); // "Full access"
6
7// Déterminer un message de statut
8let visitorCount = 1500;
9let parkCapacity = 2000;
10let entryStatus = visitorCount < parkCapacity
11 ? "Parc ouvert - Bienvenue !"
12 : "Parc complet - Désolé, vente de billets suspendue.";
13
14console.log(entryStatus); // "Parc ouvert - Bienvenue !"L'opérateur conditionnel peut aussi être imbriqué, bien qu'une imbrication excessive puisse réduire la lisibilité du code :
1// Opérateur conditionnel imbriqué
2let dinoSpecies = "Triceratops";
3let age = 5;
4let area = dinoSpecies === "Tyrannosaurus" ? "Sector T"
5 : dinoSpecies === "Velociraptor" ? "Sector V"
6 : dinoSpecies === "Triceratops" ? (age < 3 ? "Young herbivore sector" : "Adult herbivore sector")
7 : "General sector";
8
9console.log(area); // "Adult herbivore sector"Utiliser les valeurs truthy et falsy
Comme nous l'avons mentionné dans les leçons précédentes, JavaScript traite diverses valeurs comme « truthy » ou « falsy » dans le contexte des conditions. Nous pouvons tirer parti de cette propriété dans les instructions conditionnelles :
1// Vérifier l'existence d'une valeur
2let dinosaurName = ""; // chaîne vide (falsy)
3let identificationNumber = 0; // zéro (falsy)
4let assignedArea = null; // null (falsy)
5let biometricData; // undefined (falsy)
6let speciesRegistered = true; // booléen true (truthy)
7let notes = "Spécimen agressif"; // chaîne non vide (truthy)
8
9if (dinosaurName) {
10 console.log("Nom du dinosaure : " + dinosaurName);
11} else {
12 console.log("Le dinosaure n'a pas de nom assigné."); // ceci s'exécutera
13}
14
15if (identificationNumber) {
16 console.log("ID : " + identificationNumber);
17} else {
18 console.log("Aucun ID valide."); // ceci s'exécutera
19}
20
21if (speciesRegistered && notes) {
22 console.log("Espèce enregistrée. Notes : " + notes); // ceci s'exécutera
23}L'approche du retour anticipé (early return)
Parfois, au lieu d'imbriquer de nombreuses instructions if, il vaut mieux utiliser l'approche du retour anticipé, surtout dans les fonctions. Elle consiste à renvoyer rapidement un résultat dès que nous identifions une condition qui le permet.
1// Fonction vérifiant si un dinosaure peut être déplacé vers l'enclos public
2function isSuitableForPublicEnclosure(dinosaur) {
3 // Retours anticipés pour les conditions d'exclusion
4 if (dinosaur.aggressionLevel > 3) {
5 return false; // Trop agressif
6 }
7
8 if (dinosaur.age < 2) {
9 return false; // Trop jeune
10 }
11
12 if (dinosaur.diseases.length > 0) {
13 return false; // A des problèmes de santé
14 }
15
16 if (dinosaur.isCarnivore) {
17 // Conditions supplémentaires pour les carnivores
18 if (dinosaur.trained && dinosaur.aggressionLevel <= 2) {
19 return true; // Carnivore dressé avec une faible agressivité
20 } else {
21 return false; // Carnivore non dressé ou trop agressif
22 }
23 }
24
25 // Par défaut, les herbivores sont admis dans l'enclos public
26 return true;
27}
28
29// Exemple d'utilisation
30let triceratops = {
31 species: "Triceratops",
32 aggressionLevel: 2,
33 age: 5,
34 diseases: [],
35 isCarnivore: false,
36 trained: false
37};
38
39let velociraptor = {
40 species: "Velociraptor",
41 aggressionLevel: 4,
42 age: 3,
43 diseases: [],
44 isCarnivore: true,
45 trained: true
46};
47
48console.log(isSuitableForPublicEnclosure(triceratops)); // true
49console.log(isSuitableForPublicEnclosure(velociraptor)); // falseRésumé
Les instructions conditionnelles en JavaScript, tout comme les systèmes de prise de décision de Jurassic Park, te permettent de :
- Exécuter du code uniquement lorsque des conditions précises sont remplies (
if) - Exécuter différents blocs de code selon les conditions (
if...else,if...else if...else) - Sélectionner un bloc de code parmi plusieurs en fonction d'une valeur (
switch) - Renvoyer différentes valeurs en fonction d'une condition (opérateur conditionnel
? :) - Gérer efficacement une logique complexe (retour anticipé, conditions imbriquées)
Le choix de la bonne structure conditionnelle dépend du cas d'utilisation spécifique, mais en général tu devrais viser à :
- Utiliser
if...elsepour des conditions binaires simples - Utiliser
if...else if...elsepour plusieurs conditions liées - Utiliser
switchlorsque tu compares une valeur à de nombreuses valeurs possibles - Utiliser l'opérateur conditionnel pour des conditions simples sur une seule ligne
- Éviter une imbrication excessive qui réduit la lisibilité du code
Tout comme les systèmes de sécurité de Jurassic Park doivent prendre les bonnes décisions pour garantir la sécurité, nous, en tant que programmeurs, devons prendre les bonnes décisions concernant la structure de notre code pour garantir sa fiabilité et sa lisibilité.
Dans la prochaine leçon, nous examinerons les boucles, qui permettent d'exécuter du code plusieurs fois - essentielles, par exemple, pour traiter des données sur de nombreux dinosaures simultanément.
Code de cette leçon : index.js
1// Instructions conditionnelles - système de décision du parc
2// Utilise if/else et switch pour prendre des décisions
3
4// === if / else if / else ===
5console.log("=== Système de sécurité ===");
6
7let threatLevel = 3; // Change la valeur et observe le résultat !
8
9if (threatLevel >= 5) {
10 console.log("ALARME CRITIQUE ! Évacuation !");
11} else if (threatLevel >= 3) {
12 console.log("AVERTISSEMENT ! Niveau de menace accru.");
13} else if (threatLevel >= 1) {
14 console.log("ATTENTION : Surveillance de la situation.");
15} else {
16 console.log("Statut : Normal. Le parc est sûr.");
17}
18
19// === Conditions imbriquées ===
20console.log("\n=== Classification des dinosaures ===");
21
22let diet = "carnivore";
23let weight = 7000; // kg
24
25if (diet === "carnivore") {
26 if (weight > 5000) {
27 console.log("Catégorie : MENACE CRITIQUE");
28 } else {
29 console.log("Catégorie : MENACE ÉLEVÉE");
30 }
31} else {
32 if (weight > 10000) {
33 console.log("Catégorie : MENACE MOYENNE (grand herbivore)");
34 } else {
35 console.log("Catégorie : MENACE FAIBLE");
36 }
37}
38
39// === switch ===
40console.log("\n=== Protocole de secteur ===");
41
42let sector = "B"; // Change en A, B, C, D
43
44switch (sector) {
45 case "A":
46 console.log("Secteur A : Carnivores - sécurité maximale");
47 break;
48 case "B":
49 console.log("Secteur B : Herbivores - sécurité standard");
50 break;
51 case "C":
52 console.log("Secteur C : Oiseaux - filets de protection");
53 break;
54 case "D":
55 console.log("Secteur D : Reptiles marins - bassins fermés");
56 break;
57 default:
58 console.log("Secteur inconnu !");
59}
60
61// Ta mission :
62// 1. Change les valeurs des variables et observe les différents chemins
63// 2. Ajoute de nouvelles conditions à l'instruction switch
64Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. Quel bloc de code s'exécutera lorsque la condition d'une instruction if est false ?
Tâches pratiques dans le jeu
- Éditeur de code
Enregistre la tension de deux clôtures : const voltageTRex = 10000 et const voltageRaptor = 3000. Pour chaque clôture, utilise if/else : si la tension est supérieure à 8000, affiche 'ACTIF' dans la console, sinon 'ALARME'.
- Tri horizontal
Classe les éléments de l'instruction conditionnelle :
- Éditeur de code
Enregistre dans une variable dinoDistance la distance du dinosaure à la clôture en mètres (par exemple 5). Avec if / else if / else, affiche dans la console : 'ALERTE ROUGE' si la distance est inférieure à 3, 'AVERTISSEMENT' si elle est inférieure à 10, et 'EN SÉCURITÉ' sinon.
- Clique dans l'ordre
Classe les éléments de l'instruction if dans le bon ordre :