Boucle for() | smnarnold

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 2^e 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

CodePen | smnarnold 👀

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.

for()
for()