La boucle for...of

La boucle for...of permet de parcourir des collections de données.

Elle est très utilisée avec :

• Les tableaux
• Les chaînes de caractères
• Les Maps
• Les structures itérables

for...of est une syntaxe moderne et très lisible.

1. Syntaxe de base

for (const item of collection) {

    console.log(item);

}

2. Parcourir un tableau

const fruits = ["apple", "banana", "orange"];

for (const fruit of fruits) {

    console.log(fruit);

}

3. Comparaison avec for classique

Avant for...of, on utilisait souvent une boucle for classique.

for (let i = 0; i < fruits.length; i++) {

    console.log(fruits[i]);

}

for...of est souvent plus simple et plus lisible.

4. Parcourir une chaîne de caractères

for...of fonctionne aussi avec les chaînes de caractères.

const username = "Fred";

for (const letter of username) {

    console.log(letter);

}

5. Parcourir une Map

Une Map peut être parcourue avec for...of.

const cart = new Map();

cart.set("apple", 2);

cart.set("banana", 3);

for (const pair of cart) {

    console.log(pair);

}

Chaque élément de la Map contient :

[clé, valeur]

6. Destructuring avec Map

Le destructuring est souvent utilisé avec for...of.

const cart = new Map();

cart.set("apple", 2);

cart.set("banana", 3);

for (const [item, quantity] of cart) {

    console.log(item);

    console.log(quantity);

}

Ici :

• item reçoit la clé
• quantity reçoit la valeur

7. entries()

La méthode entries() retourne les paires clé → valeur.

for (const [key, value] of cart.entries()) {

    console.log(key);

    console.log(value);

}

Une Map utilise automatiquement entries() avec for...of.

8. keys()

La méthode keys() retourne seulement les clés.

for (const key of cart.keys()) {

    console.log(key);

}

9. values()

La méthode values() retourne seulement les valeurs.

for (const value of cart.values()) {

    console.log(value);

}

10. break

La boucle peut être arrêtée avec :

break

for (const fruit of fruits) {

    if (fruit === "banana") {

        break;

    }

    console.log(fruit);

}

11. continue

L’instruction continue saute une itération.

for (const fruit of fruits) {

    if (fruit === "banana") {

        continue;

    }

    console.log(fruit);

}

Ici, banana est ignoré.

12. for...of vs forEach()

13. Les structures itérables

for...of fonctionne avec les structures :

iterables

Exemples :

• Array
• String
• Map
• Set

14. Erreur fréquente

for...of ne fonctionne pas directement avec les objets simples.

const user = {

    name: "Fred"

};

for (const value of user) {

    console.log(value);

}

Ce code produit une erreur, car les objets simples ne sont pas itérables.

15. Bonnes pratiques

• Utiliser for...of pour les collections
• Utiliser le destructuring avec les Maps
• Préférer for...of pour la lisibilité
• Utiliser break lorsque nécessaire
• Choisir la boucle adaptée au besoin

Résumé rapide