Débutant20 min de lecture

Instructions conditionnelles

Apprends à prendre des décisions dans ton code en utilisant les instructions if, else if, else, switch et l'opérateur ternaire.

Instructions if / else

Les instructions conditionnelles permettent à ton code de prendre des décisions. La plus fondamentale est l'instruction if / else :

javascript
const temperature = 30;

if (temperature > 25) {
  console.log('It is hot outside!');
} else {
  console.log('It is not that hot.');
}

La condition entre les parenthèses est évaluée comme un booléen. Si elle est truthy, le premier bloc s'exécute. Si elle est falsy, le bloc else s'exécute (s'il est fourni).

Règles clés :

  • La condition doit être entourée de parenthèses ().
  • Le bloc de code doit être entouré d'accolades {}.
  • La clause else est optionnelle.
  • Tu peux imbriquer des instructions if les unes dans les autres, mais trop d'imbrication rend le code difficile à lire.

else if & switch

Quand tu dois vérifier plusieurs conditions, utilise else if pour les enchaîner :

javascript
const score = 85;

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

Les conditions sont vérifiées de haut en bas. La première qui est vraie s'exécute, et les autres sont ignorées.

Pour comparer une variable à des valeurs spécifiques, une instruction switch peut être plus claire :

javascript
const day = 'Monday';

switch (day) {
  case 'Monday':
  case 'Tuesday':
    console.log('Start of the week');
    break;
  case 'Friday':
    console.log('Almost weekend!');
    break;
  default:
    console.log('Just another day');
}

N'oublie pas le mot-clé break — sans lui, l'exécution "tombe" sur le cas suivant. Le cas default s'exécute quand aucun autre cas ne correspond.

Vérificateur de température

html
<p id="weather">Checking weather...</p>

<script>
  const temperature = 22;
  const weather = document.getElementById('weather');

  if (temperature >= 35) {
    weather.textContent = 'Extreme heat! Stay indoors.';
  } else if (temperature >= 25) {
    weather.textContent = 'It is warm and sunny.';
  } else if (temperature >= 15) {
    weather.textContent = 'Pleasant weather, enjoy!';
  } else if (temperature >= 5) {
    weather.textContent = 'It is chilly, grab a jacket.';
  } else {
    weather.textContent = 'Freezing! Bundle up.';
  }
</script>

L'opérateur ternaire

L'opérateur ternaire est un raccourci pour les affectations if/else simples. Il utilise la syntaxe :

javascript
condition ? valueIfTrue : valueIfFalse

Exemples :

javascript
const age = 20;
const status = age >= 18 ? 'adult' : 'minor';
// status is 'adult'

const score = 75;
const passed = score >= 60 ? 'Pass' : 'Fail';
// passed is 'Pass'

L'opérateur ternaire est excellent pour des conditions simples et concises. Cependant, évite d'imbriquer des ternaires ou de les utiliser pour une logique complexe — une instruction if/else sera plus lisible dans ces cas.

javascript
// Évite ceci — difficile à lire
const result = a > b ? a > c ? 'a wins' : 'c wins' : b > c ? 'b wins' : 'c wins';

// Utilise plutôt if/else pour une logique complexe

Que va évaluer `if (0) { 'yes' } else { 'no' }` ?

Prêt à pratiquer ?

Crée ton compte gratuit pour accéder à l'éditeur de code interactif, lancer les défis et suivre ta progression.