La boucle while exécute un bloc de code tant qu'une condition spécifiée est vraie. Elle existe sous deux formes principales :

// Forme basique
while (condition) {
    // Instructions
}

// Forme do...while : exécute au moins une fois
do {
    // Instructions
} while (condition);

Boucle for

for classique

La boucle for traditionnelle est la plus ancienne et la plus polyvalente pour parcourir des structures de données comme les tableaux, les objets et les chaînes de caractères.

// Parcours d'un tableau
const valeurs = [10, 20, 30];
for (let idx = 0; idx < valeurs.length; idx++) {
    console.log(valeurs[idx]);
}

// Parcours d'un objet via ses clés
const personne = { emploi: 'développeur', nom: 'Alice' };
const clefs = Object.keys(personne);
for (let i = 0; i < clefs.length; i++) {
    console.log(personne[clefs[i]]);
}

// Parcours d'une chaîne
const texte = 'xyz';
for (let pos = 0; pos < texte.length; pos++) {
    console.log(texte[pos]);
}

for...in

Introduite en ES5, cette boucle itère sur les propriétés énumérables d'un objet, y compris celles héritées, dans un ordre arbitraire.

// Parcours d'un tableau (les indices sont les clés)
const tableau = [10, 20, 30];
for (let cle in tableau) {
    console.log(cle); // 0, 1, 2
    console.log(tableau[cle]); // 10, 20, 30
}

// Parcours d'un objet
const utilisateur = { poste: 'ingénieur', pseudo: 'Bob' };
for (let propriete in utilisateur) {
    console.log(propriete); // poste, pseudo
    console.log(utilisateur[propriete]); // ingénieur, Bob
}

// Parcours d'une chaîne
const mot = 'abc';
for (let idx in mot) {
    console.log(idx); // 0, 1, 2
    console.log(mot[idx]); // a, b, c
}

for...of

Cette boucle travaille sur des objets itérables comme Array, Map, Set, String, TypedArray, ou les objets arguments. Elle itère sur les valeurs des propriétés.

// Itération d'un tableau
const nombres = [1, 2, 3];
for (let val of nombres) {
    console.log(val); // 1, 2, 3
}

// Itération d'une chaîne
const phrase = 'salut';
for (let car of phrase) {
    console.log(car); // s, a, l, u, t
}

// Itération d'un TypedArray
const tampon = new Uint8Array([0x0a, 0xf0]);
for (let octet of tampon) {
    console.log(octet); // 10, 240
}

// Itération d'une Map
const association = new Map([['cle1', 100], ['cle2', 200]]);
for (let [k, v] of association) {
    console.log(k, v); // cle1 100, cle2 200
}

// Itération d'un Set
const ensemble = new Set([5, 10, 10, 15]);
for (let element of ensemble) {
    console.log(element); // 5, 10, 15
}

for await...of

Cette structure itère sur des objets itérables asynchrones ou synchrones. Elle doit être utilisée dans une fonction async.

async function* generateurAsync() {
    let compteur = 0;
    while (compteur < 3) {
        yield compteur++;
    }
}

(async () => {
    for await (let num of generateurAsync()) {
        console.log(num); // 0, 1, 2
    }
})();

forEach

Disponible en ES5, cette méthode applique une fonction de rappel à chaque élément valide d'un tableau, en ordre ascendant.

// Parcours d'un tableau
const elements = [1, 2, 3];
elements.forEach((item, index) => {
    console.log(index); // 0, 1, 2
    console.log(item); // 1, 2, 3
});

// Parcours d'un objet via ses clés
const donnees = { tache: 'coder', nom: 'Eve' };
const lesClefs = Object.keys(donnees);
lesClefs.forEach((cle) => {
    console.log(cle); // tache, nom
    console.log(donnees[cle]); // coder, Eve
});

map

Cette méthode crée un nouveau tableau en appliquant une fonction à chaque élément du tableau d'origine.

// Transformation d'un tableau
const source = [1, 2, 3];
const double = source.map((v) => v * 2);
console.log(double); // [2, 4, 6]

Comparaison des boucles

Différences d'utilisation

La boucle for classique est la plus fondamentale, idéale pour les tableaux ou structures de type tableau. Pour les objets purs, for...in est recommandé car il énumère les propriétés. for...of convient aux objets itérables, tandis que for await...of gère les opérations asynchrones. forEach est une version améliorée pour les tableaux, mais ne modifie pas l'original. map est optimal pour créer un nouveau tableau transformé.

Différences fonctionnelles

forEach et map ne permettent pas d'interrompre la boucle avec break ou return. for await...of supporte les opérations asynchrones. Pour les objets, for...in est plus pratique. Pour les tableaux, si l'index n'est pas nécessaire, for...of peut être utilisé avec break. Lors de la sélection d'éléments, filter est préférable.

Différences de performance

Dans des conditions standard, la performance décroît ainsi : for > for...of > forEach > map > for...in. La boucle for est la plus rapide car elle évite les appels de fonction supplémentaires. for...of expolite directement les itérateurs. forEach ajoute une surcharge due à son contexte. map génère un nouveau tableau, ce qui augmente l'overhead. for...in est le moins performant en raison de l'énumération des propriétés.

Conseils pratiques

Choisir la boucle appropriée selon le besoin : utiliser map pour transformer un tableau, for, forEach ou for...of pour itérer sur un tableau, for...in pour les objets, for...of pour les itérateurs, et filter pour la sélection.