Boucles et itérations

À Jurassic Park, les tâches de routine doivent être réalisées régulièrement et de façon répétée : vérifier la clôture de chaque enclos toutes les heures, surveiller toutes les caméras de sécurité, mettre à jour l'état de santé de chaque dinosaure. Réaliser ces tâches manuellement serait fastidieux et source d'erreurs.

De même en JavaScript, les boucles permettent l'exécution automatique et efficace d'opérations répétitives. Au lieu d'écrire le même code plusieurs fois, nous pouvons utiliser des boucles pour l'exécuter pour de nombreux éléments ou un nombre de fois précis.

La boucle for

La boucle for est l'une des boucles les plus populaires en JavaScript. Elle se compose de trois parties : l'initialisation, la condition et l'expression de mise à jour.

1// Structure de base de la boucle for
2for (initialisation; condition; mise à jour) {
3  // Bloc de code à exécuter
4}

En pratique à Jurassic Park, nous pouvons utiliser la boucle for pour automatiser les tâches de routine :

1// Vérifier la santé de chaque dinosaure d'un secteur
2let dinosaurs = ["Tyrannosaurus", "Velociraptor", "Triceratops", "Stegosaurus", "Brachiosaurus"];
3
4for (let i = 0; i < dinosaurs.length; i++) {
5  console.log(`Vérification de l'état de santé : ${dinosaurs[i]}`);
6  // Code pour vérifier la santé d'un dinosaure précis...
7}
8
9// Résultat :
10// Vérification de l'état de santé : Tyrannosaurus
11// Vérification de l'état de santé : Velociraptor
12// Vérification de l'état de santé : Triceratops
13// Vérification de l'état de santé : Stegosaurus
14// Vérification de l'état de santé : Brachiosaurus
15
16// Surveillance des caméras de sécurité
17for (let camera = 1; camera <= 10; camera++) {
18  console.log(`Vérification de la caméra #${camera}`);
19  // Code pour analyser le flux de la caméra...
20}
21
22// Générer un rapport quotidien pour les 7 derniers jours
23for (let day = 1; day <= 7; day++) {
24  console.log(`Génération du rapport pour le jour #${day}`);
25  // Code pour générer le rapport d'un jour précis...
26}

La boucle for a trois éléments principaux :

1. Initialisation (p. ex. let i = 0) - exécutée une seule fois, avant le démarrage de la boucle
2. Condition (p. ex. i < dinosaurs.length) - vérifiée avant chaque itération ; la boucle se termine lorsque la condition renvoie false
3. Mise à jour (p. ex. i++) - exécutée après chaque itération

La boucle for...of

La boucle for...of est une forme de boucle plus récente et plus élégante qui permet d'itérer sur les éléments d'une collection (tableaux, chaînes, maps, sets, etc.) sans avoir besoin de suivre les indices.

1// Structure de la boucle for...of
2for (let element of collection) {
3  // Bloc de code à exécuter pour chaque élément
4}

La boucle for...of est particulièrement utile lorsque nous nous intéressons aux éléments eux-mêmes, et non à leurs indices :

1// Vérifier la santé de chaque dinosaure avec for...of
2let dinosaurs = ["Tyrannosaurus", "Velociraptor", "Triceratops", "Stegosaurus", "Brachiosaurus"];
3
4for (let dinosaur of dinosaurs) {
5  console.log(`Vérification de l'état de santé : ${dinosaur}`);
6  // Code pour vérifier la santé d'un dinosaure précis...
7}
8
9// Vérifier les niveaux de réserves de nourriture pour différents types d'aliments
10let foodSupplies = {
11  meat: 500, // kg
12  leaves: 1200, // kg
13  fruit: 300, // kg
14  fish: 200 // kg
15};
16
17// Note : for...of ne fonctionne pas directement sur les objets, mais nous pouvons utiliser Object.entries()
18for (let [foodType, amount] of Object.entries(foodSupplies)) {
19  console.log(`Aliment : ${foodType}, Quantité : ${amount} kg`);
20
21  if (amount < 300) {
22    console.log(`ATTENTION : Faible réserve de ${foodType} ! Réapprovisionnement nécessaire.`);
23  }
24}
25
26// Résultat :
27// Aliment : meat, Quantité : 500 kg
28// Aliment : leaves, Quantité : 1200 kg
29// Aliment : fruit, Quantité : 300 kg
30// Aliment : fish, Quantité : 200 kg
31// ATTENTION : Faible réserve de fish ! Réapprovisionnement nécessaire.

