Aller au contenu principal

Module JS.4 – Conditions & boucles

Objectif​

Maîtriser les structures conditionnelles et les boucles JavaScript : if/else, switch, for, while et leurs variantes pour contrôler le flux d'exécution.

Théorie​

Conditions​

if / else​

Structure de base :

if (condition) {
    // Code si condition vraie
}

if / else :

if (age >= 18) {
    console.log("Majeur");
} else {
    console.log("Mineur");
}

if / else if / else :

if (note >= 16) {
    console.log("Très bien");
} else if (note >= 14) {
    console.log("Bien");
} else if (note >= 12) {
    console.log("Assez bien");
} else {
    console.log("À améliorer");
}

Expression ternaire :

const message = age >= 18 ? "Majeur" : "Mineur";

// Ternaire imbriqué
const appreciation = note >= 16 ? "Très bien" 
                   : note >= 14 ? "Bien"
                   : note >= 12 ? "Assez bien"
                   : "À améliorer";

Opérateur nullish coalescing (??) :

const nom = nomUtilisateur ?? "Inconnu";  // Si null ou undefined
const email = email ?? "aucun@email.com";

Opérateur de chaînage optionnel (?.) :

const ville = personne?.adresse?.ville;  // undefined si personne ou adresse est null/undefined
const longueur = texte?.length ?? 0;

Switch​

Le switch permet de tester une valeur contre plusieurs cas.

Structure classique :

switch (note) {
    case 16:
    case 17:
    case 18:
    case 19:
    case 20:
        console.log("Très bien");
        break;
    case 14:
    case 15:
        console.log("Bien");
        break;
    default:
        console.log("Autre");
        break;
}

Important : Ne pas oublier break sinon l'exécution continue (fall-through).

Switch avec return :

function obtenirAppreciation(note) {
    switch (note) {
        case 16:
        case 17:
        case 18:
        case 19:
        case 20:
            return "Très bien";
        case 14:
        case 15:
            return "Bien";
        default:
            return "Autre";
    }
}

Switch avec objets (alternative moderne) :

const appreciations = {
    20: "Excellent",
    18: "Très bien",
    16: "Bien",
    14: "Assez bien"
};

const appreciation = appreciations[note] ?? "Autre";

Boucles​

for​

Boucle classique avec compteur.

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

Variations :

// Compter à l'envers
for (let i = 10; i > 0; i--) {
    console.log(i);
}

// Par pas de 2
for (let i = 0; i < 10; i += 2) {
    console.log(i);  // 0, 2, 4, 6, 8
}

// Boucle infinie (à éviter)
for (;;) {
    if (condition) break;
    // Code
}

Boucles imbriquées :

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

for...of​

Parcourt les éléments d'un itérable (tableaux, strings, etc.).

const nombres = [10, 20, 30];

for (const nombre of nombres) {
    console.log(nombre);
}

// Avec index
for (const [index, nombre] of nombres.entries()) {
    console.log(`${index}: ${nombre}`);
}

Avec strings :

for (const lettre of "Bonjour") {
    console.log(lettre);
}

for...in​

Parcourt les propriétés énumérables d'un objet.

const personne = {
    nom: "Jean",
    age: 30,
    ville: "Paris"
};

for (const cle in personne) {
    console.log(`${cle}: ${personne[cle]}`);
}

Attention : for...in parcourt aussi les propriétés héritées. Utilisez hasOwnProperty :

for (const cle in personne) {
    if (personne.hasOwnProperty(cle)) {
        console.log(`${cle}: ${personne[cle]}`);
    }
}

Recommandation : Pour les tableaux, préférez for...of ou forEach.

while​

Répète tant qu'une condition est vraie.

let i = 0;
while (i < 10) {
    console.log(i);
    i++;
}

Attention aux boucles infinies :

let i = 0;
while (i < 10) {
    console.log(i);
    // Oubli d'incrémenter i = boucle infinie !
}

do...while​

Exécute au moins une fois, puis vérifie la condition.

let i = 0;
do {
    console.log(i);
    i++;
} while (i < 10);

Quand utiliser :

  • Validation de saisie utilisateur
  • Menu interactif
  • Quand on veut exécuter au moins une fois

Contrôle des boucles​

break​

Sort de la boucle immédiatement.

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break;  // Sort de la boucle
    }
    console.log(i);  // 0, 1, 2, 3, 4
}

