Les Boucles en JavaScript : Le Pouvoir de la Répétition ! 🌀

Salut les coding ninjas en herbe ! Prêts à découvrir comment rendre votre ordinateur super efficace sans vous fatiguer les doigts ? Aujourd’hui, on va parler des boucles en JavaScript, ces outils magiques qui permettent de répéter des actions. Imaginez devoir écrire 100 fois “Bonjour” : vous le feriez à la main ? Non ! On va apprendre à l’ordi à le faire pour nous. C’est comme avoir un petit assistant qui fait les tâches répétitives pendant que vous, vous réfléchissez à des trucs plus cools !

1. C’est quoi une boucle, au juste ?

Une boucle, en programmation, c’est tout simplement une instruction qui répète un bloc de code tant qu’une certaine condition est vraie ou pour un nombre défini de fois. C’est le principe du “tant que tu n’as pas fini tes devoirs, tu ne joues pas à la console !” ou “pour chaque bonbon dans le paquet, je le mange !”. Simple, non ?

Elles sont super utiles pour :

• Parcourir les éléments d’une liste (comme la liste de courses).
• Répéter une action jusqu’à ce qu’un événement se produise (attendre que l’utilisateur clique sur un bouton).
• Générer des séquences (comme les nombres de 1 à 100).

2. La Boucle for : La plus classique, la plus structurée

La boucle for (pour) est votre meilleure amie quand vous savez combien de fois vous voulez répéter quelque chose. C’est comme dire “pour chaque jour de la semaine, je mets mes chaussettes sales dans le panier”.

Syntaxe de base :

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

• initialisation : On démarre le compteur (ex: let i = 0). Se fait une seule fois au début.
• condition : Tant que cette condition est vraie, la boucle continue (ex: i < 5). Si elle est fausse, la boucle s’arrête.
• incrémentation (ou décrémentation) : On met à jour le compteur à la fin de chaque tour (ex: i++ qui veut dire i = i + 1).<br><br>Exemple concret : Compter jusqu’à 5

console.log("On compte avec la boucle for :");
for (let i = 0; i < 5; i++) { // i commence à 0, s'exécute tant que i est inférieur à 5, et i augmente de 1 à chaque tour
  console.log("C'est le tour numéro " + i); // Va afficher 0, 1, 2, 3, 4
}
console.log("Boucle for terminée !");

Pourquoi c’est cool ? C’est compact et clair pour les compteurs.

3. La Boucle while : Quand on ne sait pas quand ça va s’arrêter

La boucle while (tant que) est parfaite quand vous voulez répéter quelque chose tant qu’une condition reste vraie, mais vous ne savez pas forcément combien de fois ça va se répéter à l’avance. C’est comme “tant qu’il y a du soleil, je mets mes lunettes de soleil”. On ne sait pas combien de temps le soleil va rester !

Syntaxe de base :

while (condition) {
  // Code à répéter
  // Pensez à modifier la condition DANS la boucle pour éviter une boucle infinie !
}

Attention au piège ! Si votre condition ne devient jamais fausse, la boucle tourne à l’infini, et votre programme va planter (ou faire surchauffer votre PC ! 🔥). On appelle ça une boucle infinie.

Exemple concret : Attendre qu’un nombre soit pair

console.log("On attend un nombre pair avec la boucle while :");
let nombre = 1;
while (nombre % 2 !== 0) { // Tant que le nombre n'est PAS pair (le reste de la division par 2 n'est PAS 0)
  console.log("Le nombre " + nombre + " n'est pas pair... On incrémente !");
  nombre++; // On augmente le nombre de 1 à chaque tour
}
console.log("HOURRA ! Le nombre " + nombre + " est enfin pair !"); // Va afficher 2

Pourquoi c’est cool ? Idéal pour les scénarios où la fin est incertaine (ex: une saisie utilisateur, un jeu).

4. La Boucle do...while : Au moins une fois, c’est promis !

La boucle do...while (fais…tant que) est un peu la cousine de while. La différence principale, et elle est de taille, c’est que le bloc de code est exécuté au moins une fois, avant même que la condition ne soit vérifiée. C’est comme dire "Mange une bouchée de brocoli (même si tu n’aimes pas), PUIS, tant qu’il y en a, mange-en ! ".

Syntaxe de base :

do {
  // Code à répéter
  // Ce code s'exécute au moins une fois
} while (condition); // La condition est vérifiée APRÈS le premier tour

Exemple concret : Demander un mot de passe (au moins une fois)

