Les Boucles en JavaScript
Les boucles sont utilisées pour répéter une action plusieurs fois sans avoir à réécrire le même code. Elles permettent d’exécuter un bloc
de code tant qu’une condition est vraie.
En JavaScript, nous avons 3 types principaux de boucles :
1. for → Utilisée quand on sait combien de fois on veut répéter le code.
2. while → Utilisée quand on ne sait pas exactement combien de fois la boucle va s'exécuter, mais on veut qu’elle continue tant qu’une
condition est vraie.
3. do...while → Similaire à while , sauf que le code est exécuté au moins une fois avant de vérifier la condition.
1. La boucle for
Principe : La boucle for est idéale quand on connaît le nombre exact d’itérations (combien de fois on doit répéter le code).
Syntaxe :
1 for (initialisation; condition; incrémentation) {
2 // Code à exécuter
3 }
Initialisation : on définit une variable compteur (ex: let i = 0 ).
Condition : tant que cette condition est true , la boucle continue (ex: i < 5 ).
Incrémentation : à chaque tour, on modifie le compteur (ex: i++ pour augmenter de 1).
Exemple : Afficher les nombres de 1 à 5
1 for (let i = 1; i <= 5; i++) {
2 [Link]("Tour numéro : " + i);
3 }
Résultat attendu :
1 Tour numéro : 1
2 Tour numéro : 2
3 Tour numéro : 3
4 Tour numéro : 4
5 Tour numéro : 5
2. La boucle while
Principe : La boucle while continue de s’exécuter tant que la condition est true .
Syntaxe :
1 while (condition) {
2 // Code à exécuter
3 }
Tant que la condition est vraie, le code se répète en boucle.
Il faut changer la condition dans la boucle (sinon on a une boucle infinie ❌).
Exemple : Afficher les nombres de 1 à 5
1 let i = 1;
2 while (i <= 5) {
3 [Link]("Tour numéro : " + i);
4 i++; // On incrémente sinon la boucle ne s’arrête jamais !
5 }
Résultat attendu :
1 Tour numéro : 1
2 Tour numéro : 2
3 Tour numéro : 3
4 Tour numéro : 4
5 Tour numéro : 5
Attention : Si on oublie d'incrémenter i , la boucle ne s’arrêtera jamais et bloquera le programme !
3. La boucle do...while
Principe : La boucle do...while est comme while , mais elle s’exécute au moins une fois, même si la condition est fausse dès le
début.
Syntaxe :
1 do {
2 // Code à exécuter
3 } while (condition);
On exécute d’abord le code.
Ensuite, on vérifie la condition.
Si la condition est vraie, la boucle continue.
Exemple : Demander à l'utilisateur d'entrer un nombre positif
1 let nombre;
2 do {
3 nombre = parseInt(prompt("Entrez un nombre positif :"));
4 } while (nombre < 0); // Si l'utilisateur entre un nombre négatif, on redemande
5
6 [Link]("Vous avez entré : " + nombre);
Cas particulier :
Si l’utilisateur entre -5 la première fois, la boucle va redemander une entrée.
Si l’utilisateur entre 10 directement, la boucle ne se répète pas.
4. Boucles et tableaux (Array)
Un des cas les plus courants où on utilise les boucles est avec les tableaux ( Array ).
Exemple : Afficher chaque élément d'un tableau avec for
1 let fruits = ["Pomme", "Banane", "Orange", "Mangue"];
2
3 for (let i = 0; i < [Link]; i++) {
4 [Link](fruits[i]);
5 }
Résultat attendu :
1 Pomme
2 Banane
3 Orange
4 Mangue
Explication :
[Link] donne le nombre total d'éléments dans le tableau.
On utilise fruits[i] pour afficher chaque élément.
5. Boucles et break / continue
On peut interrompre ou sauter une itération avec break et continue .
break : Stoppe complètement la boucle.
continue : Passe à l’itération suivante sans exécuter le reste du code.
Exemple : Arrêter la boucle quand on trouve "Banane"
1 let fruits = ["Pomme", "Banane", "Orange", "Mangue"];
2
3 for (let i = 0; i < [Link]; i++) {
4 if (fruits[i] === "Banane") {
5 [Link]("Banane trouvée, on arrête !");
6 break; // Arrête la boucle
7 }
8 [Link](fruits[i]);
9 }
Résultat attendu :
1 Pomme
2 Banane trouvée, on arrête !
Exemple : Ignorer "Banane" et continuer avec les autres fruits
1 let fruits = ["Pomme", "Banane", "Orange", "Mangue"];
2
3 for (let i = 0; i < [Link]; i++) {
4 if (fruits[i] === "Banane") {
5 continue; // Ignore cette itération et passe au suivant
6 }
7 [Link](fruits[i]);
8 }
Résultat attendu :
1 Pomme
2 Orange
3 Mangue
Conclusion
Type de boucle Utilisation recommandée
for Quand on connaît le nombre d’itérations à faire.
while Quand on ne sait pas combien de fois la boucle
doit tourner.
do...while Quand on veut exécuter au moins une fois le code
avant de tester la condition.
Bonnes pratiques :
Toujours éviter les boucles infinies qui peuvent crasher le programme.
Utiliser break si on veut arrêter une boucle en cours.
Utiliser continue si on veut sauter une itération et passer à la suivante.
Les Boucles for...in , for...of et forEach() en JavaScript
En plus des boucles classiques ( for , while , do...while ), JavaScript propose trois boucles spécifiques pour parcourir des objets et
des tableaux :
for...in → Parcourt les clés d'un objet ou d'un tableau.
for...of → Parcourt les valeurs d'un tableau ou d'un objet itérable.
forEach() → Méthode utilisée uniquement pour les tableaux.
1. La boucle for...in (Parcours des indices ou clés)
Elle est utilisée pour parcourir les propriétés d'un objet ou les indices d'un tableau.
Syntaxe
1 for (let clé in objetOuTableau) {
2 // Code à exécuter
3 }
Exemple avec un objet
1 const personne = { nom: "Yassine", age: 25, ville: "Rabat" };
2
3 for (let clé in personne) {
4 [Link](clé + " : " + personne[clé]);
5 }
Résultat :
1 nom : Yassine
2 age : 25
3 ville : Rabat
Explication :
clé prend les noms des propriétés ( nom , age , ville ).
On accède à la valeur avec personne[clé] .
Exemple avec un tableau
1 const fruits = ["Pomme", "Banane", "Orange"];
2
3 for (let index in fruits) {
4 [Link](index + " : " + fruits[index]);
5 }
Résultat :
1 0 : Pomme
2 1 : Banane
3 2 : Orange
2. La boucle for...of (Parcours des valeurs)
Elle sert à parcourir directement les valeurs d'un tableau ou d'un objet itérable (comme une chaîne de caractères).
Syntaxe
1 for (let valeur of tableauOuChaîne) {
2 // Code à exécuter
3 }
Exemple avec un tableau
1 const nombres = [10, 20, 30];
2
3 for (let nombre of nombres) {
4 [Link](nombre);
5 }
Résultat :
1 10
2 20
3 30
Explication :
Contrairement à for...in , on récupère directement la valeur et non l’indice.
Exemple avec une chaîne de caractères
1 const mot = "Hello";
2
3 for (let lettre of mot) {
4 [Link](lettre);
5 }
Résultat :
1 H
2 e
3 l
4 l
5 o
Utile pour parcourir une chaîne caractère par caractère !
3. La méthode forEach() (Uniquement pour les tableaux)
C'est une méthode des tableaux qui applique une fonction sur chaque élément du tableau.
Syntaxe
1 [Link]((valeur, index, tableau) => {
2 // Code à exécuter
3 });
Exemple simple
1 const couleurs = ["Rouge", "Vert", "Bleu"];
2
3 [Link]((couleur) => {
4 [Link](couleur);
5 });
Résultat :
1 Rouge
2 Vert
3 Bleu
Exemple avec index
1 const animaux = ["Chat", "Chien", "Lapin"];
2
3 [Link]((animal, index) => {
4 [Link](index + " : " + animal);
5 });
Résultat :
1 0 : Chat
2 1 : Chien
3 2 : Lapin
Différence avec for...of :
forEach() ne peut pas être interrompu ( break ne fonctionne pas).
forEach() est souvent utilisé pour appliquer une action sur chaque élément.
Quelle boucle choisir ?
Boucle Utilisation principale
for...in Parcourir les clés d'un objet ou les indices d'un
tableau.
for...of Parcourir directement les valeurs d'un tableau ou
d'un objet itérable.
forEach() Exécuter une fonction sur chaque élément d'un
tableau (pas d'arrêt possible).