La boucle for...in

La boucle for...in est conçue pour itérer sur les propriétés d'un objet. Elle renvoie les noms des clés (propriétés) de l'objet.

1// Structure de la boucle for...in
2for (let key in object) {
3  // Bloc de code à exécuter pour chaque clé
4}

Exemple d'utilisation à Jurassic Park :

1// Analyser les données d'un dinosaure
2let tyrannosaurus = {
3  species: "Tyrannosaurus Rex",
4  age: 12,
5  weight: 8000, // kg
6  length: 12, // m
7  height: 5.6, // m
8  speed: 27, // km/h
9  aggressionLevel: "Very high"
10};
11
12// Afficher toutes les informations sur le dinosaure
13for (let trait in tyrannosaurus) {
14  console.log(`${trait}: ${tyrannosaurus[trait]}`);
15}
16
17// Vérifier quels traits du dinosaure dépassent les valeurs de sécurité
18let safetyLimits = {
19  weight: 5000, // kg
20  speed: 25, // km/h
21  aggressionLevel: "High"
22};
23
24for (let parameter in safetyLimits) {
25  if (tyrannosaurus[parameter] > safetyLimits[parameter] ||
26      (parameter === "aggressionLevel" && tyrannosaurus[parameter] === "Very high")) {
27    console.log(`ATTENTION : Le paramètre ${parameter} dépasse les valeurs de sécurité !`);
28  }
29}
30
31// Résultat :
32// ATTENTION : Le paramètre weight dépasse les valeurs de sécurité !
33// ATTENTION : Le paramètre speed dépasse les valeurs de sécurité !
34// ATTENTION : Le paramètre aggressionLevel dépasse les valeurs de sécurité !

Note importante : La boucle for...in itère sur toutes les propriétés d'un objet, y compris celles héritées. Si nous voulons nous limiter aux seules propriétés propres de l'objet, nous pouvons utiliser la méthode hasOwnProperty() :

1for (let trait in tyrannosaurus) {
2  if (tyrannosaurus.hasOwnProperty(trait)) {
3    console.log(`${trait}: ${tyrannosaurus[trait]}`);
4  }
5}

Différences entre for...of et for...in

Il est important de comprendre la différence entre ces deux types de boucles :

• for...of - itère sur les valeurs des éléments d'une collection (tableaux, chaînes, etc.)
• for...in - itère sur les noms de propriétés (clés) d'un objet

1let dinosaurNames = ["T-Rex", "Raptor", "Triceratops"];
2
3// for...of (valeurs)
4for (let name of dinosaurNames) {
5  console.log(name); // "T-Rex", "Raptor", "Triceratops"
6}
7
8// for...in (indices/clés)
9for (let index in dinosaurNames) {
10  console.log(index); // "0", "1", "2"
11  console.log(dinosaurNames[index]); // "T-Rex", "Raptor", "Triceratops"
12}

La boucle while

La boucle while exécute un bloc de code tant qu'une condition spécifiée est vraie. Contrairement à la boucle for, la boucle while n'a qu'une condition.

1// Structure de la boucle while
2while (condition) {
3  // Bloc de code à exécuter
4}

À Jurassic Park, la boucle while peut être utilisée pour des processus qui n'ont pas de nombre d'itérations prédéterminé :