continue​

Passe à l'itération suivante.

for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
        continue;  // Passe les nombres pairs
    }
    console.log(i);  // 1, 3, 5, 7, 9
}

Labels (pour boucles imbriquées) :

boucleExterne: for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        if (j === 1) {
            break boucleExterne;  // Sort des deux boucles
        }
        console.log(`${i}-${j}`);
    }
}

Méthodes de tableau (alternatives aux boucles)​

forEach : Exécute une fonction pour chaque élément

nombres.forEach((nombre, index) => {
    console.log(`${index}: ${nombre}`);
});

map : Transforme chaque élément

const doubles = nombres.map(n => n * 2);

filter : Filtre les éléments

const pairs = nombres.filter(n => n % 2 === 0);

find : Trouve le premier élément correspondant

const grand = nombres.find(n => n > 25);

some : Vérifie si au moins un élément correspond

const aGrand = nombres.some(n => n > 25);

every : Vérifie si tous les éléments correspondent

const tousPositifs = nombres.every(n => n > 0);

Exercice​

  1. Conditions

    • Créez des conditions if/else complexes
    • Utilisez l'expression ternaire
    • Testez switch avec différents cas

  2. Boucles for

    • Parcourez un tableau avec for classique
    • Utilisez for...of
    • Testez les boucles imbriquées

  3. Boucles while

    • Créez une boucle while
    • Comparez avec do...while
    • Faites attention aux boucles infinies

  4. Contrôle

    • Utilisez break pour sortir prématurément
    • Utilisez continue pour sauter des itérations
    • Testez avec labels

  5. Méthodes de tableau

    • Utilisez forEach, map, filter
    • Comparez avec les boucles classiques
    • Choisissez la meilleure approche selon le cas

Quiz​

  1. Que fait break dans une boucle ?

    • Passe à l'itération suivante
    • Sort de la boucle
    • Répète l'itération

  2. Quelle boucle parcourt les éléments d'un tableau ?

    • for...in
    • for...of
    • Les deux

  3. Que fait l'opérateur ?? ?

    • Compare deux valeurs
    • Nullish coalescing : valeur par défaut si null/undefined
    • Multiplie par deux

  4. Quelle est la différence entre while et do...while ?

    • Aucune différence
    • do...while exécute au moins une fois
    • while est plus rapide

  5. Que fait continue ?

    • Sort de la boucle
    • Passe à l'itération suivante
    • Répète l'itération

Mini défi​

Mission : Créer un système de traitement de données complet

Créez un script qui traite une liste d'étudiants avec leurs notes :

Données d'entrée :

const etudiants = [
    { nom: "Jean", notes: [15, 18, 12, 14] },
    { nom: "Marie", notes: [16, 17, 19, 18] },
    { nom: "Pierre", notes: [10, 11, 9, 12] },
    { nom: "Sophie", notes: [20, 19, 18, 20] }
];

Traitements à effectuer :

  1. Calculer la moyenne de chaque étudiant

    • Parcourez chaque étudiant (for...of)
    • Calculez la moyenne de ses notes
    • Ajoutez la moyenne au tableau

  2. Déterminer l'appréciation

    • Utilisez switch ou if/else

    • = 16 : "Très bien"

    • = 14 : "Bien"

    • = 12 : "Assez bien"

    • = 10 : "Passable"

    • < 10 : "Insuffisant"

  3. Statistiques globales

    • Moyenne générale de tous les étudiants
    • Nombre d'étudiants par appréciation
    • Meilleure et pire moyenne

  4. Filtres

    • Afficher seulement les étudiants avec moyenne >= 14 (utilisez filter)
    • Afficher seulement ceux avec "Très bien" (utilisez filter)
    • Trier par moyenne décroissante (utilisez sort)

  5. Affichage

    • Utilisez forEach pour afficher tous les résultats
    • Formatage clair avec template literals
    • Utilisez console.table pour un affichage structuré

Critères :

  • ✅ Utilisation de for...of pour parcourir
  • ✅ Utilisation de filter, map, forEach
  • ✅ Conditions avec switch ou if/else
  • ✅ Code clair et bien organisé
  • ✅ Affichage formaté et lisible

Objectif : Maîtriser toutes les boucles et conditions JavaScript pour traiter efficacement des données.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez if/else, switch, for, while et pouvez les utiliser pour résoudre des problèmes complexes.