Boucle for loop en Javascript

Boucle for loop en Javascript

Dans cet article, vous allez apprendre à utiliser tous les types de boucle for loop en Javascript.

Les boucles for en Javascript sont utilisées pour exécuter le même bloc de code encore et encore, tant qu'une certaine condition est remplie. L'idée de base d'une boucle est d'automatiser les tâches répétitives dans un programme afin d'économiser du temps et des efforts.

Javascript prend désormais en charge 3 types de boucles for différentes :

  • Boucle for : loop dans un bloc de code jusqu'à ce que le compteur atteigne un nombre spécifique.
  • Boucle for...of : loop sur les éléments d'un array (tableau) ou d'une string (chaîne de caractères)
  • Boucle for...in : loop sur les propriétés d'un objet

Les cas d'usage des différentes boucles for sont donc multiples.

Voyons désormais l'utilisation en détails de celles-ci.

La boucle for en Javascript

La boucle for répète un bloc de code tant qu'une certaine condition est remplie.

Le principe de la boucle for est simple : nous initialisons un compteur avec une valeur de début, une valeur de fin et une valeur d'incrémentation. La boucle continue tant que la valeur de fin n'est pas atteinte.

Elle est généralement utilisée pour exécuter un bloc de code un certain nombre de fois. Sa syntaxe est la suivante :

for(initialisation; condition; incrementation) {
    // Code
}
  • Initialisation : il est utilisé pour initialiser les variables du compteur
  • Condition : Évaluée au début de chaque itération. Si la condition est true, les instructions de la boucle sont exécutées. Si la condition est false, l'exécution de la boucle se termine.
  • Incrémentation : il met à jour le compteur de la boucle avec une nouvelle valeur à chaque fois que la boucle s'exécute.


L'exemple suivant définit une boucle qui commence avec i=0. La boucle se poursuivra jusqu'à ce que la valeur de la variable i soit inférieure ou égale à 10. La variable i augmente de 1 à chaque fois que la boucle est exécutée :

for(let i = 0; i <= 10; i++) {
   console.log('Mon chiffre préféré est le ' + i);
}
// Itère le log jusqu'à 10 

Les boucles for sont très utiles pour parcourir un tableau en Javascript et exécuter du code en chaîne comme dans l'exemple suivant :

const voiture = ['Renault', 'Peugeot', 'Tesla'];

for (let i = 0; i < voiture.length; i++) {
	console.log('Ma marque de voiture préférée est : ' + voiture[i])
}


La boucle for...of en Javascript

Cette fonctionnalité introduite depuis JS ES6  permet d'itérer sur un array, array d'objets ou une chaîne de caractère en enlevant la complexité de la boucle for classique.

Voici la synthaxe de la boucle for...of :

for (const uniqueElement of array) {
	// chaque element facilement accessible via uniqueElement 
}

Prenons un exemple simple pour démontrer son utilisation :

let voitures = ['peugeot','tesla','ferrari'];

for (const voiture of voitures) {
	console.log('Ma marque de voiture préférée est : ' + voiture)
}
// logs
// Ma marque de voiture préférée est peugeot
// Ma marque de voiture préférée est tesla
// Ma marque de voiture préférée est ferrari

Comme vous le voyez dans l'exemple, ici on initialise un array voitures avec différentes string afin d'itérer dessus dans notre boucle for...of.

La variable voiture dans la boucle for peut être nommée comme vous le souhaitez. Ici on a choisi voiture puisque cette variable représente à chaque boucle un unique élément de l'array voitures.

Vous pouvez utiliser la boucle for...of pour itérer sur des tableaux ou chaînes de caractères.

La boucle for...in en Javascript

La boucle for...in est un type particulier de boucle qui est particulièrement utilisée pour itérer sur les propriétés d'un objet car le compteur de la boucle est une string et non pas un nombre.

Voici la syntaxe :

for (variable in objet) {
    // votre code à exécuter
}

Apprenons ensemble avec un exemple simple de boucle for...in en JS pour itérer sur un objet.

const carottes = {"itemId": "1", "itemName": "carotte", "nbItems": 25};

for (const element in carottes) {
	console.log(`${element} => ${carottes[element]}`
}
// logs             
// itemId => 1
// itemName => carotte
// nbItems => 25

Dans cet exemple, nous avons créé un objet carottes avec différentes valeurs.

La boucle for...in nous permet d'itérer facilement et d'utiliser n'importe quelle valeur ou clé de cet objet simplement.