1// Système de surveillance de la température de l'incubateur à œufs
2let temperature = 37.5; // degrés Celsius
3let targetTemperature = 38.2;
4let temperatureIncrement = 0.1;
5
6console.log("Démarrage du processus de chauffage de l'incubateur...");
7
8while (temperature < targetTemperature) {
9  console.log(`Température actuelle : ${temperature.toFixed(1)}°C`);
10  temperature += temperatureIncrement;
11  // Code pour simuler le passage du temps...
12}
13
14console.log(`Température cible atteinte : ${temperature.toFixed(1)}°C`);
15
16// Système de surveillance du niveau d'alimentation
17let powerLevel = 100; // pourcentage
18let criticalLevel = 20;
19let powerDrop = 5;
20
21console.log("Surveillance du niveau d'alimentation après la panne du générateur principal...");
22
23while (powerLevel > criticalLevel) {
24  console.log(`Niveau d'alimentation : ${powerLevel}%`);
25  powerLevel -= powerDrop;
26  // Code pour simuler le passage du temps...
27}
28
29console.log(`ALARME ! Niveau d'alimentation critique : ${powerLevel}%`);
30console.log("Lancement du protocole d'urgence...");

La boucle do...while

La boucle do...while est similaire à la boucle while, mais avec une différence clé : le bloc de code est toujours exécuté au moins une fois avant que la condition ne soit vérifiée.

1// Structure de la boucle do...while
2do {
3  // Bloc de code à exécuter
4} while (condition);

Cette boucle est utile lorsque nous voulons que le code s'exécute au moins une fois, indépendamment de la condition :

1// Procédure de démarrage du système de sécurité
2let systemOperational = false;
3let attemptCount = 0;
4let maxAttempts = 3;
5
6do {
7  console.log("Tentative de démarrage du système de sécurité...");
8  attemptCount++;
9
10  // Simulation d'un comportement aléatoire du système
11  systemOperational = Math.random() > 0.5; // 50% de chance de succès
12
13  if (systemOperational) {
14    console.log("Système de sécurité démarré avec succès !");
15  } else {
16    console.log(`Échec du démarrage du système. Tentative ${attemptCount} sur ${maxAttempts}.`);
17  }
18
19} while (!systemOperational && attemptCount < maxAttempts);
20
21if (!systemOperational) {
22  console.log("ERREUR CRITIQUE : Le système de sécurité ne peut pas être démarré. Intervention technique requise !");
23}
24
25// Procédure d'évacuation
26let remainingPeople = 100;
27
28do {
29  console.log(`${remainingPeople} personnes restantes à évacuer.`);
30  // Simulation - chaque itération représente un groupe évacué
31  let groupSize = Math.floor(Math.random() * 20) + 10; // 10-29 personnes
32  remainingPeople -= groupSize;
33
34  // S'assurer de ne pas obtenir un nombre négatif
35  if (remainingPeople < 0) remainingPeople = 0;
36
37  console.log(`Groupe de ${groupSize} personnes évacué.`);
38
39} while (remainingPeople > 0);
40
41console.log("Tout le monde a été évacué. L'installation est vide.");

Interrompre et continuer les boucles : break et continue

JavaScript offre deux instructions spéciales pour contrôler le flux des boucles :

• break - arrête immédiatement la boucle et en sort
• continue - arrête l'itération courante et passe à la suivante

Exemple d'utilisation de break

1// Rechercher une section de clôture endommagée
2let fenceSections = [
3  { id: 1, status: "intact" },
4  { id: 2, status: "intact" },
5  { id: 3, status: "damaged" },
6  { id: 4, status: "intact" },
7  { id: 5, status: "intact" }
8];
9
10let damageFound = false;
11
12for (let i = 0; i < fenceSections.length; i++) {
13  console.log(`Vérification de la section #${fenceSections[i].id}...`);
14
15  if (fenceSections[i].status === "damaged") {
16    console.log(`ATTENTION ! Section endommagée #${fenceSections[i].id} trouvée !`);
17    console.log("Envoi de l'équipe de réparation...");
18    damageFound = true;
19    break; // Arrêter la boucle lorsqu'on trouve un dommage
20  }
21}
22
23if (!damageFound) {
24  console.log("Toutes les sections de clôture sont intactes.");
25}
26
27// Résultat :
28// Vérification de la section #1...
29// Vérification de la section #2...
30// Vérification de la section #3...
31// ATTENTION ! Section endommagée #3 trouvée !
32// Envoi de l'équipe de réparation...

