Conditions en JavaScript

if / else if / else

===

Une condition est évaluée comme vraie ou fausse (*truthy* ou *falsy*). On compare avec ===, on combine avec &&, || et !.

if (age >= 18) { … }

Exécuté si la condition est vraie

else if (age >= 16) { … }

Sinon, test suivant

else { … }

Tous les autres cas

a === b a !== b

Égalité / différence strictes (valeur et type)

a && b a || b !a

ET, OU, NON

a ?? b

a, sauf s'il vaut null ou undefined : alors b

majorite.js

const age = 17;

if (age >= 18) {
  console.log("majeur");
} else if (age >= 16) {
  console.log("mineur de 16 ans ou plus");
} else {
  console.log("mineur de moins de 16 ans");
}

Affichage

mineur de 16 ans ou plus

switch, ternaire et valeurs falsy

switch · ?:

switch aiguille selon une valeur ; ?: choisit entre deux valeurs. En JavaScript, beaucoup de valeurs se comportent comme « faux ».

switch (jour) { case "lundi": … break; default: … }

Aiguillage (comparaison stricte ===)

cond ? a : b

Opérateur ternaire : une expression qui donne une valeur

0 "" null undefined NaN false

Les six valeurs *falsy* : traitées comme fausses

if (nom) { … }

Vrai si nom est un texte non vide

user?.adresse?.ville

Chaînage optionnel : undefined au lieu d'une erreur

x ||= 5 x ??= 5

Affecte seulement si x est falsy / s'il est nul ou indéfini

jour.js

const jour = "samedi";

switch (jour) {
  case "samedi":
  case "dimanche":
    console.log("week-end");
    break;
  default:
    console.log("semaine");
}

Affichage

week-end

🔀 Le cours : décider en JavaScript

Les conditions permettent à un programme de choisir : afficher un message d'erreur ou non, accepter une réponse ou la refuser. En JavaScript, la syntaxe de if, else et switch est celle du C et de Java ; ce qui change, c'est ce que le langage considère comme « vrai » et la façon de comparer.

Truthy et falsy

Une condition n'a pas besoin d'être un booléen : JavaScript la convertit. Il y a exactement six valeurs fausses (*falsy*) : false, 0, "" (texte vide), null, undefined et NaN. Tout le reste est vrai, y compris des cas qui surprennent : le texte "0", un tableau vide [] ou un objet vide {}.

truthy.js

const valeurs = [0, "", "0", [], null, undefined, NaN, "texte"];
const verites = valeurs.map((v) => Boolean(v));
console.log(verites.join(" "));

Affichage

false false true true false false false true

Comparer : === et les autres

Opérateur	Sens	Remarque
`===` `!==`	égal / différent, sans conversion	à utiliser systématiquement
`<` `<=` `>` `>=`	ordre	nombres : numérique ; textes : ordre alphabétique
`==` `!=`	égal / différent après conversion	à éviter

Attention : comparer deux textes se fait lettre par lettre. "10" < "9" est vrai, car "1" précède "9". Convertis d'abord avec Number(…).

comparaison.js

console.log("10" < "9", 10 < 9, Number("10") < Number("9"));

Affichage

true false false

ET, OU, NON : plus que des booléens

&& et || s'arrêtent dès que le résultat est connu et renvoient la valeur qui a décidé, pas forcément true ou false. a || b renvoie a s'il est vrai, sinon b : on s'en sert pour une valeur par défaut. a && b renvoie a s'il est faux, sinon b.

?? (opérateur de coalescence nulle) ressemble à ||, mais ne réagit qu'à null et undefined. Il est préférable quand 0 ou "" sont des valeurs légitimes.

defaut.js

const quantite = 0;

console.log(quantite || 10);
console.log(quantite ?? 10);
console.log("" || "invite");
console.log(null && "jamais");

Affichage

10
0
invite
null

switch

switch compare une valeur à plusieurs cas avec ===. Sans break, l'exécution continue dans le cas suivant (la « chute »), ce qui sert à regrouper des cas (samedi et dimanche dans l'exemple de la deuxième carte). default traite tout le reste. Pour des plages de valeurs (une note entre 10 et 12), if / else if est plus adapté.

L'opérateur ternaire

condition ? siVrai : siFaux est une expression : elle produit une valeur, ce qui permet de l'utiliser directement dans une chaîne modèle ou une affectation.

ternaire.js

const note = 14;
const mention = note >= 16 ? "tres bien" : note >= 12 ? "bien" : "passable";
const parite = note % 2 === 0 ? "pair" : "impair";

console.log(`${note} : ${mention}, ${parite}`);

Affichage

14 : bien, pair

Chaînage optionnel ?.

Lire une propriété d'une valeur null ou undefined lève une erreur (« Cannot read properties of null »). ?. s'arrête proprement et renvoie undefined ; combiné avec ??, il donne une valeur de secours.

optionnel.js

const eleve = { nom: "Lina", adresse: null };

console.log(eleve.adresse?.ville);
console.log(eleve.adresse?.ville ?? "ville inconnue");

Affichage

undefined
ville inconnue

⚠️ Erreurs fréquentes

= au lieu de ===

À éviter

faux.js

if (score = 10) { … }    // affecte 10 à score : toujours vrai

Correct

correct.js

if (score === 10) { … }   // compare

Avec un const, l'affectation lève une TypeError ; avec un let, le bug est silencieux.

Écrire « x === 1 || 2 »

À éviter

faux.js

if (x === 1 || 2) { … }          // « 2 » est toujours vrai : la condition aussi

Correct

correct.js

if (x === 1 || x === 2) { … }    // ou [1, 2].includes(x)

Tester un nombre avec if (valeur)

if (quantite) est faux quand quantite vaut 0, qui est pourtant une valeur valide. Teste quantite !== undefined, ou utilise ?? pour la valeur par défaut.

Comparer des textes qui sont des nombres

Les valeurs qui viennent d'un champ de formulaire sont des textes : "10" < "9" est vrai. Convertis avec Number(…) avant de comparer.

Oublier le break dans un switch

Le cas suivant s'exécute aussi. Si tu n'as pas voulu regrouper des cas, termine chacun par break (ou par return dans une fonction).

Compter sur « [] est faux »

Un tableau vide ou un objet vide est vrai. Pour tester un tableau vide : tableau.length === 0.

Comparer deux tableaux ou objets avec ===

[1, 2] === [1, 2] est faux : === compare l'identité (la même case mémoire), pas le contenu. Compare les éléments un par un, ou JSON.stringify(a) === JSON.stringify(b) pour de petites structures simples.

📋 Aide-mémoire

Six valeurs falsy : false, 0, "", null, undefined, NaN ; tout le reste est vrai (même "0" et []).
=== et !== partout ; <, > sur des textes compare lettre par lettre.
a || b : valeur par défaut si a est falsy ; a ?? b : si a est null ou undefined seulement.
if / else if / else : le premier test vrai gagne ; switch : ===, un break par cas.
cond ? a : b pour un choix simple ; objet?.propriete évite l'erreur sur null.
Jamais = dans un if ; jamais x === 1 || 2 ; ne compare pas deux objets avec ===.