Les Conditions
Présentation
Les conditions sont utilisées pour créer des bifurcations dans le flux de votre code. Cela signifie que vous pouvez dire à votre programme : "Si quelque chose est vrai, fais ceci ; sinon, fais cela." Nous disposons de trois types principaux de conditions :
- La condition if (si) : Cela nous permet d'exécuter un bloc de code si une condition est vrai.
- La condition if... else (si... sinon) : Avec cette structure, nous pouvons exécuter un bloc de code si une condition est vraie et un autre bloc de code si la condition est fausse.
- La condition if... else if... else (si... sinon si... sinon) : Cette structure est utile lorsque nous avons plusieurs conditions à vérifier en cascade. Elle nous permet d'associer des blocs de code spécifiques à chaque condition, en exécutant celui correspondant à la première condition vraie rencontrée.
Instruction if
L'instruction if est l'une des structures conditionnelles les plus couramment utilisées. Elle permet d'exécuter un bloc de code si une condition est vraie true.
La structure d'une condition if est composée de la sorte : l'instruction if suivie de la condition entre parenthèses ( la condition ) et enfin le bloc d'instructions à exécuter si la condition est vraie, ce bloc est délimité par les accolades :
if ( la condition )
{
bloc avec les instructions à exécuter si la condition est vraie...
...
...
}
Pour illustrer le fonctionnement de cette structure, prenons un exemple simple. Supposons que nous voulions vérifier si une personne est majeure. Imaginez que nous ayons une personne nommée Claudy, dont l'âge est de 52 ans :
// Nous attribuons l'âge de Claudy à une constante :
const claudyAge = 52;
// Si la valeur de la constante 'claudyAge' est supérieure ou égale à 18 alors exécuter les instructions situées dans le bloc entre accolades :
if (claudyAge >= 18)
{
console.log('La personne est majeure !\n');
}
// L'instruction suivante étant affichée en dehors de la structure conditionnelle, elle sera exécutée quel que soit le résultat de la condition :
console.log('La condition a été testée !');
/* Affiche :
La personne est majeure !
La condition a été testée !
*/
Désormais, nous souhaitons avoir la capacité de saisir des âges différents à la volée sans avoir à modifier le code à chaque fois. Pour accomplir cela, nous pouvons utiliser la fonction prompt(). Cette fonction, disponible lors de l'exécution d'un script en ligne de commande, permet de personnaliser le texte affiché à l'écran pour guider l'utilisateur. Une fois que l'utilisateur a saisi sa réponse et appuyé sur la touche "Entrée", la valeur qu'il a saisie peut être stockée dans une variable pour une utilisation ultérieure. Il est important de noter que tant que l'utilisateur n'a pas validé en appuyant sur "Entrée", le programme reste en pause :
/*
1. La fonction prompt() affiche la chaîne de caractères située entre les parenthèses.
2. Le programme se met en pause en attendant une entrée de l'utilisateur.
3. Une fois que l'utilisateur valide sa saisie, celle-ci est stockée dans la constante 'age' et le programme reprend à partir de la ligne suivante.
*/
const age = prompt('Veuillez entrer l\'âge à tester : ');
if (age >= 18)
{
console.log("La personne est majeure !\n");
}
Instruction else
Nous aimerions aussi afficher un message si la personne est mineur et comme une personne est soit majeure soit mineure, nous pouvons utiliser l'instruction else suivi d'un autre bloc d'instructions délimité lui aussi par des accolades {} :
const age = prompt('Veuillez entrer l\'âge à tester : ');
if (age >= 18)
{
console.log('La personne est majeure !');
}
else
{
console.log('La personne est mineure !');
}
Instruction else if
Il est également possible de tester plusieurs conditions au sein d'une même structure de contrôle conditionnelle en utilisant l'instruction else if, suivi d'un autre bloc d'instructions délimité par des accolades. Dans l'exemple suivant, nous demandons à l'utilisateur de fournir un nombre représentant les années de mariage, afin que le programme puisse déterminer et afficher le nom de l'anniversaire de mariage correspondant. Nous nous limiterons aux 2 premières années :
const anneeDeMariage = prompt('Veuillez entrer le nombre d\'années de mariage à célébrer : ');
if (anneeDeMariage == 0)
{
console.log('Bien que le temps puisse vous sembler long, la première année de mariage n\'est pas encore passée !');
}
else if (anneeDeMariage == 1)
{
console.log('Félicitations pour les Noces de Coton !');
}
else if (anneeDeMariage == 2)
{
console.log('Félicitations pour les Noces de Cuir !');
}
else
{
console.log('Quel courage ! Vous êtes marié depuis plus de 2 ans !');
}
Les Opérateurs de Comparaison
En plus des opérateurs de comparaison vus préalablement (<, >, <= et >=), nous venons d'en introduire un nouvel, l'opérateur d'égalité non stricte ==. Il permet de vérifier si les valeurs comparées sont égales en contenu sans tenir compte de leur type de données.
// Initialisation de la constante 'a' avec une valeur numérique de type chaîne de caractère (string);
const a = '5';
// Initialisation de la constante 'b' avec une valeur numérique de type nombre (number);
const b = 5;
console.log('type de a : ' + typeof(a)); // Affiche : string
console.log('type de b : ' + typeof(b)); // Affiche : number
// Bien que les valeurs ne sont pas identiques en tout point puise leur type est différent, la condition renvoie true en raison de l'utilisation de l'opérateur d'égalité non strict.
console.log(a == b); // Affiche : true
Lorsqu'on utilise l'opérateur d'égalité non stricte (==), il faut rester vigilant, car JavaScript convertit automatiquement les types des valeurs avant de les comparer. Cette conversion implicite peut parfois produire des résultats inattendus.
Imaginons un formulaire qui doit gérer le cas où l'utilisateur ne remplit pas un champ obligatoire, afin de lui afficher un message d'erreur indiquant que ce champ est requis. Dans l'exemple suivant, pour vérifier si le champ n'a pas été complété, sa valeur est comparée à false. Si l'utilisateur n'a pas d'enfant et saisit la valeur 0, la comparaison devient (0 == false). Bien que le champ ait été correctement rempli, cette condition retournera true, et le message d'erreur s'affichera à tort.
// Stocker l'entrée utilisateur du champ "nombreEnfants".
const nombreEnfants = 0;
// Affiche un message d'erreur si le champ "nombreEnfants" n'a pas été rempli.
// Cependant, dans cet exemple, l'opérateur d'égalité non strict va poser problème.
if (nombreEnfants == false)
{
console.log('Erreur: ce champ est requis !');
}
// Affiche : Erreur: ce champ est requis !
Le problème vient du fait que la valeur 0 fait partie des valeurs dites falsy (autrement dit, des valeurs que JavaScript interprète comme fausses dans un test logique). Ainsi, lors de la comparaison (0 == false), JavaScript considère ces deux valeurs comme équivalentes et la condition renvoie true. Le programme croit donc que le champ n'a pas été rempli, alors que l'utilisateur a bien saisi 0. Pour éviter ce comportement, il est préférable d'utiliser l'opérateur d'égalité stricte ===, qui compare à la fois la valeur et le type sans conversion implicite.
// Stocker l'entrée utilisateur du champ "nombreEnfants".
const nombreEnfants = 0;
// Affiche un message d'erreur si le champ "nombreEnfants" n'a pas été rempli.
if (nombreEnfants === false)
{
console.log('Erreur: ce champ est requis !');
}
// N'affichera rien, la condition n'est pas remplie.
Les valeurs falsy et truthy
Même si une expression ne renvoie pas explicitement un booléen, JavaScript applique automatiquement une conversion logique au moment où la valeur est évaluée dans l'expression conditionnelle, c'est-à-dire entre les parenthèses d'un if, else if ou encore d'une boucle while. Cette conversion sert à déterminer si l'expression doit être considérée comme vraie ou fausse.
Certaines valeurs deviennent toujours false lorsqu'elles sont évaluées dans une condition. On les appelle les valeurs falsy.
Voici les valeurs falsy les plus usuelles :
- false
- 0
- 0n (BigInt zéro)
- '' (chaîne vide)
- null
- undefined
- NaN
Toutes les autres valeurs sont automatiquement converties en true on les appelle les valeurs truthy. Cela inclut les chaînes non vides, les nombres différents de zéro, les tableaux, les objets ou encore les fonctions.
Exemples de valeurs truthy : 'bonjour', 42, [], {}.
Comprendre la distinction entre falsy et truthy aide à anticiper ce que JavaScript fera lorsqu'il doit décider si une valeur doit être interprétée comme vraie ou fausse dans une condition. C'est un mécanisme fondamental qui permet d'éviter de nombreuses confusions lors de l'écriture des tests logiques.
Utiliser l'opérateur de négation ! dans une condition
Si vous souhaitez vérifier si les valeurs sont différentes plutôt qu'égales, il vous suffit de remplacer le premier signe égal par l'opérateur de négation !, que ce soit pour l'opérateur d'égalité non strict != ou strict !== :
// Stocker l'entrée utilisateur du champ "nombreEnfants".
const nombreEnfants = 0;
// Affiche un message de succès si le champ "nombreEnfants" a bien été rempli.
if (nombreEnfants !== false)
{
console.log('Merci, ce champ est bien rempli !');
}
// Affiche : Merci, ce champ est bien rempli !
Il est courant de voir l'opérateur de négation (!) placé directement devant une variable (ex.: !nombreEnfants). Cet opérateur transforme la valeur en un booléen avant d'en inverser le résultat. Autrement dit, il convertit d'abord la variable en true ou false selon qu'elle soit truthy ou falsy, puis inverse cette valeur logique. C'est une écriture raccourcie très utilisée pour vérifier si une variable est vide, nulle ou non définie, sans passer par une comparaison explicite.
// Stocker l'entrée utilisateur du champ "nombreEnfants".
const nombreEnfants = 0;
// Vérifie si le champ "nombreEnfants" n'a pas été rempli.
if (!nombreEnfants)
{
console.log('Erreur : ce champ est requis !');
}
// Affiche : Erreur : ce champ est requis !
Ici, la variable nombreEnfants vaut 0, et comme 0 fait partie des valeurs falsy (c'est-à-dire des valeurs que JavaScript convertit implicitement en false dans un test logique), l'expression !nombreEnfants est alors évaluée comme true. Le programme considère donc à tort que le champ n'a pas été rempli, alors que la valeur saisie est correcte. Ce raccourci reste pratique dans de nombreux cas, mais il faut l'utiliser en connaissance de cause, en gardant à l'esprit que certaines valeurs valides comme 0 ou une chaîne vide peuvent être interprétées comme fausses.
Imbrication des structures conditionnelles
Il est possible d'imbriquer plusieurs structures conditionnelles les unes dans les autres. Cela permet de traiter une situation générale, puis d'affiner le comportement lorsque la première condition est validée. L'exemple suivant illustre ce fonctionnement étape par étape.
// La fonction prédéfinie "prompt()" affiche une fenêtre de saisie et attend que
// l'utilisateur entre une valeur puis la valide.
// Elle renvoie toujours le texte saisi sous forme de chaîne de caractères,
// même lorsque l'utilisateur entre un nombre.
const nombreEnfants = prompt('Combien d\'enfants avez-vous ?');
// Afficher une erreur si l'utilisateur ne rempli pas le champ, sinon passer dans le bloc de conditions suivant :
if (!nombreEnfants)
{
console.log('Erreur: ce champ est requis !');
}
else
{
console.log('Merci, ce champ est bien rempli !');
// Afficher un message différent en fonction du nombre d'enfants entré par l'utilisateur.
if (nombreEnfants > 5)
{
console.log('Vous avez beaucoup d\'enfants !');
}
else if (nombreEnfants > 0)
{
// Nous utilisons l'opérateur de concaténation pour inclure le nombre d'enfants entré par l'utilisateur dans le message à afficher.
console.log("Vous avez " + nombreEnfants + " enfant(s) !");
}
else
{
console.log('Vous n\'avez pas d\'enfants !');
}
}
Ce code fonctionne en deux niveaux.
Le premier niveau est composé de deux blocs :
- Un bloc if (!nombreEnfants) exécuté lorsque le champ est laissé vide. Il affiche un message d'erreur et empêche l'exécution du bloc qui suit.
-
Un bloc else
exécuté lorsque l'utilisateur a bien saisi une valeur.
Ce bloc contient une structure conditionnelle enfant permettant d'affiner
le message affiché selon la valeur entrée.
Le niveau enfant contient trois cas possibles :- if (nombreEnfants > 5) pour afficher un message lorsque l'utilisateur a beaucoup d'enfants.
- else if (nombreEnfants > 0) pour afficher le nombre d'enfants saisi.
- else pour indiquer que l'utilisateur n'a pas d'enfants.
Notez que dans cet exemple, l'utilisation de la négation !nombreEnfants (comparaison non stricte) ne pose aucun problème, même si l'utilisateur saisit 0. En effet, la fonction prompt() renvoie toujours une chaîne de caractères. Ainsi, la valeur saisie "0" n'est pas falsy, et la négation ne renverra true que si le champ est réellement vide, c'est-à-dire la chaîne vide "".
Si vous souhaitez explorer davantage sur les opérateurs de comparaison, vous pouvez consulter MDN Web Docs.
Les Opérateurs Logiques
Il est également possible de combiner les opérateurs de comparaison avec des opérateurs logiques. Les deux opérateurs logiques les plus couramment utilisés sont "ET" AND (ou &&), qui vérifie si toutes les conditions sont vraies, et "OU" OR (ou ||), qui vérifie si au moins une des conditions est vraie.
Dans l'exemple suivant, nous avons deux variables servant à définir les caractéristiques d'une balle. Utilisons l'opérateur logique "ET" (&&) pour vérifier si la balle est lisse ET rouge :
const balleTexture = 'lisse';
const balleCouleur = 'rouge';
// Si les deux caractéristiques de la balle sont respectées alors la condition est vraie :
if (balleTexture === 'lisse' && balleCouleur === 'rouge')
{
console.log('Il s\'agit de la bonne balle !');
}
else
{
console.log('Il ne s\'agit pas de la bonne balle !');
}
// Affiche : Il s'agit de la bonne balle !
Utilisons mainenant l'opérateur logique "OU" (||) pour vérifier si la balle est rouge OU si elle est lisse ou encore si elle est rouge et lisse :
const balleTexture = 'lisse';
const balleCouleur = 'rouge';
// Si l'une des deux caractéristiques de la balle est respectée alors la condition est vraie :
if ($balleTexture === 'rugueux' || $balleCouleur === 'rouge')
{
console.log('Il s\'agit de la bonne balle !');
}
else
{
console.log('Il ne s\'agit pas de la bonne balle !');
}
// Affiche : Il s'agit de la bonne balle !
Pour résumer, voici les tables de vérité qui permettent de représenter toutes les combinaisons possibles de valeurs de vérité (vrai ou faux) et ainsi de déterminer le résultat d'une expression logique pour chaque combinaison d'entrées :
Négation d'une expression logique
Il est possible de mettre un ! devant une expression pour inverser son résultat. Si l'expression est vraie, la négation devient fausse, et inversement. Cela permet de tester facilement le cas « tout sauf cette situation ».
const balleTexture = 'lisse';
const balleCouleur = 'rouge';
/*
On cherche ici le cas où la balle n'a PAS à la fois
une texture rugueuse ET une couleur rouge.
L'expression (balleTexture === 'rugueux' && balleCouleur === 'rouge')
serait vraie uniquement si les deux caractéristiques correspondent.
Le symbole ! inverse ce résultat :
- si au moins une caractéristique ne correspond pas, la négation sera vraie.
*/
if (!(balleTexture === 'rugueux' && balleCouleur === 'rouge'))
{
console.log('Il ne s\'agit pas de la bonne balle !');
}
else
{
console.log('Il s\'agit de la bonne balle !');
}
// Affiche : Il ne s'agit pas de la bonne balle !
Pour mieux comprendre ce qui se passe ici, il est utile de réécrire mentalement la condition. La négation de (A && B) peut se lire (!A || !B). Autrement dit, dire "ce n'est pas A et B" revient à dire "A est faux, ou B est faux (ou les deux)". Cette équivalence aide à voir pourquoi la condition devient vraie dès qu'une seule des deux caractéristiques ne correspond pas.
Priorité des opérateurs logiques
Lorsque plusieurs opérateurs logiques se trouvent dans la même condition, il peut arriver d'obtenir un résultat différent de celui que l'on attendait. Cela vient du fait que chaque opérateur possède une priorité d'évaluation. Certains sont vérifiés avant d'autres.
Voici les opérateurs logiques classés par ordre de priorité :
- Les parenthèses ()
- L'opérateur NON !
- L'opérateur ET &&
- L'opérateur OU ||
Dans l'exemple suivant, l'objectif serait de vérifier que la balle est lisse ou rugueuse, et qu'elle est obligatoirement de couleur verte.
const balleTexture = 'lisse';
const balleCouleur = 'rouge';
/*
L'opérateur && est évalué avant ||
L'expression est donc interprétée ainsi :
1. (balleTexture === 'rugueux' && balleCouleur === 'vert')
= (false && false) = false
2. (balleTexture === 'lisse' || false)
= (true || false) = true
*/
if (balleTexture === 'lisse' || balleTexture === 'rugueux' && balleCouleur === 'vert')
{
console.log('Il s\'agit de la bonne balle !');
}
// Affiche : Il s'agit de la bonne balle !
Le résultat peut surprendre. Comme l'opérateur && est prioritaire, la partie balleTexture === 'rugueux' && balleCouleur === 'vert' est évaluée en premier, ce qui modifie le sens de la condition complète.
Pour éviter toute ambiguïté, il est recommandé d'utiliser des parenthèses. Elles permettent d'indiquer clairement l'ordre dans lequel les expressions doivent être évaluées.
const balleTexture = 'lisse';
const balleCouleur = 'rouge';
/*
Grâce aux parenthèses, l'évaluation se déroule dans l'ordre prévu :
1. (balleTexture === 'lisse' || balleTexture === 'rugueux')
= (true || false) = true
2. (true && balleCouleur === 'vert')
= (true && false) = false
*/
if ((balleTexture === 'lisse' || balleTexture === 'rugueux') && balleCouleur === 'vert')
{
console.log('Il s\'agit de la bonne balle !');
}
// N'affiche rien, la condition n'est pas remplie.
Cette fois-ci, la condition suit exactement l'intention de départ. Les parenthèses indiquent explicitement que l'on souhaite d'abord tester la texture, puis vérifier la couleur. Elles clarifient la lecture et évitent toute confusion liée à la priorité des opérateurs.
Améliorer la lisibilité des conditions
Lorsque une condition devient longue ou contient plusieurs opérateurs, il est conseillé de la présenter sur plusieurs lignes. Cette mise en forme permet de mieux voir la structure logique et facilite la lecture.
const balleTexture = 'lisse';
const balleCouleur = 'rouge';
if (
(balleTexture === 'lisse' || balleTexture === 'rugueux')
&& balleCouleur === 'vert'
)
{
console.log('Il s\'agit de la bonne balle !');
}
// N'affichera rien, la condition n'est pas remplie.
Pour clarifier davantage votre code, il est possible d'extraire certaines parties de la condition dans des variables au nom explicite. Cette approche rend la logique plus facile à lire, à comprendre et à déboguer.
const balleTexture = 'lisse';
const balleCouleur = 'rouge';
// Stocker les résultats des tests dans des constantes aux noms explicites.
const estLisseOuRugueux = balleTexture === 'lisse' || balleTexture === 'rugueux';
console.log(estLisseOuRugueux); // Affiche : true
const estVert = balleCouleur === 'vert';
console.log(estVert); // Affiche : false
if (estLisseOuRugueux && estVert)
{
console.log('Il s\'agit de la bonne balle !');
}
// N'affichera rien, la condition n'est pas remplie.
Expressions logiques et valeurs retournées
L'expression placée entre les parenthèses d'un if() n'est pas limitée aux comparaisons classiques comme === ou aux opérateurs logiques. Elle peut contenir n'importe quelle expression capable de produire un résultat qui sera interprété comme vrai (true) ou faux (false). Cela inclut notamment les fonctions qui renvoient une valeur logique.
Par exemple, la fonction isNaN() (is not a number ?) permet de vérifier si une valeur n'est pas un nombre. C'est très utile lorsque l'on récupère une entrée utilisateur avec prompt(), car cette fonction renvoie toujours une chaîne de caractères, même lorsque l'utilisateur tape un nombre.
const valeur = prompt('Entrez une valeur à tester :');
// Vérifier si la valeur peut être interprétée comme un nombre.
if (!isNaN(valeur))
{
console.log('La valeur est considérée comme numérique.');
}
else
{
console.log('La valeur n\'est pas numérique.');
}
Ici, la condition utilise directement le résultat de isNaN(), qui renvoie true ou false.
Le XOR logique en Javascript
Notez qu'en JavaScript il n'existe pas d'opérateur logique "OU exclusif" (XOR). Pour obtenir ce comportement, on peut combiner deux tests logiques. L'expression (x && !y) || (!x && y) traduit directement la règle du XOR une seule condition doit être vraie pour que l'ensemble soit vrai.
const balleTexture = 'lisse';
const balleCouleur = 'rouge';
// Deux tests logiques séparés.
const estTextureValide = (balleTexture === 'lisse');
const estCouleurValide = (balleCouleur === 'bleue');
// XOR logique : vrai uniquement si une des deux conditions est vraie.
if ((estTextureValide && !estCouleurValide) || (!estTextureValide && estCouleurValide))
{
console.log('Une seule caractéristique correspond');
}
else
{
console.log('Les deux correspondent ou aucune ne correspond');
}
L'expression ci-dessus fonctionne uniquement lorsque l'on compare deux valeurs booléennes. Le "OU exclusif" logique classique se définit pour deux conditions seulement vrai si l'une est vraie et l'autre est fausse. Dès que l'on souhaite vérifier plus de deux conditions, cette forme ne suffit plus.
Il reste toutefois possible de créer une petite fonction dédiée qui vérifie si une seule condition est vraie parmi plusieurs.
// Fonction qui renvoie vrai uniquement si une seule condition est vraie.
// Le paramètre ...conditions rassemble toutes les valeurs passées en argument
// et les place dans un tableau, quel que soit leur nombre.
function verifierXorLogique(...conditions)
{
let compteur = 0;
// Parcourir chaque valeur booléenne fournie dans "conditions".
for (const c of conditions)
{
// Ajouter 1 au compteur lorsque la valeur courante vaut true.
if (c === true)
{
compteur++;
}
}
// Le XOR logique généralisé est vrai uniquement si le compteur
// contient exactement une valeur true.
return compteur === 1;
}
// Exemple d'utilisation :
verifierXorLogique(false, false, false); // false
verifierXorLogique(true, true, true); // false
verifierXorLogique(true, true, false); // false
verifierXorLogique(false, false, true); // true
Cette approche rend le code plus lisible et évite de multiplier les combinaisons logiques complexes.
Instruction switch
Abordant maintenant une alternative aux structures de conditions telles que nous venons de les voir if...elsif...else. Il s'agit de la structure switch qui permet d'évaluer une expression ou une variable et de choisir parmi plusieurs cas d'exécution en fonction de la valeur de cette expression. Voici comment il fonctionne :
- Évaluation de l'expression : L'expression à évaluer est spécifiée entre les parenthèses de switch. Cette expression est évaluée une seule fois.
- Correspondance avec les case : Le programme compare la valeur de l'expression à chaque case (cas) spécifié dans la structure switch .
- Exécution du code correspondant : Si une correspondance est trouvée entre la valeur de l'expression et l'une des "case" (égalité strict), le bloc de code associé à cette case est exécuté. L'exécution continue jusqu'à ce qu'un break soit rencontré, indiquant la fin du traitement pour ce cas particulier.
- Sortie du switch : Une fois le code d'une case est exécuté et qu'un break y est présent. Si aucun break n'est utilisé, le programme continuera à exécuter le code des case suivants jusqu'à ce qu'il rencontre un break ou atteigne la fin du switch.
- default (optionnel) : Vous pouvez également inclure une section default dans votre structure switch. Si aucune correspondance n'est trouvée entre la valeur de l'expression et les case précédents, le code de la section default sera exécuté.
Voici une conversion de l'exemple sur les années de mariage que nous avions réalisé lorsque nous avons débuter avec else if :
// Convertir le nombre d'années en entier de type number.
const anneeDeMariage = parseInt(prompt('Veuillez entrer le nombre d\'années de mariage à célébrer : '));
// La valeur de anneeDeMariage va être comparée avec celles des 'case' :
switch (anneeDeMariage) {
case 0:
console.log('Bien que le temps puisse vous sembler long, la première année de mariage n\'est pas encore passée !');
break;
case 1:
console.log('Félicitations pour les Noces de Coton !');
break;
case 2:
console.log('Félicitations pour les Noces de Cuir !');
break;
default:
console.log('Quel courage ! Vous êtes marié depuis plus de 2 ans !');
}
Finalement, l'utilisation de switch peut rendre le code plus clair lorsque vous avez de nombreuses branches conditionnelles basées sur une valeur unique mais étant moins flexible que la structure if...else if...else, vous ne devriez pas la rencontrer souvent.
Syntaxes compactes pour choisir une valeur
Opérateur ternaire
L'opérateur ternaire est une alternative pratique lorsque l'on veut assigner une valeur ou une autre à une variable en fonction d'une condition. Il permet d'exprimer ce choix en une seule ligne, plutôt qu'avec une structure if / else complète.
Sa forme est la suivante :
variable = ( condition ) ? valeur si la condition est vraie : valeur si la condition est fausse;
Reprenons l'exemple vu lors de la présentation de else et réécrivons-le avec l'opérateur ternaire.
const age = 21;
const resultat = (age >= 18)
? 'La personne est majeure !'
: 'La personne est mineure !';
console.log(resultat); // Affiche : La personne est majeure !
L'opérateur ternaire reste utile tant que la condition est simple. Il ne faut pas l'utiliser pour des structures imbriquées complexes, car cela nuit rapidement à la lisibilité du code.
Gérer des valeurs par défaut avec ||
JavaScript permet aussi d'attribuer une valeur par défaut à l'aide de l'opérateur logique ||. Cette écriture renvoie la valeur de droite si la valeur de gauche est évaluée comme falsy (false, 0, '', null, undefined, NaN, etc.).
variable = valeur principale || valeur par défaut;
const texte = prompt('Veuillez entrer du texte : ');
const resultat = texte || '!!! VOUS N\'AVEZ PAS ENTRÉ DE TEXTE !!!';
console.log('Mon texte : ' + resultat);
Cette écriture est pratique, mais elle remplace également des valeurs valides telles que 0 ou false, car celles-ci font partie des valeurs falsy. Il est donc important de l'utiliser en connaissance de cause.
Utiliser l'opérateur de coalescence nulle ??
L'opérateur ??, appelé opérateur de coalescence nulle, renvoie la valeur de droite uniquement si la valeur de gauche vaut null ou undefined.
variable = valeur principale ?? valeur par défaut;
const valeur = 0;
const resultat = valeur ?? 42;
console.log(resultat); // Affiche : 0 (la valeur principale est gardée)
Cet opérateur est utilisé lorsqu'une valeur comme 0, false ou '' doit être conservée comme une donnée valide.
Exercices
Exo-conditions-01
- Objectif : Une plante d'intérieur doit être arrosée lorsque l'humidité du sol devient trop basse. Le programme doit afficher un message uniquement si le taux d'humidité est insuffisant.
-
Instructions :
-
Déclarez une constante contenant le pourcentage d'humidité à analyser.
// Pourcentage d'humidité du sol. const humiditeSol = 25; - Ajoutez une structure conditionnelle qui vérifie si la valeur de humiditeSol est inférieure à 30.
- Si cette condition est vérifiée, affichez un message indiquant que la plante doit être arrosée.
- Si la condition n'est pas vérifiée, ne faites rien (aucun message n'est affiché).
- Passez la valeur de humiditeSol à 30 ou plus afin de vérifier que le programme ignore correctement les cas où l'humidité est suffisante.
-
Déclarez une constante contenant le pourcentage d'humidité à analyser.
Exo-conditions-02
- Objectif : Un cinéma applique une réduction lorsque le client saisit un code promotionnel valide. Le programme doit vérifier le code entré par l'utilisateur et afficher le message approprié.
-
Instructions :
- Demandez à l'utilisateur d'entrer un code à l'aide de la fonction prompt(), puis stockez le texte saisi dans une constante nommée codePromo.
- Créez une structure conditionnelle if...else pour vérifier si le texte saisi correspond exactement au code valide CINE2025.
- Si le code est correct, affichez un message confirmant que la réduction est appliquée.
- Si le code ne correspond pas, affichez un message indiquant que le code est invalide.
- Testez différentes saisies (un code valide et un code invalide) afin de vérifier que le script réagit comme attendu.
Exo-conditions-03
- Objectif : Un drone peut afficher différents messages selon son niveau de batterie. Le programme doit analyser la valeur stockée dans une constante et afficher l'état correspondant.
-
Instructions :
-
Déclarez une constante contenant le niveau de batterie du drone.
Trois valeurs sont possibles :
- 0 (batterie vide),
- 1 (batterie faible),
- 2 (batterie pleine).
// Niveau de batterie du drone (0, 1 ou 2). const niveauBatterie = 1; - Créez une structure conditionnelle if ... else if ... else pour analyser la valeur de niveauBatterie.
- Si la valeur est 0, affichez un message indiquant que la batterie est vide.
- Si la valeur est 1, affichez un message indiquant que la batterie est faible.
- Si la valeur est 2, affichez un message indiquant que la batterie est pleine.
- Ajoutez un bloc final else pour gérer les valeurs qui ne font pas partie des niveaux prévus. Affichez un message indiquant que la valeur est inconnue.
- Modifiez la constante niveauBatterie afin de tester les différents scénarios et vérifier que le programme réagit comme attendu.
-
Déclarez une constante contenant le niveau de batterie du drone.
Trois valeurs sont possibles :
Exo-conditions-04
- Objectif : Dupliquez le script de l'exercice précédent sur le niveau de batterie du drone et adaptez-le pour que le niveau de batterie soit demandé à l'utilisateur à l'aide de la fonction prompt().
-
Instructions :
- Copiez le code de l'exercice précédent dans un nouveau fichier afin de repartir de la même structure if ... else if ... else.
- Remplacez la constante qui contenait directement le niveau de batterie par un appel à prompt(). Stockez le résultat dans une constante nommée niveauBatterie.
- Conservez la même structure conditionnelle que dans l'exercice précédent afin d'afficher un message différent selon la valeur de niveauBatterie.
- Testez plusieurs entrées en relançant le programme et en saisissant 0, 1, 2 ou d'autres valeurs dans la fenêtre prompt(), puis observez les messages affichés.
- Si vous avez utilisé l'opérateur de comparaison strict === avec des nombres (0, 1, 2), vous constaterez que les tests ne fonctionnent plus correctement. La raison est simple. La fonction prompt() renvoie toujours une chaîne de caractères, même lorsque l'utilisateur saisit un nombre ("0", "1", "2"). L'opérateur strict compare le type et la valeur. Une chaîne (string) n'est jamais strictement égale à un nombre (number). Les tests d'égalité renvoient donc toujours false.
- Pour corriger cette situation, deux solutions sont possibles. La première consiste à utiliser l'opérateur d'égalité non strict ==, qui ignore le type lors de la comparaison. La seconde consiste à transformer la saisie utilisateur en nombre avec parseInt() ou Number(). Cette seconde approche est recommandée car elle permet de conserver l'égalité stricte ===, plus sûre et plus prévisible dans les programmes.
Exo-conditions-05
- Objectif Dupliquez votre script de l'exercice précédent sur le niveau de batterie du drone et adaptez-le pour utiliser une structure switch à la place du if ... else if ... else.
-
Instructions
- Copiez le code de l'exercice précédent dans un nouveau fichier afin de repartir de la version qui demande le niveau de batterie via prompt().
- Conservez la conversion en nombre avec Number(), car une structure switch utilise l'égalité stricte. Sans cette conversion, aucune correspondance ne sera trouvée.
- Remplacez la structure if...else if...else par une structure switch qui analyse la valeur de niveauBatterie.
- Créez un case pour chacune des valeurs prévues 0, 1, 2. Affichez un message adapté pour chaque cas et n'oubliez pas d'ajouter break pour éviter d'exécuter plusieurs messages.
- Ajoutez un bloc default pour gérer toute valeur inattendue.
- Testez votre programme en saisissant plusieurs valeurs dans la fenêtre prompt() telles que 0, 1, 2 ou une autre valeur.
- Pour comprendre le fonctionnement interne de switch, commentez ou supprimez volontairement un break puis relancez le programme. Saisissez la valeur correspondant à ce case et observez que les messages des cases suivantes s'enchaînent jusqu'à rencontrer un break.
Exo-conditions-06
- Objectif : Un service d'expédition vérifie d'abord si le paiement d'un colis a été effectué. Si c'est le cas, il analyse ensuite le poids du colis pour déterminer le type d'envoi.
-
Instructions :
-
Déclarez deux constantes :
- paiementEffectue contenant une valeur booléenne,
- poidsColis contenant un poids en kilogrammes.
// Indique si le paiement a été effectué. const paiementEffectue = true; // Poids du colis en kilogrammes. const poidsColis = 12; - Créez une première structure conditionnelle if...else pour vérifier si le paiement a été effectué.
- Si le paiement n'est pas effectué, affichez un message indiquant que le colis ne peut pas être expédié tant que le paiement n'est pas validé.
- Si le paiement est effectué, ajoutez à l'intérieur du else une seconde structure conditionnelle qui analyse la valeur de poidsColis.
-
Dans cette structure conditionnelle enfant, affichez :
- Un message indiquant que le colis est trop lourd si le poids est supérieur à 20 kg.
- Un message indiquant une expédition en livraison standard si le poids est supérieur à 5 kg.
- Un message indiquant une expédition en livraison rapide si le poids est inférieur ou égal à 5 kg.
- Modifiez les valeurs de paiementEffectue et poidsColis afin de tester les différents comportements de votre programme.
-
Déclarez deux constantes :
Exo-conditions-07
- Objectif : Simuler un contrôle d'accès dans un bâtiment sécurisé. L'accès peut être autorisé dans certains cas, mais reste interdit si la zone est placée en quarantaine. Le programme doit combiner les opérateurs ||, && et ! dans une seule condition logique.
-
Instructions :
-
Déclarez trois constantes représentant la situation :
- accompagneParSecurite indiquant si la personne est escortée par un agent (true ou false).
- badgeValide indiquant si le badge présenté est reconnu comme valide (true ou false).
- estZoneEnQuarantaine indiquant si l'accès est suspendu pour raisons sanitaires (true ou false).
-
Commencez par exprimer les situations qui permettent un accès :
- la personne est accompagnée par la sécurité OU elle possède un badge valide,
- ET la zone ne doit pas être en quarantaine.
-
Créez une structure if ... else qui affiche :
- "Accès autorisé." lorsque les conditions le permettent,
- "Accès refusé." dans tous les autres cas.
- Testez plusieurs combinaisons de valeurs pour vérifier que votre condition réagit correctement selon les différents cas possibles.
-
Déclarez trois constantes représentant la situation :
Exo-conditions-08
- Objectif : Un service de streaming propose un tarif réduit aux utilisateurs remplissant une certaine condition d'âge. Le programme doit déterminer automatiquement quel tarif appliquer en utilisant l'opérateur ternaire.
-
Instructions :
- Le tarif réduit est de 5 € et le tarif normal de 12 €. Définissez les constantes tarifReduit et tarifNormal avec ces valeurs.
- Demandez à l'utilisateur de saisir son âge à l'aide de la fonction prompt() et stockez le texte saisi dans une constante nommée ageUtilisateur.
- Créez une constante nommée tarifFinal dont la valeur est déterminée à l'aide d'un opérateur ternaire. Le tarif réduit est appliqué si l'utilisateur a strictement moins de 18 ans, sinon le tarif normal est utilisé.
- Affichez un message dans la console indiquant le tarif appliqué par exemple 'Tarif appliqué : ' + tarifFinal.
- Testez plusieurs saisies d'âge pour vérifier que le ternaire sélectionne correctement l'un ou l'autre des tarifs.