Tutoriel : Les conditions

Comme dans tout langage de programmation, votre code devra prendre des décisions et agir en conséquence des différents paramètres reçus. Nous allons voir comment ces instructions conditionnelles fonctionnent en JavaScript.

Tout comme les êtres humains, votre code devra par moments prendre des décisions et adapter sa réponse en fonction des différents paramètres qui lui seront soumis.

Les instructions conditionnelles permettent justement à votre code ces prises de décisions.

Instruction "if... else"

let age = 25;

if (age > 20) {
  /* Code à exécuter si la condition est vraie */
}
else {
  /* Sinon exécuter ce code si la condition est fausse */
}

Dans l'exemple ci-dessus, la condition compare la valeur d'une variable à une autre valeur.
Pour rappel, la comparaison s'effectue de gauche à droite. Si la condition est vraie, alors on peut exécuter le code contenu dans le bloc if, sinon on exécute le code contenu dans le bloc else.

Précision : le bloc else n'est pas obligatoire et if peut fonctionner sans. Dans ce cas, le code contenu dans celui-ci ne sera tout simplement pas exécuté si la condition s'avère être fausse.

Si la condition est vraie, elle sera évaluée à true, sinon à false.

Il est tout à fait possible de vérifier la valeur d'une variable sans comparer celle-ci à une autre, simplement en la passant dans la condition if, par exemple :

let sleep = true;
let awake = false;

if (sleep) {
  alert('Chuuuut !!');
}

if (awake) {
  alert('Bonjour !');
}

Dans le code ci-dessus, deux conditions ont été mises en place. La première est vraie, car la variable sleep est égale à true, donc l'alerte s'affichera. La seconde condition est fausse, car la variable awake est égale à false...
Je pense que vous avez compris le concept ??

Attention ! Des valeurs autres que le booléen false sont considérées comme fausses :

La valeur zéro 0
Une chaîne de caractère vide
La valeur null
La valeur undefined
La valeur NaN

Instruction "if... else if... else"

Cette instruction est plus complète que la précédente et permet de comparer une valeur sur plusieurs niveaux de conditions.

let code = 2645;

if (code === 3723) {
  document.write('Tout pile !');
}
else if (code < 2547) {
  document.write('Mmmhhh... Faux !');
}
else if (code > 2547) {
  document.write('Ok, ça me va.');
}
else {
  document.write('A pas compris moua....');
}

/**
 * Résultat : Ok, ça me va
 */

Dans le code ci-dessus, la variable passera par les différentes conditions jusqu'à trouver celle qui répond vraie. Si aucune ne correspond, le else sera exécuté par défaut.

Comme vous pouvez le constater, vous pouvez écrire autant de else if que nécessaire, il n'y a pas de limite sur ce point.

L'ordre est tout aussi important, car en cas de désordre, un "mauvais" code contenu dans une condition pourrait être exécuté avant un autre bien plus important ou pertinent, par exemple :

let nombre = 2;

if (nombre > 10) {
  document.write('Le nombre est supérieur à 10');
}
else if (nombre < -1) {
  document.write('Le nombre est inférieur à -2');
}
else if (nombre > 1) {
  document.write('Le nombre est supérieur à 1');
}
else if (nombre === 2) {
  document.write('Le nombre est égal à 2');
}
else {
  document.write('Rien trouvé !');
}

Dans mon code, la variable passera bien par les différentes conditions, mais s'arrêtera à la première condition vraie. Dans notre cas, c'est celle retournant comme résultat : "Le nombre est supérieur à 1". Alors ok, c'est vrai... Juste en dessous, nous avons une condition qui est bien plus précise qui n'a pu être exécutée, car mal placée. ?‍♂️

Plusieurs conditions

Dans les exemples précédents, vous avez dû remarquer que les différentes instructions comportaient une seule condition. Or, il est tout à fait possible d'en écrire plusieurs :

let year = 1990;

if (year > 2000 && year > 1900) {
  document.write('Toutes les conditions sont correctes');
}

if (year > 2000 || year > 1900) {
  document.write('Au moins une condition est correcte');
}

Dans les deux instructions créées, seule la seconde sera exécutée ! Pourquoi ?
Tout simplement parce que sur la première instruction, les deux conditions doivent être vraies, c'est-à-dire que je demande à ce que l'année soit supérieure à 2000 ET supérieur à 1900. Malheureusement, sur les deux conditions, seule la seconde est vraie, donc le code contenu dans le if ne sera pas exécuté. Par contre, la seconde instruction fonctionnera. Je demande à ce que l'année soit supérieure à 2000 OU supérieure à 1900. La seconde condition est vraie et ma demande est claire, or il suffit qu'une seule des deux conditions réponde juste, ce qui est, c'est le cas ici.

Instruction "switch"

Cette instruction est très pratique pour remplacer une instruction "if... else if... else", à une condition près !
Elle compare la valeur d'une variable à une autre, mais de manière très précise. Il faut que la valeur de la variable soit identique à celle comparée. Il n'est pas possible de poser des conditions "plus grand que...", "plus petit que..." ...

let name = 'Jade';

switch(name) {
  case 'Alice':
    document.write('Ton nom est Alice');
    break;
  case 'Pierre':
    document.write('Ton nom est Pierre');
    break;
  case 'Jade':
    document.write('Ton nom est Jade');
    break;
  case 'Julian':
    document.write('Ton nom est Julian');
    break;
  default:
    document.write('Je ne sais pas...');
}

Une seule variable peut être comparée avec cette instruction contrairement au if et l'égalité doit exister. Dès qu'une comparaison vraie est trouvée, le code contenu dans le case sera exécuté et le système sortira du switch pour continuer le code qui suivra.

Nul besoin de poser un break au sein de default, car JavaScript sortira naturellement pour poursuivre l'exécution de votre code après ce switch.