Tuto Js : les boucles forEach VS For .. In VS For Of

Dans ce mini tutoriel on va voir les différences entre forEach, for..In et for..Of.

ForEach

forEach est une méthode disponible seulement sur les objets de type Array.
Cette méthode permet d'itérer (de passer par chacun) sur chacune des valeurs du tableau.
Pour chaque valeur du tableau, elle le passe à une fonction de callback.
La fonction de callback peut accéder à l'index et la valeur de l'élément dans le tableau.

[2, 5, 4, 9].forEach(function(element, index) {
  console.log('a[' + index + '] = ' + element);
});

For .. In

For..In est une fonction globale permettant de parcourir les propriétés énumérable d'un objet (String, Array, Object... tous ces types sont des objets).

var object = {a: 2, b: 1, c: 8};
// var object = 'Hello'; // fonctionne aussi avec les strings
// var object = [7, 5, 3]; // fonctionne aussi avec les arrays

for (var property in object) {
  console.log(property + ' --> ' + object[property])
}

For .. Of

For..Of est une fonction globale permettant de parcourir un objet énumérable (String, Array, Map et Set sont énumérables).

Ps : Object n'est pas un objet énumérable, il faut passer par une Map

var enumerableArr = [3, 4, 7];

for (var value of enumerableArr) {
  console.log(value)
}

Conclusion

Pour parcourir un tableau (array) on peut utiliser n'importe quelle méthode mais on favorise forEach et depuis ES6 For..Of.

Pour parcourir un objet on ne peut utiliser que For..In.

Ressources complémentaires :

• Doc MDN qui présente la différence entre for..of et for..in
• Un article de blog de qnimate.com qui présente la différence entre les 3 méthodes
• Un autre article de blog de alligator.io