JavaScript - Boucles while

Bonjour là-bas, futurs superstars du codage ! Aujourd'hui, nous plongeons dans l'univers passionnant des boucles while en JavaScript. En tant que votre professeur d'informatique du coin, je suis là pour vous guider à travers ce voyage avec plein d'exemples et d'explications. Alors, prenez vos sacs à dos virtuels, et mettons-nous en route pour cette aventure en boucle !

JavaScript - While Loop

Boucle while en JavaScript

La boucle while est comme un ami persévérant qui continue de demander : "Sommes-nous là encore ?" jusqu'à ce que vous atteigniez finalement votre destination. C'est un outil fondamental dans la programmation qui nous permet de répéter un bloc de code aussi longtemps qu'une condition spécifiée est vraie.

Syntaxe de base

Voici à quoi ressemble une boucle while dans sa forme la plus simple :

while (condition) {
// code à exécuter
}

Décomposons cela :

  • Le mot-clé while indique à JavaScript que nous voulons commencer une boucle while.
  • La condition est une expression booléenne qui est évaluée avant chaque itération de la boucle.
  • Si la condition est vraie, le code à l'intérieur des accolades {} est exécuté.
  • Ce processus se répète jusqu'à ce que la condition devienne fausse.

Exemple 1 : Compter jusqu'à 5

Commençons avec un exemple simple :

let count = 1;

while (count <= 5) {
console.log("Le compteur est : " + count);
count++;
}

Dans cet exemple :

  1. Nous initialisons une variable count avec la valeur 1.
  2. La boucle while continue tant que count est inférieur ou égal à 5.
  3. À l'intérieur de la boucle, nous affichons le compteur actuel dans la console.
  4. Nous incrémentons count de 1 en utilisant l'opérateur ++.
  5. La boucle répète les étapes 3-4 jusqu'à ce que count devienne 6, auquel point la condition devient fausse et la boucle se termine.

Sortie :

Le compteur est : 1
Le compteur est : 2
Le compteur est : 3
Le compteur est : 4
Le compteur est : 5

Exemple 2 : Somme des nombres

Essayons quelque chose de plus pratique. Nous utiliserons une boucle while pour calculer la somme des nombres de 1 à 10 :

let sum = 0;
let number = 1;

while (number <= 10) {
sum += number;
number++;
}

console.log("La somme des nombres de 1 à 10 est : " + sum);

Dans cet exemple :

  1. Nous initialisons sum à 0 et number à 1.
  2. La boucle continue tant que number est inférieur ou égal à 10.
  3. À chaque itération, nous ajoutons le number actuel à sum.
  4. Nous incrémentons number de 1.
  5. Après la fin de la boucle, nous affichons la somme finale.

Sortie :

La somme des nombres de 1 à 10 est : 55

Boucle do...while en JavaScript

Maintenant, découvrons la boucle do...while - la cousine légèrement plus optimiste de la boucle while. C'est comme dire : "Faisons cela au moins une fois, et puis nous verrons si nous voulons continuer."

Syntaxe de base

Voici la structure d'une boucle do...while :

do {
// code à exécuter
} while (condition);

La différence clé ici est que le bloc de code est exécuté au moins une fois avant que la condition ne soit vérifiée.

Exemple 3 : Jeu de devinette

Créons un simple jeu de devinette utilisant une boucle do...while :

let secretNumber = 7;
let guess;

do {
guess = prompt("Devinez un nombre entre 1 et 10:");
guess = Number(guess);

if (guess === secretNumber) {
console.log("Félicitations ! Vous avez deviné !");
} else if (guess < secretNumber) {
console.log("Trop bas ! Essayez encore.");
} else {
console.log("Trop haut ! Essayez encore.");
}
} while (guess !== secretNumber);

Dans cet exemple :

  1. Nous définissons un secretNumber et initialisons guess.
  2. La boucle invite l'utilisateur à deviner un nombre et le convertit en type nombre.
  3. Nous vérifions si la devinée est correcte, trop basse ou trop haute et fournissons des commentaires.
  4. La boucle continue tant que la devinée n'est pas égale au nombre secret.
  5. Même si l'utilisateur devine correctement dès la première tentative, le bloc de la boucle s'exécute au moins une fois.

Boucles while vs boucles for

Maintenant que nous avons exploré les boucles while, vous vous demandez peut-être : "Quand devrais-je utiliser une boucle while au lieu d'une boucle for ?" Excellent !*** question ! Comapons les.

Quand utiliser les boucles while

Les boucles while sont généralement utilisées lorsque :

  1. Vous ne savez pas à l'avance combien de fois la boucle doit s'exécuter.
  2. La continuation de la boucle dépend d'une condition qui pourrait changer pendant l'exécution de la boucle.

Quand utiliser les boucles for

Les boucles for sont souvent préférées lorsque :

  1. Vous savez exactement combien de fois la boucle doit s'exécuter.
  2. Vous itérez sur une séquence (comme un tableau) avec une longueur connue.

Exemple 4 : Trouver la première puissance de 2 supérieure à 1000

Utilisons une boucle while pour trouver la première puissance de 2 supérieure à 1000 :

let power = 0;
let result = 1;

while (result <= 1000) {
power++;
result = Math.pow(2, power);
}

console.log(`La première puissance de 2 supérieure à 1000 est 2^${power} = ${result}`);

Dans ce cas, une boucle while est parfaite car nous ne savons pas à l'avance combien d'itérations nous nécessaires.

Tableau des méthodes

Voici un tableau pratique résumant les méthodes que nous avons discutées :

Type de boucle Syntaxe Cas d'utilisation
while while (condition) { ... } Lorsque le nombre d'itérations est inconnu
do...while do { ... } while (condition); Lorsque vous voulez exécuter la boucle au moins une fois
for for (init; condition; update) { ... } Lorsque le nombre d'itérations est connu

Souvenez-vous, choisir la bonne boucle est comme choisir le bon outil pour un travail. Avec la pratique, vous développerez une intuition pour celle qui s'adapte le mieux à différents scénarios.

Et voilà, mes apprentis codeurs ! Nous avons fait le tour des boucles while en JavaScript. Souvenez-vous, les boucles sont comme les carrousels dans le parc de la programmation - elles tournent jusqu'à ce qu'il soit temps de s'arrêter. Continuez à vous entraîner, et bientôt vous serez le maître des boucles dans votre univers de codage !

Credits: Image by storyset