For…of : Explorer et manipuler les données avec simplicité

En JavaScript, le parcours des données est une tâche récurrente, qu’il s’agisse de parcourir des tableaux, des objets, ou des structures plus complexes. Plusieurs outils s’offrent à nous, comme les boucles classiques, Object.entries, ou encore Object.keys (Voir l’article Parcourir et manipuler des objets efficacement avec JavaScript).

Mais aujourd’hui, intéressons-nous à une méthode moderne, élégante et lisible : la boucle for...of.

For...of est un outil conçu spécifiquement pour parcourir des données itérables, comme des tableaux ou des objets transformés via Object.keys. Sa valeur ajoutée ? Une syntaxe claire, un accès direct aux éléments, et une meilleure lisibilité, même pour des structures complexes. Pour mieux comprendre l’intérêt de for...of, comparons-le avec d’autres méthodes couramment utilisées.

Alternatives : for, for...in et for...of comparées avec Object.entries et Object.keys

Pour bien saisir l’intérêt de for...of, commençons par examiner les alternatives disponibles et leurs usages.

Comme nous pouvons le constater, chaque méthode a ses forces et ses faiblesses. Explorons maintenant en détail l’utilisation de for...of à travers des exemples concrets.

Débuter avec for...of

Prenons un exemple simple pour explorer comment fonctionne for...of avec des tableaux. Imaginons que nous travaillons avec une liste de groupes musicaux :

const bands = [
  { 
    name: "Led Zeppelin", 
    wikipedia: "https://fr.wikipedia.org/wiki/Led_Zeppelin", 
    description: "Un des groupes les plus influents du hard rock."
  },
  { 
    name: "Deep Purple", 
    wikipedia: "https://fr.wikipedia.org/wiki/Deep_Purple", 
    description: "Connu pour l’iconique Smoke on the Water."
  },
  { 
    name: "Black Sabbath", 
    wikipedia: "https://fr.wikipedia.org/wiki/Black_Sabbath", 
    description: "Pionniers du heavy metal."
  }
];

Pour afficher chaque groupe dans la console, une boucle classique for pourrait être employée. Mais nous devrions alors gérer manuellement les index et accéder aux éléments avec bands[i], ce qui peut rapidement alourdir le code.

Avec for...of, le parcours devient beaucoup plus simple :

for (const band of bands) {
  console.log(band.name, band.wikipedia, band.description);
}

Chaque élément du tableau est directement accessible dans la boucle via la variable band. Cela élimine le besoin d’utiliser un index ou des appels manuels au tableau, rendant le code plus fluide et lisible. Avec ce code, chaque élément du tableau bands est directement extrait et affiché dans la console sous la forme de ses propriétés individuelles. Voici ce que vous verrez dans la console après exécution :

Led Zeppelin https://fr.wikipedia.org/wiki/Led_Zeppelin Un des groupes les plus influents du hard rock.
Deep Purple https://fr.wikipedia.org/wiki/Deep_Purple Connu pour l’iconique Smoke on the Water.
Black Sabbath https://fr.wikipedia.org/wiki/Black_Sabbath Pionniers du heavy metal.

Ce résultat montre à quel point for...of simplifie l’accès aux données, tout en améliorant la lisibilité et la maintenance du code, en particulier lorsqu’on travaille avec des tableaux d’objets complexes.

Cependant, toutes les données ne sont pas toujours organisées sous forme de tableaux simples. Dans de nombreux cas, elles sont structurées sous forme d’objets plus complexes, où chaque clé représente une catégorie ou un regroupement spécifique. Pour parcourir efficacement ces structures, for...of peut être combiné avec des outils comme Object.keys ou Object.entries, permettant ainsi d’extraire à la fois les catégories et leurs contenus associés. Explorons maintenant comment ces méthodes peuvent enrichir notre utilisation de for...of.

Coupler for...of avec Object.keys

Object.keys vs Object.entries

Object.keys extrait uniquement les clés propres d’un objet sous forme de tableau, tandis que Object.entries retourne un tableau de paires [clé, valeur], offrant un accès simultané aux clés et aux valeurs.

Afin d’illustrer cette utilisation, supposons maintenant que les données soient organisées par catégories musicales :

const musicData = {
  "Rocks des années 70": [
    { name: "Led Zeppelin", wikipedia: "https://fr.wikipedia.org/wiki/Led_Zeppelin", description: "Hard rock influent" },
    { name: "Deep Purple", wikipedia: "https://fr.wikipedia.org/wiki/Deep_Purple", description: "Smoke on the Water" }
  ],
  "Metal": [
    { name: "Black Sabbath", wikipedia: "https://fr.wikipedia.org/wiki/Black_Sabbath", description: "Pionniers du metal" },
    { name: "Iron Maiden", wikipedia: "https://fr.wikipedia.org/wiki/Iron_Maiden", description: "Icône du heavy metal" }
  ]
};

