Boucle « for » en JavaScript – Guide complet avec exemples pratiques

Les boucles « for » sont un outil indispensable en JavaScript pour exécuter des blocs de code de manière répétée tout en optimisant les performances. Ce guide vous accompagnera pas à pas dans leur apprentissage, avec des exemples concrets, des outputs, et des analyses détaillées.

Qu’est-ce qu’une boucle ?

Les boucles permettent de répéter une action plusieurs fois, tant qu’une condition spécifique est remplie. Elles sont utilisées pour traiter des collections de données, effectuer des calculs répétitifs ou automatiser des tâches complexes. Il existe plusieurs sortes de boucles en javascript ; voyons ici l’historique boucle « for »

Les boucles « for » en JavaScript

En JavaScript, la boucle « for » est la structure la plus appropriée lorsqu’on sait à l’avance combien de fois une action doit être répétée.

Syntaxe d’une boucle « for »

Voici la syntaxe d’une boucle « for » :

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

• Initialisation : Déclare et initialise une variable de contrôle.
• Condition : Teste si la boucle doit continuer.
• Incrémentation : Met à jour la variable de contrôle à chaque itération.

Exemple :

for (let i = 0; i < 5; i++) {
  console.log(`Itération : ${i}`);
}

Partie	Exemple	Description
Initialisation	let i = 0	Démarre la variable à 0
Condition	i < 5	Exécute tant que cette condition est vraie
Incrémentation	i++	Incrémente la variable à chaque itération
Corps	console.log	Affiche la valeur actuelle de i

Comment afficher un texte plusieurs fois

Exemple :

for (let i = 0; i < 3; i++) {
  console.log("Bonjour, monde !");
}

Output :

Bonjour, monde !
Bonjour, monde !
Bonjour, monde !

Variable i	Condition i < 3	Action
0	vrai	Affiche « Bonjour, monde ! »
1	vrai	Affiche « Bonjour, monde ! »
2	vrai	Affiche « Bonjour, monde ! »
3	faux	Fin de la boucle

Explication : La boucle démarre avec i = 0 et s’arrête lorsque i atteint 3.

Comment afficher une séquence de nombres avec une boucle « for »

Exemple :

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

Output :

1
2
3
4
5

Variable i	Condition i <= 5	Action
1	vrai	Affiche 1
2	vrai	Affiche 2
3	vrai	Affiche 3
4	vrai	Affiche 4
5	vrai	Affiche 5
6	faux	Fin de la boucle

Explication : La boucle incrémente la valeur de i à chaque itération, en s’arrêtant à 5.

Comment afficher une séquence de nombres pairs

Exemple :

for (let i = 2; i <= 10; i += 2) {
  console.log(i);
}

Output :

2
4
6
8
10

Variable i	Condition i <= 10	Action
2	vrai	Affiche 2
4	vrai	Affiche 4
6	vrai	Affiche 6
8	vrai	Affiche 8
10	vrai	Affiche 10
12	faux	Fin de la boucle

Explication : La boucle incrémente i par 2, permettant d’afficher uniquement les nombres pairs.

Comment interrompre une boucle « for »

Exemple :

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

Output :

0
1
2
3
4

Variable i	Condition i < 10	Condition i === 5	Action
0	vrai	faux	Affiche 0
1	vrai	faux	Affiche 1
5	vrai	vrai	Break

Explication : La boucle s’arrête immédiatement lorsque i === 5.

Comment afficher la somme des nombres naturels

Exemple :

let somme = 0;
const start = 1;
const end = 100;

for (let i = start; i <= end; i++) {
  somme += i;
}
console.log(`La somme des nombres de ${start} à ${end} est : ${somme}`);

Output :

La somme des nombres de 1 à 100 est : 5050

Étape	Variable i	Valeur de somme après addition
1	1	1
2	2	3
…	…	…
100	100	5050

Explication : Cette boucle commence à la valeur start (1) et s’arrête à la valeur end (100). À chaque itération, le nombre actuel i est ajouté à la variable somme, qui accumule le total.

