Module 2 : JavaScript

Structures de contrôle

Apprenez à contrôler le flux de votre programme avec les conditions (if/else) et les boucles (for/while).

45 min
Version Audio
Débutant
🎮

STRUCTURES DE CONTRÔLE EN JAVASCRIPT

Version Ultra-Détaillée - Définitions & Explications Complètes

📖 1. INTRODUCTION AUX STRUCTURES DE CONTRÔLE

Définition : Les structures de contrôle sont des instructions qui permettent de modifier le flux d'exécution d'un programme. Elles permettent de prendre des décisions (conditions) et de répéter des actions (boucles).

Métaphore : Imaginez un feu de signalisation pour un programme :

  • Conditions (if/else) : Comme un feu qui décide si la voiture passe ou s'arrête selon la couleur (vérification d'une condition).
  • Boucles (for/while) : Comme un tourniquet qui fait passer les gens un par un jusqu'à ce qu'il n'y ait plus personne (répétition).
  • Switch : Comme un aiguillage de train qui dirige le train vers une voie différente selon la destination choisie.

Pourquoi sont-elles importantes ? Sans structures de contrôle, un programme serait une suite linéaire d'instructions toujours exécutées de la même façon. Les structures de contrôle permettent de créer des programmes intelligents capables de s'adapter et de répéter des tâches.

🚦 2. LES CONDITIONS (Prise de Décision)

Définition : Les conditions permettent d'exécuter des blocs de code uniquement si certaines conditions sont remplies. C'est le fondement de toute logique de programmation.

2.1 La Structure if

Définition : if (si) permet d'exécuter un bloc de code seulement si la condition entre parenthèses est true. Si la condition est false, le bloc est ignoré.

Syntaxe :

