Écrire des conditions lisibles

Une interface ne doit pas afficher le même message lorsque la liste est vide et lorsqu’elle contient des tâches. Vous allez utiliser des conditions pour adapter le texte à la situation. Pour cette leçon, les données restent des valeurs simples : vous n’avez pas encore besoin d’un tableau ni d’objets.

Vous avez déjà appris à comparer des valeurs et à combiner des comparaisons. Ici, vous allez utiliser le résultat de ces expressions pour choisir quelles instructions JavaScript exécuter. Dans les exemples, remplacez les extraits temporaires de js/main.js par le code présenté, comme indiqué dans l’état du projet, puis ouvrez la console du navigateur.

Exécuter des instructions selon une condition

Une instruction if teste une condition. Si cette condition est vraie, JavaScript exécute les instructions placées entre les accolades qui suivent. Vous pouvez compléter cette branche par else : les instructions de ce second bloc s’exécutent lorsque la condition est fausse. Les accolades délimitent le bloc conditionnel et rendent visible ce qui dépend du test.

const nombreDeTaches = 0;

if (nombreDeTaches === 0) {
  console.log("Votre liste est vide.");
} else {
  console.log(`Votre liste contient ${nombreDeTaches} tâche(s).`);
}

Votre liste est vide.

Avec la valeur zéro, le premier bloc s’exécute et le message indique que la liste est vide. Modifiez nombreDeTaches en lui donnant la valeur 3, puis relancez le script : cette fois, le bloc else affiche que la liste contient des tâches. Les deux branches s’excluent mutuellement ; une seule est exécutée lors de ce test.

Traiter plusieurs situations avec else if

Lorsque vous devez distinguer plus de deux situations, vous pouvez placer un ou plusieurs blocs else if entre if et else. JavaScript teste les conditions dans l’ordre. Dès qu’une condition est vraie, il exécute son bloc et ignore les branches suivantes ; choisissez donc un ordre qui exprime clairement vos règles.

const nombreDeTachesTerminees = 2;

if (nombreDeTachesTerminees === 0) {
  console.log("Vous n’avez encore terminé aucune tâche.");
} else if (nombreDeTachesTerminees === 1) {
  console.log("Vous avez terminé une tâche.");
} else {
  console.log(`Vous avez terminé ${nombreDeTachesTerminees} tâches.`);
}

Vous avez terminé 2 tâches.

Testez successivement les valeurs 0, 1 et 4. Vous obtenez un message distinct pour zéro et un, puis un message général pour les valeurs restantes. Cette dernière branche traite aussi les nombres supérieurs à un sans devoir écrire une condition supplémentaire pour chacun d’eux.

Choisir une valeur avec l’opérateur ternaire

Pour choisir entre deux valeurs simples, vous pouvez employer l’opérateur ternaire. Il s’écrit avec une condition, un point d’interrogation, la valeur à utiliser si la condition est vraie, puis un deux-points et la valeur à utiliser sinon. Le résultat peut être placé dans une variable ou directement transmis à console.log. Réservez cette forme aux choix courts ; plusieurs branches ou des instructions longues sont plus claires avec if et else.

const nombreDeTachesPourMessage = 1;
const messageDeListe = nombreDeTachesPourMessage === 0
  ? "Aucune tâche à afficher."
  : "Des tâches sont à afficher.";

console.log(messageDeListe);

Des tâches sont à afficher.

La condition choisit ici une chaîne parmi deux. Le résultat est conservé dans messageDeListe, puis affiché. Les retours à la ligne autour du ternaire ne changent pas son fonctionnement ; ils permettent de distinguer plus facilement la condition et les deux résultats possibles.

Organiser les blocs conditionnels

Une condition peut contenir plusieurs instructions entre ses accolades : par exemple, calculer un texte puis l’afficher. Indentez ces instructions de façon régulière afin que leur appartenance au bloc soit évidente. Quand plusieurs règles sont nécessaires, donnez à chaque branche un rôle précis et évitez d’empiler des conditions imbriquées si une suite de else if suffit.

Dans le gestionnaire final, ces mêmes principes permettront d’adapter les messages à l’état des tâches. Vous verrez plus tard comment parcourir les tâches et calculer la progression ; pour l’instant, le but est de comprendre quel bloc s’exécute pour une valeur donnée. Les boucles, qui répètent des instructions, seront abordées dans la prochaine leçon.

À retenir

• Utilisez if pour exécuter un bloc lorsque sa condition est vraie, et else pour traiter le cas contraire.
• Ajoutez else if pour distinguer plusieurs situations ; les conditions sont testées dans l’ordre.
• Utilisez le ternaire pour choisir brièvement entre deux valeurs, pas pour remplacer une logique longue.
• Conservez les accolades et une indentation régulière pour rendre les blocs conditionnels faciles à relire.