Comment parcourir un tableau pour vérifier les nombres pairs et impairs

Exemple :

// Tableau initial
const nombres = [3, 8, 15, 22, 7, 10];

// Parcours pour vérifier chaque élément
for (let i = 0; i < nombres.length; i++) {
  if (nombres[i] % 2 === 0) {
    console.log(`${nombres[i]} est pair`);
  } else {
    console.log(`${nombres[i]} est impair`);
  }
}

Output :

3 est impair
8 est pair
15 est impair
22 est pair
7 est impair
10 est pair

Étape	Valeur de nombres[i]	Résultat
1	3	3 est impair
2	8	8 est pair
3	15	15 est impair
4	22	22 est pair
5	7	7 est impair
6	10	10 est pair

Explication : La boucle parcourt chaque élément du tableau nombres. La condition nombres[i] % 2 === 0 détermine si le nombre est pair. Si oui, un message indique qu’il est pair, sinon qu’il est impair.

Comment parcourir un tableau pour trouver le maximum et le minimum

Exemple :

// Tableau initial
const nombres = [42, 17, 8, 33, 99, 4];

// Initialisation des variables pour le max et le min
let max = nombres[0];
let min = nombres[0];

// Parcours pour trouver les valeurs
for (let i = 1; i < nombres.length; i++) {
  if (nombres[i] > max) {
    max = nombres[i];
  }
  if (nombres[i] < min) {
    min = nombres[i];
  }
}

console.log(`Le maximum est : ${max}`);
console.log(`Le minimum est : ${min}`);

Output :

Le maximum est : 99
Le minimum est : 4

Étape	Valeur de nombres[i]	Nouveau max	Nouveau min
1	17	42	17
2	8	42	8
3	33	42	8
4	99	99	8
5	4	99	4

Explication : Les variables max et min sont initialisées avec la première valeur du tableau. La boucle compare chaque élément suivant pour mettre à jour max si un élément est plus grand, ou min si un élément est plus petit.

Comment trier un tableau de nombres avec une boucle « for »

Exemple :

// Déclaration du tableau initial
const nombres = [34, 7, 23, 32, 5, 62];

// Première boucle pour contrôler les passes
for (let i = 0; i < nombres.length; i++) {
  // Deuxième boucle pour comparer les éléments adjacents
  for (let j = 0; j < nombres.length - i - 1; j++) {
    // Si l'élément courant est plus grand que le suivant, on les échange
    if (nombres[j] > nombres[j + 1]) {
      let temp = nombres[j];
      nombres[j] = nombres[j + 1];
      nombres[j + 1] = temp;
    }
  }
}

// Affichage du tableau trié
console.log(nombres);

Output :

[5, 7, 23, 32, 34, 62]

Ligne	Code	Explication
1	const nombres = [34, 7, ...];	Déclare le tableau de nombres à trier.
4	for (let i = 0; ...)	Contrôle le nombre total de passes nécessaires pour trier le tableau.
6	for (let j = 0; ...)	Compare chaque paire d’éléments adjacents dans une passe.
8	if (nombres[j] > nombres[j+1])	Vérifie si deux éléments sont dans le mauvais ordre.
9-11	let temp = nombres[j]; ...	Effectue un échange des deux éléments si nécessaire.
14	console.log(nombres);	Affiche le tableau final trié par ordre croissant.

Explication détaillée :

• La première boucle externe i compte le nombre de passes nécessaires pour que tous les éléments soient triés. Chaque passe place le plus grand élément restant à la bonne position.
• La boucle interne j compare les éléments adjacents et les échange si nécessaire.
• Les éléments triés ne sont plus comparés dans les passes suivantes, car la condition nombres.length - i - 1 réduit la portée de la boucle interne.
• Ce tri, appelé tri à bulles, a une complexité temporelle de O(n²) dans le pire des cas. Il est utile pour des tableaux de petite taille.

FAQ : 15 questions et réponses