Exemple d'utilisation de continue

1// Vérifier la santé des dinosaures, en sautant ceux qui sont en cours d'examen
2let dinosaurs = [
3  { name: "Rex", species: "Tyrannosaurus", available: true },
4  { name: "Blue", species: "Velociraptor", available: false }, // En cours d'examen
5  { name: "Spike", species: "Stegosaurus", available: true },
6  { name: "Cera", species: "Triceratops", available: false }, // En cours d'examen
7  { name: "Bronty", species: "Brontosaurus", available: true }
8];
9
10console.log("Démarrage des contrôles de santé quotidiens...");
11
12for (let i = 0; i < dinosaurs.length; i++) {
13  if (!dinosaurs[i].available) {
14    console.log(`Le dinosaure ${dinosaurs[i].name} (${dinosaurs[i].species}) est déjà en cours d'examen. On le saute.`);
15    continue; // Passer à l'itération suivante, en sautant le reste du code de cette itération
16  }
17
18  console.log(`Réalisation de l'examen du dinosaure ${dinosaurs[i].name} (${dinosaurs[i].species})...`);
19  console.log("Examen terminé. État de santé : bon.");
20}
21
22// Résultat :
23// Démarrage des contrôles de santé quotidiens...
24// Réalisation de l'examen du dinosaure Rex (Tyrannosaurus)...
25// Examen terminé. État de santé : bon.
26// Le dinosaure Blue (Velociraptor) est déjà en cours d'examen. On le saute.
27// Réalisation de l'examen du dinosaure Spike (Stegosaurus)...
28// Examen terminé. État de santé : bon.
29// Le dinosaure Cera (Triceratops) est déjà en cours d'examen. On le saute.
30// Réalisation de l'examen du dinosaure Bronty (Brontosaurus)...
31// Examen terminé. État de santé : bon.

Boucles imbriquées

Les boucles peuvent aussi être imbriquées les unes dans les autres, ce qui est utile lorsqu'on travaille avec des données multidimensionnelles :

1// Vérifier l'état des clôtures dans tous les secteurs de Jurassic Park
2
3// Tableau à deux dimensions : [secteur][section_de_clôture]
4let fenceStatus = [
5  // Secteur 1
6  [
7    { id: "1A", condition: "intact" },
8    { id: "1B", condition: "intact" },
9    { id: "1C", condition: "damaged" }
10  ],
11  // Secteur 2
12  [
13    { id: "2A", condition: "intact" },
14    { id: "2B", condition: "intact" },
15    { id: "2C", condition: "intact" }
16  ],
17  // Secteur 3
18  [
19    { id: "3A", condition: "intact" },
20    { id: "3B", condition: "damaged" },
21    { id: "3C", condition: "intact" }
22  ]
23];
24
25console.log("Démarrage de l'inspection des clôtures dans tous les secteurs...");
26
27for (let i = 0; i < fenceStatus.length; i++) {
28  console.log(`\nInspection du secteur ${i + 1} :`);
29
30  let allIntact = true;
31
32  for (let j = 0; j < fenceStatus[i].length; j++) {
33    let section = fenceStatus[i][j];
34    console.log(`  Section ${section.id} : ${section.condition}`);
35
36    if (section.condition === "damaged") {
37      allIntact = false;
38      console.log(`  ATTENTION : La section ${section.id} nécessite une réparation !`);
39    }
40  }
41
42  if (allIntact) {
43    console.log(`  Toutes les clôtures du secteur ${i + 1} sont intactes.`);
44  } else {
45    console.log(`  Clôtures endommagées détectées dans le secteur ${i + 1}.`);
46  }
47}
48
49// Résultat :
50// Démarrage de l'inspection des clôtures dans tous les secteurs...
51//
52// Inspection du secteur 1 :
53//   Section 1A : intact
54//   Section 1B : intact
55//   Section 1C : damaged
56//   ATTENTION : La section 1C nécessite une réparation !
57//   Clôtures endommagées détectées dans le secteur 1.
58//
59// Inspection du secteur 2 :
60//   Section 2A : intact
61//   Section 2B : intact
62//   Section 2C : intact
63//   Toutes les clôtures du secteur 2 sont intactes.
64//
65// Inspection du secteur 3 :
66//   Section 3A : intact
67//   Section 3B : damaged
68//   ATTENTION : La section 3B nécessite une réparation !
69//   Section 3C : intact
70//   Clôtures endommagées détectées dans le secteur 3.

