Conditions et boucles

Objectifs

À la fin de cette leçon, vous saurez :

• exécuter du code conditionnellement avec if, else if, else ;
• répéter des instructions avec for, while, for...of ;
• écrire des conditions vraies et lisibles ;
• éviter les boucles infinies.

🔗 Pour vous rafraîchir la mémoire : variables et types primitifs

Conditions

if (note >= 16) {
  console.log("Excellent");
} else if (note >= 12) {
  console.log("Bien");
} else {
  console.log("À retravailler");
}

Lecture :

1. Si la condition est vraie, exécuter la première branche.
2. Sinon si une nouvelle condition, essayer la suivante.
3. Sinon, exécuter le bloc final.

La condition est une expression booléenne : elle est évaluée comme vraie ou fausse, et les parenthèses autour d'elle sont obligatoires en JavaScript. Quand elle vaut true, le bloc correspondant s'exécute.

Le else est le plan de secours : il ne s'exécute que si toutes les conditions précédentes se sont révélées fausses.

Valeurs truthy et falsy

if ("bonjour") { console.log("vrai"); }   // une chaîne non vide = true
if (0) { console.log("vrai"); }           // 0 = false
if ([]) { console.log("vrai"); }          // un tableau vide = true

Deux règles pratiques :

• false, 0, "", null, undefined, NaN sont falsy : la condition les traite comme fausse.
• Tout le reste est truthy.

La règle if (0) est piégeuse si vous attendez zéro : mieux vaut écrire explicitement if (nombre === 0).

Boucle : répéter

for

for (let i = 1; i <= 5; i++) {
  console.log("tour " + i);
}

Trois parties :

initialisation  : let i = 1
condition       : i <= 5
pas             : i++

Un premier tour : i vaut 1, la condition est vraie, on l'exécute, i devient 2. On recommence jusqu'à ce que la condition soit fausse.

while

let nombre = 3;
while (nombre > 0) {
  console.log(nombre);
  nombre--;
}

La condition est vérifiée avant chaque tour. Si elle est fausse dès le départ, aucune itération n'a lieu.

Danger : si le corps de la boucle ne fait pas évoluer la condition (nombre-- oublié), la boucle tourne indéfiniment : c'est une « boucle infinie ». La machine travaille, le programme ne répond plus : Ctrl+C l'interrompt.

Boucler sur un tableau

const fruits = ["pomme", "banane", "kiwi"];

for (const fruit of fruits) {
  console.log(fruit);
}

for...of parcourt chaque valeur dans l'ordre du tableau : la variable fruit reçoit successivement chaque élément. C'est le cas d'usage le plus fréquent.

La variante à index :

for (let i = 0; i < fruits.length; i++) {
  console.log(i + " : " + fruits[i]);
}

Retenir : choisir son outil

Situation	Outil
Décider si un bloc s'exécute	if / else
Répéter un nombre de fois connu	for
Répéter tant qu'une condition tient	while
Parcourir tous les éléments d'un tableau	for...of

Exercice

1. Écrivez un programme qui affiche « pair » ou « impair » pour une valeur 42.

2. Compteurs : afficher les nombres de 1 à 10 avec for.

3. Table : afficher les résultats de 7 * i pour i de 1 à 10.

4. Parcourir : avec un tableau ["un", "deux", "trois"], afficher chaque élément avec son index.

5. Deviner : un programme avec secret = 7 et une variable essai, qui affiche « trop grand », « trop petit » ou « trouvé » selon la comparaison.

6. Que se passe-t-il si la condition d'un while est toujours vraie ? Corrigez votre exemple.

Résumé

• if décide, else est le plan de secours.
• for compte, while répète tant que, for...of parcourt une collection.
• Une boucle doit toujours aller vers sa condition de sortie.
• La condition est revérifiée à chaque tour : tant qu'elle reste vraie, la boucle continue.

let nombre = 42;
if (nombre % 2 === 0) {
  console.log("pair");
} else {
  console.log("impair");
}

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

for (let i = 1; i <= 10; i++) {
  console.log(`7 × ${i} = ${7 * i}`);
}

const mots = ["un", "deux", "trois"];
for (let i = 0; i < mots.length; i++) {
  console.log(`${i} : ${mots[i]}`);
}

let secret = 7;
let essai = 10;

if (essai > secret) {
  console.log("trop grand");
} else if (essai < secret) {
  console.log("trop petit");
} else {
  console.log("trouvé");
}