Boucle For JavaScript

Boucle For en JavaScript

Les boucles sont une construction de programmation fondamentale qui vous permet d’exécuter un bloc de code de manière répétée. Ceci est particulièrement utile lorsque vous devez effectuer la même opération sur plusieurs éléments ou exécuter du code un nombre spécifique de fois, souvent avec des valeurs différentes à chaque itération.

Boucles JavaScript

Les boucles sont essentielles pour automatiser les tâches répétitives. Par exemple, lorsque vous travaillez avec des tableaux :

// Sans boucle, le traitement des éléments d'un tableau est répétitif :
let output = "";
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
output += cars[0] + "\n";
output += cars[1] + "\n";
// ...et ainsi de suite pour toutes les voitures
// console.log(output); // Ceci imprimerait les deux premières voitures

Les boucles offrent un moyen beaucoup plus efficace et évolutif de gérer de telles tâches.

Différents Types de Boucles

JavaScript prend en charge plusieurs types de boucles :

• for : Exécute un bloc de code un nombre spécifié de fois. Idéal lorsque vous connaissez le nombre d’itérations.
• for...of : Itère sur les valeurs d’objets itérables comme les Tableaux (Arrays), les Chaînes de caractères (Strings), les Maps, les Sets, etc. (Moderne et préféré pour les tableaux/chaînes).
• for...in : Itère sur les propriétés énumérables (clés) d’un objet. Principalement utilisé pour les objets, pas les tableaux.
• while : Boucle à travers un bloc de code tant qu’une condition spécifiée est vraie. La condition est vérifiée avant chaque itération.
• do...while : Similaire à while, mais le bloc de code est exécuté au moins une fois avant que la condition ne soit vérifiée.
• Méthodes de tableau comme forEach(), map(), filter() : Fournissent des moyens concis d’itérer et de transformer les éléments d’un tableau (souvent couverts dans des sections spécifiques aux tableaux).

La Boucle For

La boucle for traditionnelle est un outil polyvalent pour créer des boucles, surtout lorsque vous avez besoin d’un contrôle précis sur le processus d’itération (par exemple, des points de début/fin spécifiques, des incréments personnalisés).

La boucle for a la syntaxe suivante :

for (initialization; condition; finalExpression) {
  // bloc de code à exécuter tant que la condition est vraie
}

initialization (Instruction 1) : Exécutée une seule fois avant le début de la boucle. Généralement utilisée pour déclarer et initialiser une variable de compteur de boucle (par exemple, let i = 0).

condition (Instruction 2) : Évaluée avant chaque itération de la boucle. Si elle est vraie, le bloc de code s’exécute. Si elle est fausse, la boucle se termine.

finalExpression (Instruction 3) : Exécutée à la fin de chaque itération de la boucle, après le bloc de code. Généralement utilisée pour incrémenter ou décrémenter le compteur de boucle (par exemple, i++, i--).

let textOutput = "";
for (let i = 0; i < 5; i++) {
  textOutput += `The number is ${i}\n`;
}
console.log(textOutput);
/* Sortie :
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
*/

D’après l’exemple ci-dessus, vous pouvez lire :

La partie initialization (let i = 0;) déclare un compteur de boucle i et lui attribue la valeur initiale 0. Cela n’arrive qu’une seule fois.

La partie condition (i < 5;) est vérifiée avant chaque itération. Tant que i est inférieur à 5, la boucle continue.

La partie finalExpression (i++;) incrémente la valeur de i de 1 après l’exécution du bloc de code de chaque itération.

Instruction 1 (Initialisation)

Typiquement, l’instruction initialization est utilisée pour déclarer et initialiser une variable de compteur de boucle en utilisant let. Par exemple, let i = 0;.

L’instruction initialization est facultative. Si elle est omise, vous initialiseriez généralement votre variable de boucle avant que la boucle ne commence.

Vous pouvez déclarer et initialiser plusieurs variables dans l’instruction initialization, séparées par des virgules. Lors de la déclaration avec let, chaque variable a besoin de son propre let si ce sont des déclarations distinctes, ou utiliser un seul let pour une liste séparée par des virgules.

const cars = ["Volvo", "BMW", "Mazda"];
let text = "";
// Initialisation de i et len. 'let' est utilisé une seule fois pour plusieurs déclarations ici.
for (let i = 0, len = cars.length; i < len; i++) {
  text += cars[i] + "\n";
}
console.log(text);
/* Sortie :
Volvo
BMW
Mazda
*/

Vous pouvez omettre l’instruction d’initialisation si vos variables sont définies avant le début de la boucle :

const cars = ["Volvo", "BMW", "Mazda", "Ford"];
let i = 1; // Variable initialisée avant la boucle
const len = cars.length;
let text = "";
for (; i < len; i++) { // L'instruction d'initialisation est omise
  text += cars[i] + "\n";
}
console.log(text);
/* Sortie :
BMW
Mazda
Ford
*/

Instruction 2 (Condition)

L’instruction condition est évaluée avant chaque itération. Elle implique généralement le compteur de boucle et détermine si la boucle doit continuer.

L’instruction condition est également facultative.

Si la condition évalue à true (ou une valeur “truthy”), le bloc de code de la boucle est exécuté. Si elle évalue à false (ou une valeur “falsy”), la boucle se termine.