Boucles infinies et comment les éviter

Une boucle infinie est une boucle qui ne se termine jamais parce que sa condition de fin n'est jamais remplie. À Jurassic Park, une boucle infinie dans le système de sécurité pourrait mener à la catastrophe, de la même manière qu'en programmation elle peut provoquer le gel de l'application ou consommer toutes les ressources.

Voici un exemple de boucle infinie :

1// ATTENTION : Ceci est une boucle infinie ! N'exécute pas ce code !
2while (true) {
3  console.log("Ceci s'affichera pour toujours !");
4}
5
6// Autre exemple de boucle infinie :
7for (let i = 0; i >= 0; i++) {
8  console.log(i); // Cela comptera pour toujours !
9}

Pour éviter les boucles infinies :

1. Assure-toi que la condition de fin de la boucle est atteignable
2. Mets toujours à jour les variables utilisées dans la condition de la boucle
3. Envisage d'ajouter une condition de sortie supplémentaire (p. ex. un compteur d'itérations)
4. Utilise l'instruction break comme mesure de sécurité

1// Version plus sûre avec une limite d'itérations
2let maxIterations = 1000;
3let iterationCounter = 0;
4
5// Exemple de surveillance sûre
6while (monitorPark()) {
7  // Code de surveillance du parc...
8
9  iterationCounter++;
10  if (iterationCounter >= maxIterations) {
11    console.log("Nombre maximum d'itérations atteint. Interruption de la boucle.");
12    break;
13  }
14}
15
16function monitorPark() {
17  // Logique de surveillance...
18  return true; // Normalement renverrait true ou false selon les conditions
19}

Pratiques et modèles de boucles

1. Choisir la bonne boucle

• for - quand tu connais le nombre exact d'itérations ou que tu travailles avec des indices
• for...of - quand tu veux itérer sur les éléments d'une collection (tableaux, chaînes)
• for...in - quand tu veux itérer sur les propriétés d'un objet
• while - quand la condition de fin dépend de facteurs externes
• do...while - quand tu veux que le code s'exécute au moins une fois

2. Optimiser les boucles

1// Boucle non optimale - la longueur du tableau est recalculée à chaque itération
2for (let i = 0; i < dinosaurs.length; i++) {
3  // Code...
4}
5
6// Boucle optimisée - la longueur du tableau est calculée une seule fois
7for (let i = 0, len = dinosaurs.length; i < len; i++) {
8  // Code...
9}

3. Sortie anticipée de la boucle

1// Sortie anticipée de la boucle après avoir trouvé le premier élément correspondant
2function findDinosaur(name) {
3  for (let dinosaur of dinosaurDatabase) {
4    if (dinosaur.name === name) {
5      return dinosaur; // Retour immédiat dès qu'on le trouve
6    }
7  }
8  return null; // Aucun dinosaure correspondant
9}

