Itérer sur une collection en JS

JavaScript propose plusieurs méthodes pour itérer sur des collections, chacune ayant ses propres caractéristiques, avantages, et cas d’utilisation spécifiques. Dans cet article, nous allons explorer en détail les boucles les plus couramment utilisées en JavaScript : while, do...while, for, for...in, for...of, forEach, et map. Nous examinerons leur syntaxe, leur utilisation recommandée, ainsi que leurs performances dans différents contextes

Boucle while

La boucle while exécute un bloc de code tant qu'une condition spécifiée est vraie. Si la condition est fausse dès le début, le code à l'intérieur de la boucle n'est jamais exécuté.

while (condition) {
  // code à exécuter tant que la condition est vraie
}

// exemple
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

Cet exemple affiche les nombres de 0 à 4 dans la console.

Cas d’utilisation :

• Utilisez while lorsque vous ne savez pas combien de fois la boucle doit s'exécuter à l'avance.
• Parfait pour les scénarios où la condition de fin est déterminée dynamiquement au cours de l’exécution.

Performance :

• while est très performant lorsque vous avez besoin d'une boucle flexible qui peut être interrompue dynamiquement.

Boucle do...while

La boucle do...while est similaire à while, mais elle exécute d'abord le bloc de code avant de vérifier la condition. Cela garantit que le code est exécuté au moins une fois, quelle que soit la condition.

do {
  // code à exécuter
} while (condition);

// exemple
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

Cet exemple affiche également les nombres de 0 à 4 dans la console, mais le code à l’intérieur de la boucle est exécuté au moins une fois, même si la condition est initialement fausse.

Cas d’utilisation :

• Utilisez do...while lorsque vous devez garantir que le bloc de code est exécuté au moins une fois avant la vérification de la condition.

Performance :

• En termes de performance, do...while est similaire à while, avec une légère différence dans le comportement initial.

Boucle for

La boucle for est probablement la plus utilisée en JavaScript. Elle permet de répéter un bloc de code un nombre déterminé de fois.

for (initialisation; condition; incrémentation) {
  // code à exécuter
}

// exemple
for (let i = 0; i < 5; i++) {
  console.log(i);
}

Cet exemple affiche les nombres de 0 à 4 dans la console.

Cas d’utilisation :

• Utilisez for lorsque vous savez exactement combien de fois la boucle doit s'exécuter.
• Idéal pour itérer sur les tableaux avec un index.

Performance :

• Très performant pour les itérations fixes, surtout lorsque vous itérez sur des tableaux de grande taille.

Boucle for...in

La boucle for...in est utilisée pour itérer sur les propriétés énumérables d'un objet.

for (let key in object) {
  // code à exécuter
}

// exemple
const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  console.log(key, obj[key]);
}

Cet exemple affiche chaque clé et valeur de l’objet obj.

Cas d’utilisation :

• Utilisez for...in pour parcourir les propriétés d'un objet.
• Attention : for...in itère également sur les propriétés héritées, il peut donc être nécessaire de filtrer les propriétés avec hasOwnProperty.

Performance :

• Moins performant que les autres boucles pour itérer sur des tableaux. À éviter pour les tableaux, préférer les boucles for ou for...of.

Boucle for...of

La boucle for...of a été introduite dans ES6 et permet d'itérer sur les objets itérables tels que les tableaux, les chaînes de caractères, les maps, les sets, etc.

for (let value of iterable) {
  // code à exécuter
}

// exemple
const array = [10, 20, 30];
for (let value of array) {
  console.log(value);
}

Cet exemple affiche les valeurs 10, 20 et 30 dans la console.

Cas d’utilisation :

• Utilisez for...of pour parcourir les éléments d'un tableau ou tout autre objet itérable de manière simple et lisible.

Performance :

• Performances comparables à une boucle for, mais avec une syntaxe plus propre pour les objets itérables. À privilégier pour la lisibilité et la simplicité.

Méthode forEach

forEach est une méthode disponible sur les tableaux en JavaScript. Elle exécute une fonction donnée sur chaque élément du tableau.

array.forEach(function(element, index, array) {
  // code à exécuter pour chaque élément
});

// exemple
const array = [10, 20, 30];
array.forEach(function(value) {
  console.log(value);
});

Cet exemple affiche les valeurs 10, 20 et 30 dans la console.

Cas d’utilisation :

• Utilisez forEach lorsque vous devez exécuter une fonction sur chaque élément d'un tableau.
• Ne convient pas pour des opérations asynchrones nécessitant des retours de fonction (pas de support pour await ou return).

Performance :

• Moins performant que les boucles for ou for...of pour les grandes collections, car il ne peut pas être interrompu prématurément.

Méthode map

map est également une méthode pour les tableaux en JavaScript. Elle crée un nouveau tableau avec les résultats de l'application d'une fonction à chaque élément du tableau d'origine.

const newArray = array.map(function(element, index, array) {
  // return la valeur modifiée
});

const array = [10, 20, 30];
const newArray = array.map(function(value) {
  return value * 2;
});
console.log(newArray); // [20, 40, 60]

Cet exemple multiplie chaque élément du tableau par 2 et renvoie un nouveau tableau avec les résultats.

Cas d’utilisation :

• Utilisez map lorsque vous souhaitez transformer un tableau en un autre, avec un traitement appliqué à chaque élément.
• Parfait pour les transformations immuables.

Performance :

• Performances similaires à forEach, mais avec l'avantage de créer un nouveau tableau. Peut être moins performant que for pour de grandes transformations en raison de l'allocation mémoire supplémentaire.

Conclusion

Chaque méthode d’itération en JavaScript a son utilité et est optimisée pour des cas d’utilisation spécifiques. Il est important de choisir la boucle ou la méthode d’itération qui convient le mieux au contexte :

• while et do...while : Flexibilité maximale lorsque le nombre d'itérations est inconnu.
• for : Meilleure option pour des itérations déterminées et pour parcourir des tableaux par index.
• for...in : Idéal pour itérer sur les propriétés d'objets, mais à éviter pour les tableaux.
• for...of : Simple et lisible pour parcourir des objets itérables.
• forEach : Pratique pour des opérations sur chaque élément d'un tableau sans retour de valeur.
• map : Parfait pour transformer un tableau en un autre avec une fonction appliquée à chaque élément.

En matière de performance, les boucles classiques comme for ou while sont généralement plus rapides pour de grandes collections, mais les méthodes comme forEach et map offrent une meilleure lisibilité et des fonctionnalités spécifiques pour des cas particuliers. Il est donc crucial de bien comprendre les besoins de votre application avant de choisir la méthode d'itération appropriée.