if (condition) { // Code exécuté si la condition est true }

let age = 18;

if (age >= 18) { console.log("Vous êtes majeur"); }

// Affiche "Vous êtes majeur" car 18 >= 18 est true

2.2 La Structure if...else

Définition : if...else (si...sinon) permet d'exécuter un bloc de code si la condition est true, et un autre bloc si la condition est false.

Syntaxe :

if (condition) { // Code si true } else { // Code si false }

let age = 16;

if (age >= 18) { console.log("Vous êtes majeur"); } else { console.log("Vous êtes mineur"); }

// Affiche "Vous êtes mineur" car 16 >= 18 est false

2.3 La Structure else if

Définition : else if permet de chaîner plusieurs conditions quand il y a plus de deux cas possibles.

Syntaxe :

if (condition1) { // Code si condition1 est true } else if (condition2) { // Code si condition1 est false et condition2 est true } else { // Code si aucune condition n'est true }

let note = 85;

if (note >= 90) { console.log("Excellent"); } else if (note >= 80) { console.log("Très bien"); } else if (note >= 70) { console.log("Bien"); } else { console.log("À réviser"); }

// Affiche "Très bien" car 85 >= 80 est true

Important : Les conditions sont vérifiées dans l'ordre. Dès qu'une condition est true, le bloc correspondant est exécuté et le reste est ignoré.

2.4 La Structure switch

Définition : switch est une alternative à if...else quand on doit comparer une variable à plusieurs valeurs possibles. Elle est souvent plus lisible pour de nombreux cas.

Syntaxe :

switch (expression) { case valeur1: // Code si expression === valeur1 break; case valeur2: // Code si expression === valeur2 break; default: // Code si aucune correspondance }

let jour = "mercredi";

switch (jour) { case "lundi": console.log("Début de semaine"); break; case "mercredi": console.log("Milieu de semaine"); break; case "vendredi": console.log("Bientôt le week-end !"); break; default: console.log("Jour quelconque"); }

// Affiche "Milieu de semaine"

Important : Le mot-clé break est essentiel. Sans break, le programme continue d'exécuter les cas suivants (appelé "fall-through").

2.5 Conditions et Valeurs Truthy/Falsy

Définition : En JavaScript, toute valeur peut être utilisée comme condition. Les valeurs sont automatiquement converties en boolean selon qu'elles sont truthy ou falsy.

Valeurs Falsy (considérées comme false) :

  • false
  • 0 (zéro)
  • -0 (zéro négatif)
  • 0n (BigInt zéro)
  • "" (chaîne vide)
  • null
  • undefined
  • NaN (Not a Number)

Valeurs Truthy (considérées comme true) : Tout le reste : "0", "false", [], {}, function() {}, etc.

// Exemples de conditions avec des valeurs non-booléennes

let nom = "Jean";

if (nom) { // "Jean" est truthy console.log("Bonjour " + nom); }

let ville = "";

if (ville) { // "" est falsy, ce code ne s'exécute pas console.log("Vous habitez à " + ville); } else { console.log("Ville non spécifiée"); }

🔄 3. LES BOUCLES (Répétition)

Définition : Une boucle est une structure de contrôle qui permet d'exécuter un bloc de code plusieurs fois tant qu'une condition est vraie. Les boucles évitent de répéter le même code manuellement.

Métaphore : Une boucle est comme un tourniquet : tant qu'il y a des personnes qui attendent (condition), le tourniquet tourne et les fait passer un par un (exécution du bloc).

3.1 La Boucle for

Définition : La boucle for est la plus utilisée quand on sait à l'avance combien de fois on veut répéter le code. Elle se compose de 3 parties :

  • Initialisation : Exécutée une fois au début (ex: let i = 0).
  • Condition : Vérifiée avant chaque itération. Si true, le bloc s'exécute. Si false, la boucle s'arrête (ex: i < 10).
  • Incrémentation : Exécutée après chaque itération (ex: i++).

Syntaxe :

for (initialisation; condition; incrémentation) { // Code répété }

// Afficher les nombres de 0 à 4

for (let i = 0; i < 5; i++) { console.log(i); }

// Résultat : 0, 1, 2, 3, 4

3.2 La Boucle for...of (ES6)

Définition : for...of est une boucle qui permet d'itérer sur les valeurs d'un itérable (tableau, chaîne, Map, Set, etc.). Elle est plus lisible que for classique quand on n'a pas besoin de l'index.

// Parcourir un tableau

const fruits = ["pomme", "banane", "orange"];

for (const fruit of fruits) { console.log(fruit); }

// Affiche : "pomme", "banane", "orange"

// Parcourir une chaîne de caractères

const texte = "Bonjour";

for (const lettre of texte) { console.log(lettre); }

// Affiche : "B", "o", "n", "j", "o", "u", "r"

3.3 La Boucle for...in

Définition : for...in permet d'itérer sur les clés (propriétés) d'un objet. Elle est utilisée pour parcourir les propriétés énumérables d'un objet.

⚠️ Attention : for...in est déconseillée pour les tableaux car elle peut inclure des propriétés héritées. Utilisez for...of pour les tableaux.

const personne = { nom: "Jean", age: 30, ville: "Paris" };

for (const cle in personne) { console.log(`${cle}: ${personne[cle]}`); }

// Affiche : "nom: Jean", "age: 30", "ville: Paris"

3.4 La Boucle while

Définition : La boucle while (tant que) exécute un bloc de code tant qu'une condition est vraie. La condition est vérifiée avant chaque itération.

Syntaxe :

while (condition) { // Code répété tant que condition est true }

let compteur = 0;

while (compteur < 5) { console.log(compteur); compteur++; }

// Affiche : 0, 1, 2, 3, 4

⚠️ Attention : Si la condition est toujours true, la boucle devient infinie et fait planter le programme. Assurez-vous que la condition finit par devenir false.

3.5 La Boucle do...while

Définition : La boucle do...while (faire...tant que) exécute le bloc de code au moins une fois, puis vérifie la condition pour décider si elle continue.

Différence avec while :

  • while : Vérifie d'abord la condition, puis exécute le code.
  • do...while : Exécute d'abord le code, puis vérifie la condition.

Syntaxe :

do { // Code exécuté au moins une fois } while (condition);

let compteur = 0;

do { console.log(compteur); compteur++; } while (compteur < 5);

// Affiche : 0, 1, 2, 3, 4

// Exemple avec condition fausse dès le départ

let x = 10;

do { console.log("Exécuté au moins une fois"); } while (x < 5);

// Affiche "Exécuté au moins une fois" même si 10 < 5 est false

3.6 Les Mots-clés break et continue

break : Le mot-clé break permet de sortir immédiatement d'une boucle, avant même que la condition soit fausse.

continue : Le mot-clé continue permet de passer à l'itération suivante de la boucle, en ignorant le reste du code dans le bloc actuel.

// break : s'arrête quand i vaut 3

for (let i = 0; i < 10; i++) { if (i === 3) { break; // Sort de la boucle } console.log(i); }

// Affiche : 0, 1, 2

// continue : saute les nombres pairs

for (let i = 0; i < 5; i++) { if (i % 2 === 0) { continue; // Passe à l'itération suivante } console.log(i); }

// Affiche : 1, 3

⚠️ 4. GESTION DES ERREURS (try...catch)

Définition : La structure try...catch permet de capturer et gérer les erreurs qui peuvent survenir dans un bloc de code, sans que le programme ne plante complètement.

Métaphore : C'est comme un filet de sécurité pour les acrobates. Si un acrobate tombe (erreur), le filet (catch) le rattrape pour qu'il ne s'écrase pas au sol.

try { // Code qui pourrait générer une erreur let resultat = 10 / 0; console.log(resultat); } catch (erreur) { // Code exécuté en cas d'erreur console.log("Une erreur est survenue :", erreur.message); } finally { // Code exécuté toujours, avec ou sans erreur console.log("Bloc finally exécuté"); }

// Exemple concret avec une erreur

try { console.log(variableInconnue); // ❌ Erreur : variable non définie } catch (erreur) { console.log("Erreur capturée :", erreur.message); // Le programme continue sans planter }

console.log("Le programme continue normalement");

Bonnes pratiques :

  • N'utilisez try...catch que pour le code susceptible de générer des erreurs.
  • Ne capturez pas les erreurs si vous ne pouvez pas les gérer correctement.
  • Le bloc finally est utile pour le nettoyage (fermeture de fichiers, etc.).

📊 5. RÉSUMÉ - STRUCTURES DE CONTRÔLE

Structure Syntaxe Utilisation
if if (condition) { ... } Exécuter du code si la condition est vraie.
if...else if (cond) { ... } else { ... } Exécuter un bloc ou l'autre selon la condition.
else if if (c1) { ... } else if (c2) { ... } else { ... } Vérifier plusieurs conditions successives.
switch switch (expr) { case val: ... break; default: ... } Comparer une expression à plusieurs valeurs.
for for (init; cond; inc) { ... } Répéter un nombre connu de fois.
for...of for (const item of iterable) { ... } Parcourir les valeurs d'un itérable (tableau, chaîne).
for...in for (const key in object) { ... } Parcourir les clés d'un objet.
while while (condition) { ... } Répéter tant que la condition est vraie.
do...while do { ... } while (condition) Exécuter au moins une fois, puis répéter.
break break; Sortir immédiatement d'une boucle.
continue continue; Passer à l'itération suivante.
try...catch try { ... } catch (err) { ... } finally { ... } Gérer les erreurs de manière élégante.

┌─────────────────────────────────────────────────────────────────┐

│ STRUCTURES DE CONTRÔLE - RÉCAPITULATIF │

│ │

│ ┌─────────────────────────────────────────────────────────┐ │

│ │ CONDITIONS │ │

│ │ if → else if → else switch → case → default │ │

│ │ (Branchement conditionnel) (Sélection multiple) │ │

│ └─────────────────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────────────────┐ │

│ │ BOUCLES │ │

│ │ for → for...of → for...in while → do...while │ │

│ │ (Répétition contrôlée) (Répétition inconditionnelle)│ │

│ │ │ │

│ │ break → Sortie immédiate │ │

│ │ continue → Passer à l'itération suivante │ │

│ └─────────────────────────────────────────────────────────┘ │

│ │

│ ┌─────────────────────────────────────────────────────────┐ │

│ │ GESTION DES ERREURS │ │

│ │ try → catch → finally │ │

│ │ (Capture et traitement des exceptions) │ │

│ └─────────────────────────────────────────────────────────┘ │

└─────────────────────────────────────────────────────────────────┘