4. Éviter de modifier le compteur de boucle à l'intérieur de la boucle

1// Dangereux - modifier le compteur à l'intérieur de la boucle
2for (let i = 0; i < 10; i++) {
3  console.log(i);
4  if (i === 5) {
5    i = 8; // Sauter certaines itérations - cela peut être déroutant
6  }
7}
8
9// Meilleure approche - utiliser les instructions continue ou break
10for (let i = 0; i < 10; i++) {
11  if (i > 5 && i < 9) {
12    continue; // Sauter les itérations 6, 7, 8
13  }
14  console.log(i);
15}

Résumé

Les boucles en JavaScript, tout comme les procédures de routine de Jurassic Park, permettent l'exécution efficace d'opérations répétitives :

1. for - pour itérer sur un nombre précis de répétitions
2. for...of - pour itérer sur les éléments d'une collection
3. for...in - pour itérer sur les propriétés d'un objet
4. while - pour exécuter du code tant qu'une condition est vraie
5. do...while - pour exécuter du code au moins une fois, puis tant qu'une condition est vraie

De plus, les instructions de contrôle :

• break - arrête toute la boucle
• continue - passe à l'itération suivante

Le choix de la bonne boucle dépend du cas d'utilisation spécifique, mais en général tu devrais viser à :

• Utiliser la boucle la plus simple adaptée à la tâche
• Optimiser les boucles, surtout pour de grandes collections de données
• Éviter les boucles infinies
• Utiliser des noms de variables lisibles et une structure de code claire

Dans la prochaine leçon, nous examinerons les fonctions, qui permettent d'organiser le code en blocs réutilisables - essentielles pour maintenir l'ordre dans un système aussi complexe que Jurassic Park.

1// Boucles en JavaScript - automatiser les tâches du parc
2// for, while, for...of, for...in
3
4// === boucle for ===
5console.log("=== boucle for : Patrouille des enclos ===");
6
7let enclosures = ["T-Rex", "Raptor", "Triceratops", "Brachio", "Stego"];
8
9for (let i = 0; i < enclosures.length; i++) {
10  console.log("Enclos " + (i + 1) + ": " + enclosures[i] + " - OK");
11}
12
13// === boucle for...of ===
14console.log("\n=== for...of : Nourrissage ===");
15
16for (const dino of enclosures) {
17  console.log("Nourrissage : " + dino);
18}
19
20// === boucle for...in (pour les objets) ===
21console.log("\n=== for...in : Données du dinosaure ===");
22
23const trex = {
24  name: "Tyrannosaurus Rex",
25  weight: 7000,
26  diet: "carnivore",
27  sector: "A"
28};
29
30for (const key in trex) {
31  console.log(key + ": " + trex[key]);
32}
33
34// === boucle while ===
35console.log("\n=== while : Analyse des échantillons ===");
36
37let samples = 5;
38while (samples > 0) {
39  console.log("Analyse de l'échantillon n° " + samples + "...");
40  samples--;
41}
42console.log("Analyse terminée !");
43
44// === do...while ===
45console.log("\n=== do...while : Vérification ===");
46
47let attempts = 0;
48do {
49  attempts++;
50  console.log("Tentative de vérification n° " + attempts);
51} while (attempts < 3);
52
53// === break et continue ===
54console.log("\n=== break et continue ===");
55
56let data = [10, 25, 0, 42, 15, -1, 30];
57
58for (const value of data) {
59  if (value === -1) {
60    console.log("Valeur -1 trouvée, arrêt !");
61    break;
62  }
63  if (value === 0) {
64    console.log("On saute la valeur 0...");
65    continue;
66  }
67  console.log("Traitement : " + value);
68}
69
70// Ta mission :
71// 1. Utilise une boucle for pour afficher les nombres de 1 à 10
72// 2. Utilise while pour compter à rebours de 10 à 0
73// 3. Utilise for...of pour itérer sur un tableau
74