05
Boucles & Itération
Guide Complet : 8 Façons d'Itérer
JavaScript offre de nombreuses façons d'itérer. Chacune a ses avantages selon le contexte.
🔄 Les 8 Types de Boucles
1️⃣ for (Classique)
for (let i = 0; i < 5; i++) {
console.log(i);
}
// Contrôle total
for (let i = 10; i > 0; i -= 2) {
console.log(i); // 10, 8, 6...
}
⚡ Rapide
Meilleure performance brute
2️⃣ for...of (Valeurs)
const arr = ['a', 'b', 'c'];
for (const val of arr) {
console.log(val); // a, b, c
}
// Fonctionne sur tout itérable
for (const char of "Hello") {
console.log(char);
}
⚡ Rapide
Moderne, lisible, itérables
3️⃣ for...in (Clés)
const obj = {a: 1, b: 2};
for (const key in obj) {
console.log(key, obj[key]);
}
// ⚠️ Éviter sur arrays
// Itère aussi sur le prototype
⚡ Moyen
Pour objets uniquement
4️⃣ while
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
// Condition en début
// Peut ne jamais s'exécuter
⚡ Rapide
Condition inconnue à l'avance
5️⃣ do...while
let i = 0;
do {
console.log(i);
i++;
} while (i < 5);
// S'exécute AU MOINS 1 fois
// Condition à la fin
⚡ Rapide
Garantit 1 exécution minimum
6️⃣ forEach (Méthode)
arr.forEach((val, idx, arr) => {
console.log(val, idx);
});
// ⚠️ Pas de break/continue
// ⚠️ Pas de return early
⚡ Moyen
Fonctionnel, mais inflexible
7️⃣ map/filter/reduce
// Transformation
const doubled = arr.map(x => x * 2);
// Filtrage
const evens = arr.filter(x => x % 2 === 0);
// Accumulation
const sum = arr.reduce((a, b) => a + b, 0);
⚡ Moyen
Immutable, chaînable
8️⃣ Récursion
function countdown(n) {
if (n <= 0) return;
console.log(n);
countdown(n - 1);
}
// ⚠️ Stack overflow si trop profond
⚡ Lent
Élégant mais coûteux
📊 Tableau Comparatif
| Type | Performance | Break/Continue | Cas d'usage |
|---|---|---|---|
for |
Rapide | ✅ Oui | Contrôle total, performance critique |
for...of |
Rapide | ✅ Oui | Itérer sur valeurs (arrays, strings, Sets...) |
for...in |
Moyen | ✅ Oui | Itérer sur clés d'objets |
forEach |
Moyen | ❌ Non | Style fonctionnel, pas besoin de break |
map/filter |
Moyen | ❌ Non | Transformation/filtrage immutable |
🎬 Visualiseur d'Itération
Voyez comment chaque boucle parcourt un tableau.
Cliquez sur Exécuter pour démarrer
⚠️ Pièges Courants
1. Boucle infinie
// ❌ Oubli d'incrémenter
let i = 0;
while (i < 10) {
console.log(i); // Boucle infinie !
// i++; <- Oublié
}
2. for...in sur array
// ❌ Mauvaise pratique
const arr = [1, 2, 3];
for (const i in arr) {
console.log(i); // "0", "1", "2" (strings!)
}
// ✅ Utilisez for...of
for (const val of arr) {
console.log(val); // 1, 2, 3
}
3. Modifier array pendant
forEach
// ❌ Comportement imprévisible
arr.forEach((val, i) => {
arr.splice(i, 1); // Modifie pendant itération
});
// ✅ Utilisez filter
arr = arr.filter(val => condition);