0Pricing
Frontend Academy · Leçon

Flux de contrôle : if, else, switch, for, while

Créez des embranchements avec if/else et switch, répétez des opérations avec for et while, puis utilisez break et continue pour contrôler l’itération.

Flux de contrôle : if, else, switch, for, while est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Qu’est-ce que le flux de contrôle ?

Le flux de contrôle détermine quel code s’exécute et combien de fois. JavaScript fournit des conditions (if/else, switch) et des boucles (for, while, do/while) pour orienter le chemin d’exécution en fonction des conditions et des données.

if / else if / else

La conditionnelle la plus fondamentale. La condition entre parenthèses est évaluée comme vraie ou fausse. Plusieurs conditions s’enchaînent avec else if. Le else final constitue le cas par défaut.

const score = 75;

if (score >= 90) {
  console.log('A');
} else if (score >= 80) {
  console.log('B');
} else if (score >= 70) {
  console.log('C');
} else {
  console.log('F');
}

L’opérateur ternaire

L’opérateur ternaire est une structure if/else compacte sur une seule ligne : condition ? trueValue : falseValue. Utilisez-le pour les affectations simples et les expressions JSX. Évitez d’imbriquer les opérateurs ternaires : ils deviennent rapidement illisibles.

const label = age >= 18 ? 'Adult' : 'Minor';
const icon = isActive ? '🟢' : '🔴';

// In JSX:
<span>{isLoggedIn ? 'Logout' : 'Login'}</span>

Instruction switch

switch compare une valeur à plusieurs cas en utilisant l’égalité stricte. Utilisez break après chaque cas pour éviter l’enchaînement automatique vers le cas suivant. default gère les valeurs qui ne correspondent à aucun cas.

const day = 'Monday';
switch (day) {
  case 'Saturday':
  case 'Sunday':
    console.log('Weekend');
    break;
  case 'Monday':
    console.log('Start of work week');
    break;
  default:
    console.log('Weekday');
}

Boucle for

La boucle for classique, de style C : initialisation ; condition ; incrémentation. Elle convient particulièrement pour effectuer un nombre connu d’itérations ou parcourir des tableaux par index.

for (let i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}

// Iterate array by index:
const names = ['Alice', 'Bob', 'Carol'];
for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

Boucle for...of

for...of parcourt les valeurs de tout objet itérable (tableaux, chaînes, Maps, Sets). Elle est plus claire qu’une boucle for basée sur un index lorsque l’index ne vous est pas nécessaire.

const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}

for (const char of 'hello') {
  console.log(char); // h e l l o
}

Boucle for...in

for...in parcourt les clés de propriétés énumérables d’un objet. Ne l’utilisez pas sur des tableaux : préférez for...of ou les méthodes des tableaux.

const user = { name: 'Alice', age: 30, role: 'admin' };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

Boucle while

La boucle while s’exécute tant que sa condition est évaluée comme vraie. Utilisez-la lorsque le nombre d’itérations n’est pas connu à l’avance, par exemple pour lire une saisie jusqu’à ce que l’utilisateur entre une valeur valide.

let attempts = 0;
let success = false;
while (!success && attempts < 3) {
  // try something
  attempts++;
  success = Math.random() > 0.5; // simulate
}
console.log(`Done in ${attempts} attempts`);

Boucle do...while

do...while exécute son corps au moins une fois avant de vérifier la condition. Elle est utile lorsque le corps doit s’exécuter avant que vous puissiez évaluer la condition de sortie.

let input;
do {
  input = prompt('Enter a number:');
} while (isNaN(Number(input)));

break et continue

break quitte immédiatement la boucle actuelle. continue ignore le reste de l’itération actuelle et passe à la suivante. Les deux fonctionnent dans les boucles for, while et do/while.

for (let i = 0; i < 10; i++) {
  if (i === 3) continue;  // skip 3
  if (i === 7) break;     // stop at 7
  console.log(i);         // 0 1 2 4 5 6
}

Évaluation en court-circuit

&& renvoie la première valeur évaluée comme fausse, ou la dernière valeur. || renvoie la première valeur évaluée comme vraie, ou la dernière valeur. ?? (coalescence des valeurs nulles) renvoie la partie droite uniquement si la partie gauche vaut null ou undefined.

const name = user && user.name;    // null if user is falsy
const label = name || 'Anonymous'; // 'Anonymous' if name is falsy
const port = config.port ?? 3000;  // 3000 only if port is null/undefined

Vérification rapide

Quelle boucle garantit-elle que son corps s’exécutera au moins une fois ?

Récapitulatif : le flux de contrôle de JavaScript

if/else pour créer des embranchements. switch pour plusieurs valeurs distinctes. La boucle for pour un nombre connu d’itérations. for...of pour les objets itérables. while lorsque le nombre d’itérations est inconnu. do...while lorsqu’une exécution est garantie. break quitte les boucles. continue ignore des itérations. Les opérateurs en court-circuit permettent d’écrire des conditionnelles concises.

Questions Fréquemment Posées

La leçon « Flux de contrôle : if, else, switch, for, while » est-elle gratuite ?

Oui — le texte complet de « Flux de contrôle : if, else, switch, for, while » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Flux de contrôle : if, else, switch, for, while » ?

Créez des embranchements avec if/else et switch, répétez des opérations avec for et while, puis utilisez break et continue pour contrôler l’itération. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Flux de contrôle : if, else, switch, for, while » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Variables : let, const, var et portée
  2. Types de données : string, number, boolean, null, undefined
  3. Fonctions : déclarations, expressions et fonctions fléchées
  4. Flux de contrôle : if, else, switch, for, while
← Retour à Frontend Academy