Boucles JavaScript : for, while, for…of, for…in
Toutes les boucles JS comparées — syntaxe, usage, break, continue et bonnes pratiques
for classique
for (let i = 0; i < 5; i++)
// Parcourir un tableau par index
const fruits = [« pomme », « banane », « orange »];
for (let i = 0; i < fruits.length; i++)
// Boucle inversée
for (let i = fruits.length – 1; i >= 0; i—)
// Pas de 2
for (let i = 0; i < 10; i += 2)
Utilise toujours let (pas var) dans les boucles for. Avec var, la variable fuit hors du bloc et cause des bugs dans les callbacks.
while
while répète le code tant que la condition est true. Utile quand tu ne sais pas combien d'itérations il faudra.
let i = 0;
while (i < 5)
// Lire des données jusqu'à la fin
let line = readLine();
while (line !== null)
// Attendre une condition (polling)
while (!isReady())
⚠️ Assure-toi que la condition finit par devenir false, sinon c'est une boucle infinie qui bloque le navigateur. Vérifie toujours que la variable de contrôle est modifiée dans le corps de la boucle.
do…while
Comme while, mais le corps s'exécute au moins une fois (la condition est testée après).
do while (input <= 0);
// Demande au moins une fois, puis redemande si <= 0
// Utile pour les menus, les validations, les retries
let attempts = 0;
let success = false;
do while (!success && attempts < 3);
for…of — itérer les valeurs
for…of (ES6) itère sur les valeurs de tout objet itérable : tableaux, strings, Map, Set, NodeList…
// Itérer les valeurs
for (const fruit of fruits)
// Avec index → entries()
for (const [index, fruit] of fruits.entries())
// String — itère les caractères
for (const char of « Hello »)
// Set
const unique = new Set([1, 2, 3]);
for (const val of unique)
// Map
const map = new Map([[« a », 1], [« b », 2]]);
for (const [key, val] of map)
// NodeList (querySelectorAll)
for (const el of document.querySelectorAll(« .card »))
for…of est la boucle recommandée pour parcourir des tableaux quand tu as besoin de break, continue ou await (ce que forEach ne supporte pas).
for…in — itérer les clés d'un objet
for…in itère sur les clés énumérables d'un objet (les noms de propriétés) :
for (const key in user)
// « nom: Alice »
// « age: 25 »
// « ville: Paris »
⚠️ Ne jamais utiliser for…in sur un tableau. Il itère les clés (index en string), pas les valeurs, et peut inclure des propriétés héritées du prototype. Utilise for…of pour les tableaux.
// Object.keys → tableau des clés
Object.keys(user); // [« nom », « age », « ville »]
// Object.values → tableau des valeurs
Object.values(user); // [« Alice », 25, « Paris »]
// Object.entries → tableau de paires [clé, valeur]
Object.entries(user); // [[« nom », »Alice »], [« age »,25], [« ville », »Paris »]]
// Combiné avec for…of (plus sûr que for…in)
for (const [key, val] of Object.entries(user))
En pratique, Object.entries() + for…of est plus fiable que for…in car il ne parcourt pas les propriétés du prototype et retourne des paires clé/valeur directement.
break et continue
for (const user of users)
// continue — passe à l'itération suivante
for (const num of numbers)
// break + await (impossible avec forEach)
for (const url of urls)
Boucle vs méthodes de tableau
| Besoin | Utilise | Pourquoi |
|---|---|---|
| Transformer chaque élément | map() | Retourne un nouveau tableau |
| Filtrer des éléments | filter() | Retourne un nouveau tableau |
| Accumuler une valeur | reduce() | Retourne une valeur unique |
| Trouver un élément | find() | Retourne le premier match |
| Effet de bord (log, mutation externe) | forEach() | Pas de retour, pas de break |
| Besoin de break / continue | for…of | Seule boucle qui supporte break |
| Besoin de await dans la boucle | for…of | forEach n'attend pas les await |
| Parcourir un objet | Object.entries() + for…of | Plus sûr que for…in |
| Compteur / index complexe | for classique | Contrôle total sur l'index |
| Condition dynamique (pas de collection) | while | Quand le nombre d'itérations est inconnu |
Résumé : utilise les méthodes de tableau (map, filter, reduce) quand tu transformes des données. Utilise for…of quand tu as besoin de break, continue ou await. Utilise for classique quand tu as besoin de l'index.
Tableau comparatif complet
| Boucle | Itère sur | break | await | Usage |
|---|---|---|---|---|
| for | Index numérique | ✅ | ✅ | Compteur, index complexe |
| while | Condition | ✅ | ✅ | Nombre d'itérations inconnu |
| do…while | Condition (min 1 exécution) | ✅ | ✅ | Validation, retries |
| for…of | Valeurs (itérables) | ✅ | ✅ | Tableaux, strings, Set, Map |
| for…in | Clés (objet) | ✅ | ✅ | Propriétés d'objet (⚠️ pas tableaux) |
| forEach() | Valeurs (tableau) | ❌ | ❌ | Effets de bord simples |
Questions fréquentes
📦 Tableaux : map, filter, reduce
🔤 let, const, var
🧩 Destructuring
⏳ Promesses & async/await
➡️ Fonctions fléchées
⚡ Cours JavaScript complet
🏠 Hub Programmation
Boucles JavaScript — for, while, for…of, for…in comparés
Référence : MDN Boucles
