Boucles JavaScript : for, while, for…of, for…in

Toutes les boucles JS comparées — syntaxe, usage, break, continue et bonnes pratiques

9
Sections
20+
Exemples
ES6+
Standard

SECTION 01

for classique

🔢 La boucle à compteur
// Syntaxe : for (initialisation; condition; incrémentation)

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.

SECTION 02

while

🔄 Boucle conditionnelle

while répète le code tant que la condition est true. Utile quand tu ne sais pas combien d'itérations il faudra.

// Compter jusqu'à 5
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.

SECTION 03

do…while

Comme while, mais le corps s'exécute au moins une fois (la condition est testée après).

let input;
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);

SECTION 04

for…of — itérer les valeurs

✨ La boucle moderne pour les tableaux

for…of (ES6) itère sur les valeurs de tout objet itérable : tableaux, strings, Map, Set, NodeList…

const fruits = [« pomme », « banane », « orange »];

// 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).

SECTION 05

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) :

const user = ;

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.

✅ Alternatives modernes pour les objets
const user = ;

// 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.

SECTION 06

break et continue

// break — sort de la boucle immédiatement
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)

SECTION 07

Boucle vs méthodes de tableau

BesoinUtilisePourquoi
Transformer chaque élémentmap()Retourne un nouveau tableau
Filtrer des élémentsfilter()Retourne un nouveau tableau
Accumuler une valeurreduce()Retourne une valeur unique
Trouver un élémentfind()Retourne le premier match
Effet de bord (log, mutation externe)forEach()Pas de retour, pas de break
Besoin de break / continuefor…ofSeule boucle qui supporte break
Besoin de await dans la bouclefor…offorEach n'attend pas les await
Parcourir un objetObject.entries() + for…ofPlus sûr que for…in
Compteur / index complexefor classiqueContrôle total sur l'index
Condition dynamique (pas de collection)whileQuand 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.

SECTION 08

Tableau comparatif complet

BoucleItère surbreakawaitUsage
forIndex numériqueCompteur, index complexe
whileConditionNombre d'itérations inconnu
do…whileCondition (min 1 exécution)Validation, retries
for…ofValeurs (itérables)Tableaux, strings, Set, Map
for…inClés (objet)Propriétés d'objet (⚠️ pas tableaux)
forEach()Valeurs (tableau)Effets de bord simples

SECTION 09

Questions fréquentes

Pourquoi forEach ne supporte pas break ?
forEach est une méthode de tableau qui appelle un callback sur chaque élément. break est un mot-clé de boucle — il ne fonctionne que dans for, while et for…of. Pour arrêter prématurément, utilise for…of avec break, ou find() / some().
Pourquoi ne pas utiliser for…in sur un tableau ?
for…in itère les clés énumérables, y compris celles du prototype. Sur un tableau, les « clés » sont les index en string (« 0 », « 1 »…), pas les valeurs. L'ordre n'est pas garanti et des propriétés supplémentaires peuvent apparaître. Utilise toujours for…of pour les tableaux.
Comment utiliser await dans une boucle ?
Utilise for…of dans une fonction async : les await seront exécutés séquentiellement. forEach ne fonctionne pas car le callback n'est pas attendu. Si tu veux du parallèle, utilise Promise.all(array.map(async item => …)).
for…of fonctionne-t-il sur les objets ?
Non, les objets simples ne sont pas itérables par défaut. Utilise Object.entries(obj), Object.keys(obj) ou Object.values(obj) pour obtenir un tableau itérable, puis for…of dessus.

Boucles JavaScript — for, while, for…of, for…in comparés

Référence : MDN Boucles