if…else

if (condition)
  instruction1

// Avec une clause else
if (condition)
  instruction1
else
  instruction2

condition

Une expression qui sera évaluée pour déterminer si elle est équivalente à vrai (truthy en anglais) ou équivalente à faux (falsy en anglais).

instruction1

L'instruction qui est exécutée si la condition est équivalente à vrai. Cette instruction peut être n'importe quelle instruction valide, y compris une imbrication d'autres instructions if. Pour exécuter plusieurs instructions, on pourra utiliser un bloc d'instructions ({ /* … */ }) qui permet de les regrouper. Pour n'exécuter aucune instruction, on pourra utiliser l'instruction vide.

instruction2

Si la clause else existe, ce sera l'instruction qui est exécutée si la condition est équivalente à faux. Comme pour la première, cette instruction peut être n'importe quelle instruction valide : une autre instruction if imbriquée, un bloc d'instruction, une instruction vide, etc.

Plusieurs instructions if…else peuvent être imbriquées afin de créer une structure else if (on notera qu'il n'y a pas de mot-clé elseif en JavaScript).

if (condition1)
  instruction1
else if (condition2)
  instruction2
else if (condition3)
  instruction3
// …
else
  instructionN

Si on indente correctement le code, on retrouve la structure exactement équivalente :

if (condition1)
  instruction1
else
  if (condition2)
    instruction2
  else
    if (condition3)
      instruction3
// …

Afin d'exécuter plusieurs instructions, on utilisera un bloc d'instructions ({ /* … */ }) pour regrouper les instructions souhaitées.

if (condition) {
  instructions1;
} else {
  instructions2;
}

Ne pas utiliser de blocs d'instructions pourra causer des comportements déroutants, notamment si le code est formaté à la main. Prenons le fragment de code qui suit par exemple :

function verifierValeur(a, b) {
  if (a === 1)
    if (b === 2)
      console.log("a vaut 1 et b vaut 2");
  else
    console.log("a ne vaut pas 1");
}

Ce code semble relativement innocent. Toutefois, si on exécute verifierValeur(1, 3), la console affichera "a ne vaut pas 1". En effet, la clause else sera connectée à la clause if la plus proche. Autrement dit, si le code ci-avant avait été correctement indenté, on aurait eu :

function verifierValeur(a, b) {
  if (a === 1)
    if (b === 2)
      console.log("a vaut 1 et b vaut 2");
    else
      console.log("a ne vaut pas 1");
}

De manière générale, c'est une bonne pratique que de toujours utiliser des blocs d'instructions, notamment si le code implique plusieurs if imbriqués.

function verifierValeur(a, b) {
  if (a === 1) {
    if (b === 2) {
      console.log("a vaut 1 et b vaut 2");
    }
  } else {
    console.log("a ne vaut pas 1");
  }
}

Attention à ne pas confondre les valeurs booléennes primitives true et false avec les valeurs construites avec un objet Boolean (par exemple Boolean(false) et Boolean(true)). Toute valeur qui n'est pas false, undefined, null, 0, -0, NaN ou la chaîne vide (""), et tout objet, y compris un objet Boolean dont la valeur est false, seront considérés comme équivalent à true dans une instruction conditionnelle if. Ainsi :

const b = new Boolean(false);
if (b) {
  console.log("b est équivalent à vrai"); // "b est équivalent à vrai"
}

Bien qu'il n'y ait pas de mot-clé elseif en JavaScript, il est possible d'imbriquer des instructions if…else à la suite les unes des autres en plaçant un espace entre else et le début de l'instruction if imbriquée :

if (x > 50) {
  // faire quelque chose
} else if (x > 5) {
  // faire autre chose
} else {
  // faire encore autre chose
}

Il est conseillé de ne pas utiliser d'affectation au sein des expressions conditionnelles. En effet, l'affectation peut être confondue avec un test d'égalité lorsqu'on analyse le code. Il ne faut donc pas utiliser le code suivant (bien qu'il fonctionne) :

if (x = y) {
  // faire quelque chose
}

Si vous devez affecter une variable de cette façon, la documentation sur l'instruction while contient une section sur l'affectation dans une condition et un exemple de la syntaxe à privilégier dans ces cas.

• Bloc d'instructions ({ /* … */ })
• switch
• L'opérateur conditionnel