Pour parcourir ces clés de manière dynamique, la méthode Object.keys est un outil incontournable. Elle transforme les clés d’un objet en un tableau, ce qui permet de les utiliser facilement avec une boucle for...of :

for (const category of Object.keys(musicData)) {
  console.log(category);
}

Ici, chaque élément extrait par Object.keys correspond à une catégorie musicale, que nous affichons simplement dans la console. Mais Object.keys ne s’arrête pas là : il devient encore plus puissant lorsqu’il est couplé à for...of pour accéder aux données associées à chaque catégorie. En combinant cette méthode avec musicData[category], nous pouvons parcourir non seulement les catégories, mais aussi leurs contenus :

for (const category of Object.keys(musicData)) {
  console.log(`Catégorie : ${category}`);
  for (const band of musicData[category]) {
    console.log(`  - ${band.name}`);
  }
}

Object.keys(musicData) : Cette méthode extrait les clés d’un objet sous forme de tableau. Ici, elle renvoie : ["Rocks des années 70", "Metal"].

Combinaison avec for...of : En utilisant for...of, chaque clé est accessible directement comme une variable dans la boucle.

Parcours des valeurs associées : musicData[category] donne accès au tableau des groupes pour chaque catégorie. Une seconde boucle for...of permet alors de parcourir ces groupes.

Grâce à cette combinaison, nous parcourons chaque catégorie extraite de musicData et accédons directement aux groupes associés. La première boucle affiche le nom de la catégorie, tandis que la boucle imbriquée parcourt les groupes de chaque catégorie et affiche leurs noms avec une indentation pour les différencier. Voici ce que la console affichera après l’exécution :

Catégorie : Rocks des années 70
  - Led Zeppelin
  - Deep Purple
Catégorie : Metal
  - Black Sabbath
  - Iron Maiden

Ce résultat montre comment Object.keys et for...of, utilisés ensemble, permettent de naviguer facilement dans des structures complexes, en restant lisibles et intuitifs.

Déstructuration : rendre votre boucle encore plus lisible

Pour aller encore plus loin, nous pouvons simplifier le code en utilisant la déstructuration dans la deuxième boucle. Cela permet d’extraire directement les propriétés name, wikipedia, et description de chaque objet sans avoir à y accéder manuellement. Cette approche rend le code encore plus lisible et expressif :

for (const category of Object.keys(musicData)) {
  console.log(`Catégorie : ${category}`);
  for (const { name, wikipedia, description } of musicData[category]) {
    console.log(`  - ${name} : ${description} (en savoir plus : ${wikipedia})`);
  }
}

Dans cet exemple, chaque propriété est déstructurée directement au moment de l’itération, éliminant ainsi le besoin d’écrire des expressions comme band.name. Voici ce que la console affichera après exécution :

