Compréhension de la boucle 'for...of' dans ES6

La différence fondamentale entre les boucles 'for...of' et 'for...in' en JavaScript réside dans la manière dont elles itèrent sur des collections de données. La boucle 'for...of', introduite avec ECMAScript 2015 (ou ES6), itère sur des objets itérables comme les tableaux. Cela signifie que 'for...of' peut directement accéder à la valeur de chaque élément dans une collection, ce qui est essentiel pour travailler avec des structures de données itérables.

Pour illustrer, considérez l'exemple d'un tableau :

let array = [1, 2, 3, 4, 5];
for (let value of array) {
  console.log(value);
}

Dans cet exemple, la boucle 'for...of' passe par chaque élément du tableau et imprime sa valeur. Il retournerait les numéros 1, 2, 3, 4 et 5, qui sont les valeurs directement contenues dans le tableau.

En comparaison, 'for...in' itère sur les propriétés énumérables d'un objet. Si nous devions utiliser la boucle 'for...in' sur le même tableau, nous obtiendrions les indices des éléments du tableau (0, 1, 2, 3, 4) au lieu de leurs valeurs.

C'est pourquoi il est préférable d'utiliser 'for...of' lors de l'itération sur des tableaux ou d'autres objets itérables, car il offre un accès direct à leurs valeurs plutôt qu'à leurs propriétés.

Cependant, il est important de noter que 'for...of' ne fonctionnera pas avec des objets ordinaires qui ne sont pas itérables. Dans ces cas, 'for...in' est plus appropriée car elle permet d'itérer sur les propriétés de l'objet.

En conclusion, comprendre la différence entre ces deux types de boucles est essentiel pour choisir le bon outil pour le travail, et chaque type de boucle a ses propres avantages en fonction du contexte.