Imaginez devoir afficher 100 noms, calculer le total de 50 produits, ou vérifier l’état de 1 000 utilisateurs. Sans boucles, vous seriez obligé d’écrire le même code encore et encore.

Les boucles permettent à JavaScript de répéter une action automatiquement. C’est l’un des outils les plus puissants du langage, mais aussi l’un des plus dangereux si on ne le comprend pas bien.

Dans cette partie, vous allez apprendre à utiliser les boucles comme un humain logique, et non comme une machine incontrôlable.

1) Qu’est-ce qu’une boucle ? (explication simple)

Une boucle est une instruction qui dit à JavaScript :

“Répète cette action tant qu’une condition est vraie.”

Exemple humain :

• Tant qu’il reste des produits → calcule le prix
• Tant qu’il y a des messages → affiche-les
• Tant que l’utilisateur n’est pas connecté → refuse l’accès

En JavaScript, les boucles suivent exactement cette logique.

2) La boucle for — la plus utilisée

La boucle for est idéale quand vous savez combien de fois vous voulez répéter une action.

Structure générale :

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

Exemple simple : afficher les nombres de 1 à 5.

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

Ici :

• let i = 1 → point de départ
• i <= 5 → condition
• i++ → on avance

Exemple réel : afficher une liste de produits.

let produits = ["Clavier", "Souris", "Écran"];

for (let i = 0; i < produits.length; i++) {
  console.log(produits[i]);
}
  

3) La boucle while — tant que la condition est vraie

La boucle while est utilisée quand on ne sait pas exactement combien de fois la boucle va s’exécuter.

Exemple humain :

“Tant que l’utilisateur n’a pas saisi le bon mot de passe, redemande.”

Exemple simple :

let compteur = 1;

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

Attention : avec while, il est très facile de créer une boucle infinie si vous oubliez de modifier la condition.

Exemple réel :

let tentatives = 0;

while (tentatives < 3) {
  console.log("Tentative de connexion...");
  tentatives++;
}
  

4) forEach — la boucle la plus “humaine”

forEach est une méthode spécialement conçue pour les arrays. Elle est très populaire car elle est lisible et expressive.

Exemple :

let prenoms = ["Ali", "Nadia", "Omar"];

prenoms.forEach(function(nom) {
  console.log("Bonjour " + nom);
});
  

Avec une arrow function :

prenoms.forEach(nom => {
  console.log("Bonjour " + nom);
});
  

Ici, JavaScript parcourt automatiquement le tableau. Vous n’avez pas besoin de gérer l’index.

5) Quand utiliser chaque type de boucle ?

• for : quand vous connaissez le nombre d’itérations ou quand vous avez besoin de l’index.
• while : quand la répétition dépend d’une condition dynamique (connexion, attente, validation).
• forEach : quand vous parcourez un array et que vous voulez du code lisible.

✅ Règle simple : pour les tableaux, préférez forEach.

6) Les boucles infinies : l’erreur la plus dangereuse

Une boucle infinie se produit quand la condition ne devient jamais fausse.

Exemple d’erreur :

let i = 1;

while (i <= 5) {
  console.log(i);
  // i++ oublié !
}
  

Résultat : le navigateur se bloque.

Autres erreurs fréquentes :

• Condition incorrecte (< au lieu de <=)
• Modifier la mauvaise variable
• Boucle trop complexe

👉 Astuce pro : testez toujours vos boucles avec de petits nombres.

7) Exemples concrets de la vie réelle

Exemple 1 — Calcul du total d’un panier

let panier = [
  { nom: "Livre", prix: 120 },
  { nom: "Stylo", prix: 10 }
];

let total = 0;

panier.forEach(item => {
  total += item.prix;
});

console.log(total);
  

Exemple 2 — Affichage conditionnel

let utilisateurs = [
  { nom: "Ali", actif: true },
  { nom: "Sara", actif: false }
];

utilisateurs.forEach(user => {
  if (user.actif) {
    console.log(user.nom + " est actif");
  }
});
  

Les boucles sont un outil fondamental pour automatiser le travail. Une fois maîtrisées, elles permettent de traiter de grandes quantités de données avec très peu de code.

Dans la Partie 8, nous verrons comment JavaScript interagit avec le HTML via le DOM pour rendre les pages réellement interactives.