JavaScript - Boucles for

Structure de Base d'une Boucle for

Une boucle for se compose de trois parties principales : l'initialisation, la condition et l'incrémentation. Voici la syntaxe de base :

for (initialisation; condition; incrémentation) {
    // Code à exécuter à chaque itération
}

Explication :

• Initialisation : Déclare et initialise une variable de contrôle. Cette étape n'est exécutée qu'une seule fois au début de la boucle.
• Condition : Une expression évaluée avant chaque itération de la boucle. Si la condition est vraie, le bloc de code à l'intérieur de la boucle est exécuté. Si la condition est fausse, la boucle s'arrête.
• Incrémentation : Une expression qui est exécutée après chaque itération du bloc de code.

Exemple Simple

Commençons par un exemple simple où nous affichons les nombres de 1 à 5 dans la console :

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

Explication :

1. Initialisation : let i = 1 déclare la variable i et l'initialise à 1.
2. Condition : i <= 5 vérifie si i est inférieur ou égal à 5.
3. Incrémentation : i++ augmente la valeur de i de 1 après chaque itération.

À chaque itération, la valeur de i est affichée dans la console jusqu'à ce que i dépasse 5.

Parcourir un Tableau

Les boucles for sont souvent utilisées pour parcourir des tableaux. Voici un exemple où nous parcourons un tableau de fruits et affichons chaque fruit :

let fruits = ["pomme", "banane", "cerise", "orange"];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

Explication :

1. Initialisation : let i = 0 initialise i à 0.
2. Condition : i < fruits.length vérifie si i est inférieur à la longueur du tableau fruits.
3. Incrémentation : i++ augmente i de 1 après chaque itération.

Le tableau fruits est parcouru de l'indice 0 à l'indice 3, et chaque fruit est affiché dans la console.

Utilisation des Boucles for avec ES6

Avec l'introduction de ECMAScript 6 (ES6) (= version récente), JavaScript a introduit de nouvelles fonctionnalités qui rendent le code plus concis et lisible. Par exemple, la boucle for...of permet de parcourir directement les éléments d'un tableau sans avoir besoin d'utiliser un indice.

Exemple avec for...of :

let fruits = ["pomme", "banane", "cerise", "orange"];

for (let fruit of fruits) {
    console.log(fruit);
}

Explication :

La boucle for...of itère directement sur les éléments du tableau fruits, rendant le code plus simple et plus lisible.

Conclusion

Les boucles for sont des outils puissants pour les développeurs JavaScript, permettant de répéter des tâches efficacement. En comprenant les différentes formes de boucles for, y compris la boucle classique et la boucle for...of, vous pouvez écrire du code plus clair et plus performant.

Voici un récapitulatif des points clés abordés dans cet article :

• La structure de base d'une boucle for.
• Utilisation des boucles for pour parcourir des tableaux.
• Utilisation de la boucle for...of introduite avec ES6.

Pratiquer ces concepts avec des exemples concrets vous aidera à maîtriser l'utilisation des boucles for en JavaScript. Bonne programmation !