Attention : Si vous omettez l’instruction condition, vous devez inclure une instruction break quelque part dans le bloc de code de la boucle pour éviter une boucle infinie. Une boucle infinie fera planter votre navigateur ou programme. L’instruction break est couverte dans un chapitre ultérieur.

Instruction 3 (Expression Finale)

L’expression finalExpression est exécutée après chaque itération du bloc de code de la boucle. Elle est couramment utilisée pour mettre à jour le compteur de boucle (par exemple, i++, i += 2).

Comme les autres parties, l’expression finalExpression est facultative. Vous pouvez effectuer la logique de mise à jour à l’intérieur du bloc de code de la boucle si nécessaire.

L’expression finalExpression peut effectuer diverses opérations, telles que la décrémentation (i--), l’incrémentation par un pas plus grand (i += 5), ou même des expressions plus complexes.

L’expression finale peut également être omise (comme lorsque vous incrémentez vos valeurs à l’intérieur de la boucle) :

const cars = ["Volvo", "BMW"];
let text = "";
let i = 0;
const len = cars.length;
for (; i < len; ) { // L'expression finale est omise
  text += cars[i] + "\n";
  i++; // Compteur incrémenté à l'intérieur du corps de la boucle
}
console.log(text);
/* Sortie :
Volvo
BMW
*/

La Boucle for…of (Itération Moderne)

Pour itérer sur des objets itérables comme les tableaux, les chaînes de caractères, les Maps, les Sets, etc., la boucle for...of fournit une syntaxe plus propre et plus directe. Elle itère sur les valeurs de l’itérable.

Syntaxe :

for (const variable of iterable) {
  // bloc de code à exécuter pour chaque valeur
}

Exemple avec un tableau :

const colors = ["red", "green", "blue"];
let output = "";
for (const color of colors) {
  output += color + "\n";
}
console.log(output);
/* Sortie :
red
green
blue
*/

Exemple avec une chaîne de caractères :

const message = "Hello";
for (const char of message) {
  console.log(char);
}
/* Sortie :
H
e
l
l
o
*/

La boucle for...of est généralement préférée à la boucle for traditionnelle lorsque vous avez simplement besoin d’itérer à travers les éléments d’un tableau ou d’un autre itérable sans avoir besoin d’un accès par index ou d’une logique d’initialisation/d’incrémentation complexe.

La Boucle for…in (Itérer sur les Propriétés d’Objet)

L’instruction JavaScript for...in itère sur tous les noms de propriétés énumérables (clés) d’un objet. Elle est principalement conçue pour itérer sur les clés d’un objet.

Syntaxe :

for (const key in object) {
  // bloc de code à exécuter pour chaque clé de propriété
  // 'object[key]' peut être utilisé pour accéder à la valeur de la propriété
}

Le bloc de code à l’intérieur de la boucle for...in sera exécuté une seule fois pour chaque clé de propriété énumérable.

Boucler à travers les propriétés d’un objet :

const person = {
  fname: "John",
  lname: "Doe",
  age: 25
};

let info = "";
for (const key in person) {
  // C'est une bonne pratique de vérifier si c'est une propriété propre
  if (Object.hasOwnProperty.call(person, key)) {
    info += `${key}: ${person[key]}\n`;
  }
}
console.log(info);
/* Sortie (l'ordre peut varier) :
fname: John
lname: Doe
age: 25
*/

Considérations Importantes pour for...in :

• Ordre : L’ordre d’itération sur les propriétés d’objet n’est pas strictement garanti pour tous les types de clés ou à travers tous les moteurs JavaScript, bien que les moteurs modernes préservent souvent l’ordre d’insertion pour les clés de chaîne non-entières.
• Propriétés Héritées : for...in itérera également sur les propriétés héritées de la chaîne de prototypes de l’objet. Pour itérer uniquement sur les propriétés propres d’un objet, utilisez Object.hasOwnProperty() à l’intérieur de la boucle, ou utilisez des méthodes comme Object.keys(), Object.values() ou Object.entries() combinées avec une boucle for...of ou forEach.
• Utiliser pour les Objets, Pas les Tableaux : Bien que vous puissiez utiliser for...in avec des tableaux (car les tableaux sont des objets), ce n’est généralement pas recommandé. Il itérera sur les indices de tableau en tant que chaînes de caractères (par exemple, “0”, “1”, “2”) et pourrait également inclure toute autre propriété énumérable ajoutée à l’objet tableau ou à son prototype. Pour les tableaux, utilisez une boucle for traditionnelle, for...of, ou des méthodes de tableau comme forEach().

Exemple : Itérer sur les propriétés propres d’un objet en utilisant des alternatives modernes :

const car = { make: 'Toyota', model: 'Camry', year: 2021 };

console.log('Using Object.keys() and for...of:');
for (const key of Object.keys(car)) {
    console.log(`${key}: ${car[key]}`);
}
/* Sortie :
make: Toyota
model: Camry
year: 2021
*/

console.log('\nUsing Object.entries() and for...of:');
for (const [key, value] of Object.entries(car)) {
    console.log(`${key}: ${value}`);
}
/* Sortie :
make: Toyota
model: Camry
year: 2021
*/

La Boucle While et la Boucle Do…While

La boucle while et la boucle do...while seront expliquées dans le prochain chapitre.