Les Boucles

Comme en Java, JS intègre les instructions itératives for et while. Comme dans tous les langages modernes, JS offre aussi une gamme plus étendue de boucles.

Boucle for

Elle fonctionne comme en Java.

Itération sur les 3 éléments d'un array avec for

const person = ["John", "Doe", 25];
   for (let i = 0; i < person.length; i++) {
    console.log(person[i]);
}

Boucle while

Elle fonctionne comme en Java.

Itération indéterministe

let randomNumber;
let foundOdd = false;

while (!foundOdd) {
  randomNumber = Math.floor(Math.random() * 100) + 1;
  console.log(`Nombre aléatoire : ${randomNumber}`);
  if (randomNumber % 2 !== 0) {
    console.log('Nombre impair trouvé');
    foundOdd = true;
  }
}

Boucle for...of

En JavaScript, la boucle for...of est une structure itérative utilisée pour parcourir les éléments énumérables.

Itération sur les 3 éléments d'un array avec for .. of

const person = ["John", "Doe", 25];
   for (let x of person) {
    console.log(x);
 }

astuce

Le choix entre l'itération sur les indices (utiliser une boucle for classique) ou utiliser for...of dépend du contexte et des besoins spécifiques de votre code. Les deux approches ont leurs avantages et inconvénients, et le choix dépend souvent de la lisibilité du code et de l'utilisation des fonctionnalités spécifiques de chaque méthode. S'il n'y a pas besoin d'avoir accès à l'indice, on préfèrera utilser for...of.

Boucler en mode "Callback"

Itération sur les 3 éléments d'un array à l'aide d'une fonction callBack

const persons = ["John", "Doe", 25];
persons.forEach(function(person, index, tab) {
  console.log(`Index ${index}, value ${person}, array ${tab}`)
});

astuce

Encore une fois, itérer avec forEach plutôt qu'avec for...of ou for dépend du contexte et des préférences stylistiques de la personne qui développe. Itérer via une fonction callback est très courant en javascript. Il faut vous habituer à cette syntaxe.

Dans ce cours, je vais généralement (mais pas systématiquement)

• itérer de préférence avec for...of
• sauf si la structure de données est de taille fixe et/ou que j'ai besoin de l'indice. Dans ce cas j'utilise généralement for
• sauf si on itère sur des éléments du DOM, où je préfère itérer avec forEach (tutoriel suivant)

cells.forEach(function (cell) {
  cell.addEventListener('click', function () {
    if (game === 1) {
      playFill(cell);
    } else if (game === 2) {
      playCrush(cell);
    }
  });
});

• parfois je vais aussi itérer sur une paire clef/valeur (mais nous verrons ça dans le tutoriel sur les collections)

astuce

Dans le cadre de ce cours il est important de tester tous les styles d'itérations.

et pour terminer la boucle for...in

Cette boucle est spécialement conçue pour itérer à travers les propriétés d'un objet. Elle offre une manière concise d'itérer sur les clés d'un objet.

Itération sur les 3 attributs d'un objet

let oldCar = {
 make: 'Toyota',
 model: 'Tercel',
 year: '1996'
};

for (let key in oldCar) {
 console.log(`${key} --> ${oldCar[key]}`);
}

Cette forme d'itération fonctionne aussi très bien sur les tableaux.

Itération sur les 3 éléments d'un tableau

let values = ['a', 'b', 'c'];

for (let key in values) {
 console.log(`${key} --> ${values[key]}`);
}

Exercices

Travail à faire

Copiez-collez ce code dans un fichier html, lancez un live serveur avec VSCODE et testez / débuggez à l'aide de votre navigateur.

//Exercice 1
//en utilisant for .. of affichez tous le fruits
const fruits = ["Apple", "Banana", "Pineapple", "Orange", "Grapes"];            

//Exercice 2
// en utilisant un forEach + une fonction callback affichez tous les fruits


//Exercice 3
//boucler pour afficher uniquement le nom de fruits au gout sucré
const fruit1 = [
    {"Name" :"Apple", "taste" : "sweety", "calorie" : 30},
    {"Name" :"Tomato", "taste" : "salty", "calorie" : 10},
    {"Name" :"Mango", "taste" : "sweety", "calorie" : 10}
    ];

//Exercice 4
//Corriger ce code
const numbers = [1, 2, "3", 4, 5];
let sum = 0;
for (let i = 0; i <= numbers.length; i++) {
    sum += numbers[i];
}
console.log("La somme des nombres est : ${sum}");

const chiffreATrouver = 3; 
let i=0;
let trouve = false;
while (i < numbers.length && !trouve){
    trouve = chiffreATrouver == numbers[i];
    i++;
}
console.log(`Résultat de la boucle : ${trouve}`);