console.log("
On demande un mot de passe avec do...while :");
let motDePasse;
do {
  motDePasse = prompt("Entrez le mot de passe secret (indice: 'secret')"); // prompt est une fonction qui demande une saisie à l'utilisateur
} while (motDePasse !== "secret"); // Tant que le mot de passe n'est PAS "secret"
console.log("Bienvenue, agent secret !");

Pourquoi c’est cool ? Quand vous avez besoin que l’action se produise au moins une fois, typiquement pour la saisie utilisateur.

5. La Boucle for...in : Explorer les objets 🕵️‍♂️

La boucle for...in est spécialement conçue pour parcourir les propriétés (les “clés”) d’un objet. Imaginez que votre objet est une maison, et for...in vous permet de lister toutes les pièces (salon, cuisine, chambre…).

Syntaxe de base :

for (let cle in objet) {
  // Code à exécuter pour chaque clé
  // 'cle' contiendra le nom de la propriété (string)
}

Exemple concret : Lister les infos d’un personnage

console.log("
On explore un objet avec for...in :");
let personnage = {
  nom: "Alice",
  age: 25,
  metier: "Développeuse JS",
  ville: "Bruxelles"
};

for (let propriete in personnage) {
  console.log(propriete + " : " + personnage[propriete]);
}
// Va afficher :
// nom : Alice
// age : 25
// metier : Développeuse JS
// ville : Bruxelles

Pourquoi c’est cool ? Ultra pratique pour inspecter le contenu d’un objet dont on ne connaît pas toutes les propriétés à l’avance.

6. La Boucle for...of : Parcourir les éléments directement (listes, chaînes) 🚀

La boucle for...of est votre go-to quand vous voulez parcourir directement les valeurs d’éléments itérables (comme les tableaux/arrays ou les chaînes de caractères/strings). Plus besoin de passer par un index ! C’est comme dire “pour chaque élève de la classe, je lui donne un cookie” – on s’intéresse directement à l’élève, pas à son numéro dans la liste.

Syntaxe de base :

for (let element of iterable) {
  // Code à exécuter pour chaque élément
  // 'element' contiendra la valeur de l'élément actuel
}

Exemple concret : Lister vos légumes préférés

console.log("
On parcourt un tableau avec for...of :");
let legumesPreferes = ["Brocoli", "Carotte", "Tomate", "Aubergine"];

for (let legume of legumesPreferes) {
  console.log("J'aime bien le " + legume);
}
// Va afficher :
// J'aime bien le Brocoli
// J'aime bien le Carotte
// J'aime bien le Tomate
// J'aime bien le Aubergine

// Ça marche aussi pour les chaînes de caractères !
console.log("
On parcourt une chaîne de caractères avec for...of :");
let mot = "Salut";
for (let lettre of mot) {
  console.log("La lettre est : " + lettre);
}
// Va afficher : S, a, l, u, t (chacun sur une ligne)

Pourquoi c’est cool ? C’est super lisible et direct pour parcourir les contenus de listes ou de chaînes. Beaucoup plus simple que for avec un index si vous n’avez pas besoin de cet index.

7. Les Instructions Spéciales : break et continue

Parfois, on veut contrôler le déroulement de nos boucles de manière plus fine. C’est là qu’interviennent break et continue.

break : Je m’arrête là, c’est fini ! 🛑

L’instruction break permet de sortir immédiatement d’une boucle (qu’elle soit for, while, do...while, for...in ou for...of). Dès que break est rencontré, la boucle s’arrête net, et le programme continue juste après la boucle.

Exemple concret : Trouver le premier nombre divisible par 7

console.log("
On cherche le premier nombre divisible par 7 avec break :");
for (let i = 1; i <= 20; i++) {
  console.log("Test de " + i);
  if (i % 7 === 0) { // Si i est divisible par 7
    console.log("TADAAAM ! Le premier nombre divisible par 7 est " + i);
    break; // On sort de la boucle ! Inutile de chercher plus loin.
  }
}
console.log("La boucle est finie (merci break !)");

continue : Ce tour-ci, je le zappe ! ⏭️

L’instruction continue permet de passer à l’itération suivante de la boucle, en ignorant le reste du code dans le bloc de la boucle pour le tour actuel. C’est comme dire “ce brocoli-là, il est moche, je passe au suivant !”.

Exemple concret : Afficher les nombres pairs seulement

console.log("
On affiche les nombres pairs (et on zappe les impairs) avec continue :");
for (let i = 0; i <= 10; i++) {
  if (i % 2 !== 0) { // Si le nombre est impair
    console.log(i + " est impair, on le zappe !");
    continue; // On passe directement au tour suivant, sans exécuter la ligne d'en bas.
  }
  console.log(i + " est pair, on l'affiche !"); // Cette ligne ne s'exécute que pour les nombres pairs
}
console.log("Fin de la boucle de nombres pairs.");

Pourquoi c’est cool ? break et continue vous donnent un contrôle fin sur le flux de vos boucles, pour des logiques plus complexes et optimisées.

8. En Résumé, mes petits génies !

Les boucles sont ESSENTIELLES en programmation. Elles vous permettent d’automatiser des tâches, de parcourir des données et de rendre vos programmes beaucoup plus dynamiques et efficaces.

• for : Quand on sait combien de fois on répète.
• while : Quand on répète tant qu’une condition est vraie (et on ne sait pas le nombre exact de tours).
• do...while : Quand on veut que ça s’exécute au moins une fois, puis tant qu’une condition est vraie.
• for...in : Pour parcourir les propriétés des objets.
• for...of : Pour parcourir les valeurs des éléments itérables (tableaux, chaînes).
• break : Pour sortir complètement de la boucle.
• continue : Pour passer au tour suivant de la boucle.

N’hésitez pas à jouer avec ces exemples, à les modifier, à faire des erreurs (c’est comme ça qu’on apprend le mieux !). Le monde des boucles vous ouvre des portes vers des programmes bien plus puissants ! À vous de jouer ! 🚀