Catégorie : Rocks des années 70
  - Led Zeppelin : Hard rock influent (en savoir plus : https://fr.wikipedia.org/wiki/Led_Zeppelin)
  - Deep Purple : Smoke on the Water (en savoir plus : https://fr.wikipedia.org/wiki/Deep_Purple)
Catégorie : Metal
  - Black Sabbath : Pionniers du metal (en savoir plus : https://fr.wikipedia.org/wiki/Black_Sabbath)
  - Iron Maiden : Icône du heavy metal (en savoir plus : https://fr.wikipedia.org/wiki/Iron_Maiden)

Cette méthode illustre à quel point for...of couplé à la déstructuration peut rendre le parcours et la présentation des données à la fois plus propres et plus efficaces. En plus d’améliorer la lisibilité, cela réduit les répétitions dans le code.

Travailler avec filter() pour prétraiter les données

Si nous voulons afficher uniquement certains groupes (par exemple, ceux dont le nom est « Led Zeppelin » ou « Iron Maiden »), nous pouvons utiliser la méthode filter() pour créer un tableau contenant uniquement ces groupes :

for (const category of Object.keys(musicData)) {
  console.log(`Catégorie : ${category}`);
  const filteredBands = musicData[category].filter(band => 
    ["Led Zeppelin", "Iron Maiden"].includes(band.name)
  );
  for (const { name, wikipedia, description } of filteredBands) {
    console.log(`  - ${name} : ${description} (en savoir plus : ${wikipedia})`);
  }
}

En combinant la méthode filter() avec for...of, nous pouvons facilement appliquer un filtre pour ne retenir que certains groupes spécifiques. Par exemple, dans cet exemple, filter() parcourt les groupes de musicData[category] et crée un tableau filteredBands contenant uniquement ceux dont le nom figure dans la liste ["Led Zeppelin", "Iron Maiden"]. Ce tableau filtré est ensuite parcouru avec for...of, permettant d’afficher uniquement les groupes sélectionnés. Ainsi, si seuls « Led Zeppelin » et « Iron Maiden » sont retenus, la console affichera leurs informations de manière concise.

Catégorie : Rocks des années 70
  - Led Zeppelin : Hard rock influent (en savoir plus : https://fr.wikipedia.org/wiki/Led_Zeppelin)
Catégorie : Metal
  - Iron Maiden : Icône du heavy metal (en savoir plus : https://fr.wikipedia.org/wiki/Iron_Maiden)

En prétraitant les données, nous éliminons le besoin d’évaluer une condition if pour chaque élément dans la boucle. Cela rend le code plus propre et plus lisible tout en respectant le paradigme fonctionnel de JavaScript.

Limites de for…of : ce qu’il faut savoir

Bien que for...of soit un outil puissant et élégant pour parcourir des données itérables, il peut présenter certaines limitations dans des cas spécifiques. Examinons ces problèmes un par un, accompagnés de solutions concrètes pour les contourner.

Incompatibilité avec les objets standards

for...of fonctionne uniquement avec des objets itérables comme les tableaux ou les chaînes de caractères. Si vous essayez de l’utiliser directement avec un objet standard (comme { key: value }), vous obtiendrez une erreur :

const obj = { a: 1, b: 2, c: 3 };

for (const entry of obj) {
  console.log(entry);
}
// TypeError : obj is not iterable

Pour parcourir un objet standard, vous devez le transformer en un tableau de clés ou de paires [clé, valeur] à l’aide de méthodes comme Object.keys ou Object.entries :

// Parcourir uniquement les clés
for (const key of Object.keys(obj)) {
  console.log(`Clé : ${key}, Valeur : ${obj[key]}`);
}
// Affiche :
// Clé : a, Valeur : 1
// Clé : b, Valeur : 2
// Clé : c, Valeur : 3

// Parcourir les clés et les valeurs
for (const [key, value] of Object.entries(obj)) {
  console.log(`Clé : ${key}, Valeur : ${value}`);
}
// Affiche :
// Clé : a, Valeur : 1
// Clé : b, Valeur : 2
// Clé : c, Valeur : 3

Absence d’accès direct aux indices

Lorsque vous utilisez for...of pour parcourir un tableau, seuls les éléments du tableau sont accessibles, mais pas leurs indices. Cela peut poser problème si vous avez besoin des deux dans votre logique :

const fruits = ['pomme', 'banane', 'orange'];

for (const fruit of fruits) {
  console.log(fruit);
}
// Affiche uniquement les fruits :
// pomme
// banane
// orange

Pour accéder à la fois aux indices et aux éléments, vous pouvez utiliser la méthode entries(), qui retourne un tableau de paires [index, élément] :

for (const [index, fruit] of fruits.entries()) {
  console.log(`Index : ${index}, Fruit : ${fruit}`);
}
// Affiche :
// Index : 0, Fruit : pomme
// Index : 1, Fruit : banane
// Index : 2, Fruit : orange

Moins performant pour des volumes massifs de données

Sur de très grandes quantités de données, comme un tableau contenant des millions d’éléments, for...of peut être légèrement moins performant qu’une boucle classique for ou qu’une méthode optimisée comme reduce(). Voici un exemple :

const largeArray = Array.from({ length: 1000000 }, (_, i) => i);

console.time('for...of');
for (const num of largeArray) {
  // Traitement simulé
}
console.timeEnd('for...of');
// Temps pris : ~25 ms (varie selon la machine)

console.time('for classique');
for (let i = 0; i < largeArray.length; i++) {
  // Traitement simulé
}
console.timeEnd('for classique');
// Temps pris : ~10 ms (varie selon la machine)

Pour des applications où la performance est critique, privilégiez une boucle classique for ou des méthodes fonctionnelles optimisées comme reduce() pour traiter les données :

const sum = largeArray.reduce((acc, num) => acc + num, 0);
console.log(`Somme : ${sum}`);
// Utilisation de reduce pour un traitement rapide

En résumé

Si for...of reste un excellent choix pour la lisibilité et la simplicité, il convient de connaître ses limites pour en tirer le meilleur parti. Les solutions comme l’utilisation de Object.keys, entries(), ou de boucles classiques permettent de contourner ces problèmes et de répondre aux besoins spécifiques de vos projets.