Les boucles 🔁 nous permettent de rĂ©pĂ©ter une action plusieurs fois.

Par exemple, pour Ă©crire dans la console les chiffres 1, 2, 3 il est possible d'Ă©crire chaque ligne Ă  la main ✍ comme suit:

console.log(1); // 1
console.log(2); // 2
console.log(3); // 3

ou d'utiliser une boucle:

for (let index = 1; index <= 3; index++) {
  console.log(index);
}
// 1
// 2
// 3

Faire une boucle pour afficher 3 chiffres peut sembler superflus dans l'exemple précédent. Cependant s'il fallait inscrire de 1 à 1000 dans la console, la premiÚre option nécessiterait 1000 lignes de code, tandis que la 2e ne prendrait que 3 lignes seulement. Seule la cible (3) serait remplacée par la nouvelle cible (1000).

Anatomie

Voyons les parties constituant la boucle for().

for

Mot-clé déclarant la boucle. Les parenthÚses () contiennent ses rÚgles de fonctionnement.

let index = 1 

Initialise une variable de base servant de compteur (cette variable n'est initialisée qu'une seule fois).

Dans cet exemple, nous indiquons de commencer Ă  1. Cependant, nous aurions pu choisir de commencer Ă  n'importe oĂč (0, 2, 100, etc.).

index <= 3

Condition validĂ©e au dĂ©but de chaque itĂ©ration de la boucle. Si elle retourne vraie, la boucle se rĂ©pĂšte ✅, sinon elle s'arrĂȘte đŸš«.

Dans cet exemple, la condition est donc : tant que ma variable de type compteur est infĂ©rieur ou Ă©gale Ă  3 continuer la boucle, sinon l'arrĂȘter.

index++

Mise à jour de la variable servant de compteur à la fin de chaque itération de la boucle.

Dans cet exemple, la variable de type compteur index se fait incrémenter de 1 à chaque fin de boucle, mais il aurait aussi été possible de faire des opérations différentes, par exemple des bonds de 2 via index +=2.

{...}

Les parenthÚses contiennent le code à exécuter à chaque itération de la boucle.

Dans cet exemple, le code consiste simplement Ă  marquer dans la console la valeur contenue dans la variable index.

Fonctionnement

Étape par Ă©tape

Diagramme

Avec les tableaux

Les boucles sont souvent utilisées avec les tableaux puisque ceux-ci sont constitués d'éléments ordonnés numériquement. Il est donc possible d'accéder aux différents éléments en faisait référence à leur index dans le tableau.

Par exemple:

const officeArr = ["Pam", "Jim", "Dwight"];

for (let index = 0; index < 3; index++) {
  const who = officeArr[index];
  console.log(who);
}

// Pam
// Jim
// Dwight

Ce tableau est constitué de 3 entrées:
"Pam" Ă  l'index 0, "Jim" Ă  l'index 1 et "Dwight" Ă  l'index 2.

Donc lors de sa premiÚre itération la variable who contiendra l'équivalent de officeArr[0], ce qui correspond à "Pam". Ensuite, officeArr[1] = "Jim" et finalement officeArr[2] = "Dwight".

Flexibilité

L'une des grandes forces des boucles for() est leur flexibilité. Il est possible de boucler sur un nombre d'entrées de notre choix. Que ce soit toutes les entrées, comme dans l'exemple précédent, ou encore un nombre arbitraire spécifique.

Par exemple, mĂȘme si le prĂ©cĂ©dent tableau contient 3 entrĂ©es, il serait possible de boucler uniquement sur les 2 premiĂšres entrĂ©es en utilisant ce code:

for (let index = 0; index < 2; index++) { ... }

D'un autre cÎté, il est possible de s'assurer de boucler sur toutes les entrées d'un tableau sans avoir à aller changer la cible dans la boucle à chaque fois qu'une entrée est ajoutée ou retirée du tableau. Pour ce faire, il suffit de faire référence au nombre d'entrées dans le tableau comme cible plutÎt qu'à un nombre spécifique.

Par exemple:

for (let index = 0; index < officeArr.length; index++) { ... }

Puisque officeArr.length correspond au nombre total d'entrées dans le tableau (3), la cible à atteindre correspond maintenant au nombre total d'entrées dans le tableau, peu importe son nombre.