Vous avez besoin de répéter une action plusieurs fois en JavaScript ? Vous voulez parcourir un tableau sans avoir à écrire la même ligne de code dix fois ? La syntaxe de la boucle for vous semble compliquée ?
Cet article vous guide pas à pas. On va voir la syntaxe, des exemples clairs et les variantes modernes comme for...of. Vous saurez comment utiliser la boucle for en JavaScript pour répéter des instructions et manipuler vos données efficacement.
Syntaxe de la boucle for expliquée
La boucle for est un outil de base en JavaScript pour exécuter un bloc de code un certain nombre de fois. Avant de plonger dans les exemples, il faut comprendre sa structure. Elle peut faire peur au début, mais elle est très logique.
Voici à quoi ressemble la syntaxe de la boucle for :
// instructions à exécuter à chaque tour de boucle
}
Cette structure se décompose en trois parties, séparées par des points-virgules. Chacune a un rôle précis dans le fonctionnement de la boucle.
| Partie | Description |
|---|---|
initialisation |
Cette instruction est exécutée une seule fois, au tout début. En général, on y déclare une variable qui sert de compteur (souvent nommée i pour « index » ou « itération »). |
condition |
Avant chaque tour de boucle, JavaScript vérifie si cette condition est vraie. Si c’est le cas, la boucle continue. Si la condition est fausse, la boucle s’arrête net. |
expression_finale |
Cette instruction est exécutée à la fin de chaque tour, juste avant de vérifier la condition pour le tour suivant. Le plus souvent, on l’utilise pour incrémenter le compteur (par exemple, i++). |
L’ordre est simple : l’initialisation se fait une fois. Ensuite, à chaque tour, le programme vérifie la condition, exécute le code dans la boucle, puis exécute l’expression finale. Et ça recommence jusqu’à ce que la condition ne soit plus remplie.
5 Exemples concrets pour maîtriser la boucle for
La meilleure façon de comprendre est de pratiquer. Voici des cas d’usage courants qui vous aideront à voir comment la boucle for fonctionne en situation réelle.
1. L’exemple de base : Compter de 0 à 10
C’est le « Hello World » des boucles. L’objectif est simple : afficher les nombres de 0 à 10 dans la console. C’est parfait pour voir les trois parties de la syntaxe en action.
console.log(i);
}
- Initialisation : On crée une variable
iet on lui donne la valeur 0. - Condition : La boucle continue tant que
iest inférieur ou égal à 10. - Expression finale : À chaque tour, on augmente
ide 1 (i++).
Le résultat dans la console sera l’affichage des nombres de 0 à 10, chacun sur une nouvelle ligne. Chaque affichage correspond à une itération de la boucle.
2. Parcourir un tableau (array) pour afficher ses éléments
C’est le cas d’usage le plus fréquent pour une boucle for. Vous avez une liste d’éléments dans un tableau et vous voulez faire quelque chose avec chaque élément. La boucle est l’outil idéal pour ça.
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
Ici, la condition i < fruits.length est très importante. fruits.length donne le nombre d’éléments dans le tableau (ici, 4). Comme les index d’un tableau commencent à 0, le dernier index est length - 1. Utiliser < (strictement inférieur) assure que la boucle s’arrête juste avant de dépasser les limites du tableau.
3. Itérer à l’envers (décrémenter)
Parfois, on a besoin de parcourir un tableau en partant de la fin. La boucle for est assez flexible pour ça. Il suffit d’ajuster les trois parties de la déclaration.
// On part du dernier index (nombres.length – 1)
for (let i = nombres.length – 1; i >= 0; i–) {
console.log(nombres[i]);
}
Ici, on initialise le compteur i au dernier index. La condition vérifie que i reste supérieur ou égal à 0. Et l’expression finale décrémente le compteur avec i--. Le code affichera 5, 4, 3, 2, 1.
4. Calculer la somme des éléments d’un tableau
On peut utiliser une boucle pour effectuer des calculs sur les éléments d’un tableau. Par exemple, pour additionner tous les nombres d’une liste.
Pour ça, on a besoin d’une variable déclarée en dehors de la boucle pour stocker le résultat au fur et à mesure.
let somme = 0; // Variable pour stocker la somme
for (let i = 0; i < notes.length; i++) {
somme = somme + notes[i]; // On ajoute la note actuelle à la somme
}
console.log(‘La somme des notes est : ‘ + somme); // Affiche 54
À chaque itération, la valeur de l’élément actuel (notes[i]) est ajoutée à la variable somme. Une fois la boucle terminée, somme contient le total de tous les éléments.
5. Gérer des conditions dans la boucle (avec if)
La vraie puissance des boucles apparaît quand on les combine avec d’autres structures, comme les conditions if. On peut exécuter plusieurs instructions différentes selon la valeur de l’élément en cours.
Par exemple, pour ne garder que les nombres pairs d’un tableau :
const pairs = []; // Nouveau tableau pour stocker les nombres pairs
for (let i = 0; i < chiffres.length; i++) {
// On vérifie si le nombre est pair
if (chiffres[i] % 2 === 0) {
pairs.push(chiffres[i]); // Si oui, on l’ajoute au tableau ‘pairs’
}
}
console.log(pairs); // Affiche [2, 4, 6, 8]
Cette instruction if à l’intérieur de la boucle permet de filtrer les données. Seuls les éléments qui remplissent la condition (être divisible par 2) sont traités.
Les variantes modernes : for…in vs for…of
Avec les évolutions de JavaScript (notamment ES6), de nouvelles façons de faire des boucles sont apparues. Deux d’entre elles, for...in et for...of, ressemblent à la boucle for mais servent à des usages différents. Il ne faut pas les confondre.
La boucle `for…in` : pour les propriétés d’un objet
La boucle for...in est conçue pour itérer sur les clés (ou propriétés) énumérables d’un objet. Ce n’est pas fait pour les tableaux.
nom: ‘Dupont’,
prenom: ‘Jean’,
age: 30
};
for (const cle in utilisateur) {
console.log(cle + ‘: ‘ + utilisateur[cle]);
}
Ce code affichera :
- nom: Dupont
- prenom: Jean
- age: 30
for...in pour parcourir un tableau. L’ordre des éléments n’est pas garanti et la boucle peut aussi itérer sur des propriétés inattendues ajoutées au prototype du tableau.
La boucle `for…of` : la méthode moderne pour les tableaux
Introduite avec ES6, la boucle for...of est la manière moderne et recommandée pour itérer sur les valeurs d’un itérable (comme un tableau, une chaîne de caractères, une Map, une Set, etc.).
Sa syntaxe est beaucoup plus simple et lisible que la boucle for classique pour parcourir un tableau.
for (const couleur of couleurs) {
console.log(couleur);
}
Ici, pas besoin de gérer un index i ou une condition avec .length. La variable couleur prend directement la valeur de chaque élément du tableau à chaque tour. C’est plus propre et moins sujet aux erreurs.
| Critère | for...in |
for...of |
|---|---|---|
| Itère sur… | Les clés/propriétés d’un objet. | Les valeurs d’un objet itérable. |
| Type de retour | Une chaîne de caractères (la clé). | La valeur de l’élément. |
| Recommandé pour… | Les objets simples (Plain Objects). | Les tableaux, les chaînes de caractères, Map, Set. |
| Risques | Ordre non garanti. Itère sur le prototype. À éviter sur les tableaux. | Ne fonctionne pas sur les objets simples (non itérables). |
Comment contrôler une boucle : break et continue
Il arrive qu’on veuille modifier le comportement normal d’une boucle : soit l’arrêter complètement, soit sauter un tour. Pour cela, on utilise les instructions break et continue.
`break` pour arrêter la boucle
L’instruction break permet de sortir immédiatement d’une boucle, même si la condition de fin n’est pas encore atteinte. C’est utile quand on cherche un élément précis et qu’on l’a trouvé.
for (let i = 0; i < nombres.length; i++) {
if (nombres[i] < 0) {
console.log(‘Nombre négatif trouvé, on arrête !’);
break; // Arrête la boucle
}
console.log(nombres[i]);
}
Ce code affichera 10, 20, 30, puis le message d’arrêt. La boucle ne traitera jamais la valeur 40, car l’instruction break a mis fin à son exécution prématurément.
`continue` pour sauter une itération
L’instruction continue permet de sauter l’itération en cours et de passer directement à la suivante. Les instructions contenues dans la boucle après continue ne sont pas exécutées pour ce tour.
C’est pratique pour ignorer certaines valeurs sans arrêter toute la boucle.
if (i === 3) {
continue; // On saute l’itération où i vaut 3
}
console.log(‘Le nombre est ‘ + i);
}
Le console.log affichera les nombres 1, 2, 4 et 5. Le nombre 3 ne sera jamais affiché, car lorsque i valait 3, l’instruction continue a fait passer la boucle directement au tour suivant (où i vaut 4).
FAQ – Boucle for en JavaScript
Quand utiliser une boucle for plutôt que forEach ?
La méthode forEach est souvent plus lisible pour parcourir un tableau. Cependant, la boucle for classique est plus flexible. Utilisez for si vous avez besoin :
- De sortir de la boucle avant la fin (avec
break). - De sauter des itérations (avec
continue). - De parcourir le tableau à l’envers.
- D’avoir un contrôle fin sur l’index (par exemple, avancer de 2 en 2 avec
i += 2).
Pour une simple lecture de tous les éléments d’un tableau, forEach ou for...of sont souvent de meilleurs choix.
Comment faire une boucle infinie (et pourquoi l’éviter) ?
Une boucle infinie se produit quand la condition de la boucle ne devient jamais fausse. Par exemple : for (let i = 0; i >= 0; i++). Comme i sera toujours supérieur ou égal à 0, la boucle ne s’arrêtera jamais. Cela plantera votre programme ou votre navigateur. Il faut donc toujours s’assurer que la condition de sortie sera bien atteinte à un moment.
Peut-on déclarer la variable du compteur avec var, let ou const ?
let: C’est la méthode recommandée. La variable déclarée avecleta une portée de bloc, ce qui signifie qu’elle n’existe qu’à l’intérieur de la bouclefor. C’est plus sûr et évite les conflits.var: C’est l’ancienne méthode. Une variable déclarée avecvara une portée de fonction, elle « fuite » donc en dehors de la boucle. C’est une source de bugs potentiels. Il vaut mieux l’éviter.const: Vous ne pouvez pas utiliserconstpour un compteur classique (let i = 0), car sa valeur doit être modifiée à chaque tour (i++). Tenter de le faire provoquera une erreur. Vous pouvez cependant l’utiliser avecfor...of(for (const element of array)) car une nouvelle variableelementest créée à chaque itération.
La boucle for est-elle performante ?
Oui, la boucle for classique est l’une des boucles les plus rapides en JavaScript. Cependant, pour la plupart des applications web, la différence de performance avec des alternatives comme forEach ou for...of est totalement négligeable. Le choix devrait donc se baser sur la lisibilité du code et le besoin fonctionnel (besoin de break/continue, etc.) plutôt que sur des micro-optimisations.
Vous savez maintenant comment fonctionne la boucle for. C’est un outil fondamental en JavaScript pour gérer les tâches répétitives. N’oubliez pas que for...of est souvent un meilleur choix pour parcourir simplement des tableaux.
Le plus important, c’est de pratiquer. Essayez les exemples, modifiez-les, créez vos propres boucles. C’est en écrivant du code que vous allez vraiment maîtriser ce concept essentiel.
