16 février 2021

Branche conditionnelle : if, '?'

Parfois, nous devons effectuer différentes actions en fonction d’une condition.

Pour ce faire, nous pouvons utiliser l’instruction if et l’opérateur conditionnel ?, également appelé opérateur “point d’interrogation”.

L’instruction “if”

L’instruction if(...) évalue une condition entre parenthèses et, si le résultat est true, exécute un bloc de code.

Par exemple :

let year = prompt('In which year was ECMAScript-2015 specification published?', '');

if (year == 2015) alert( 'You are right!' );

Dans l’exemple ci-dessus, la condition est une vérification d’égalité simple : year == 2015, mais elle peut être beaucoup plus complexe.

S’il y a plus d’une instruction à exécuter, nous devons envelopper notre bloc de code entre accolades :

if (year == 2015) {
  alert( "That's correct!" );
  alert( "You're so smart!" );
}

Il est recommandé d’entourer votre bloc de code avec des accolades {} à chaque fois avec if, même s’il n’ya qu’une seule instruction. Cela améliore la lisibilité.

Conversion booléenne

L’instruction if (…) évalue l’expression entre parenthèses et la convertit en type booléen.

Rappelons les règles de conversion du chapitre Les conversions de types:

  • Un nombre 0, une chaîne de caractères vide "", null, undefined et NaN deviennent false. À cause de cela, on dit de ces valeurs qu’elles sont “falsy”.
  • Les autres valeurs deviennent true, on dit qu’elles sont “truthy”.

Donc, le code sous cette condition ne sera jamais exécuté :

if (0) { // 0 est falsy
  ...
}

… Et à l’intérieur de cette condition – il fonctionne toujours :

if (1) { // 1 est truthy
  ...
}

Nous pouvons également transmettre une valeur booléenne pré-évaluée à if, comme ici :

let cond = (year == 2015); // l'égalité évalue à vrai ou faux

if (cond) {
  ...
}

La clause “else”

L’instruction if peut contenir un bloc optionnel “else”. Il s’exécute lorsque la condition est fausse.

Par exemple :

let year = prompt('In which year was the ECMAScript-2015 specification published?', '');

if (year == 2015) {
  alert( 'You guessed it right!' );
} else {
  alert( 'How can you be so wrong?' ); // toute autre valeur que 2015
}

Plusieurs conditions : “else if”

Parfois, nous aimerions tester plusieurs variantes d’une condition. Il y a une clause else if pour cela.

Par exemple :

let year = prompt('En quelle année la spécification ECMAScript-2015 a-t-elle été publiée ?', '');

if (year < 2015) {
  alert( 'Too early...' );
} else if (year > 2015) {
  alert( 'Too late' );
} else {
  alert( 'Exactly!' );
}

Dans le code ci-dessus, JavaScript vérifie year < 2015. S’il est falsy, il passe à l’année de condition suivante year > 2015 et c’est toujours false il passe à la dernière instruction et affiche la dernière alerte.

Il peut y avoir plus de blocks else if. Le dernier else est optionnel.

Opérateur ternaire ‘?’

Parfois, nous devons attribuer une variable en fonction d’une condition.

Par exemple :

let accessAllowed;
let age = prompt('How old are you?', '');

if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}

alert(accessAllowed);

L’opérateur dit “ternaire” ou “point d’interrogation” nous permet de le faire plus rapidement et plus simplement.

L’opérateur est représenté par un point d’interrogation ?. Appelé aussi “ternaire” parce que l’opérateur a trois opérandes. C’est en fait le seul et unique opérateur en JavaScript qui en a autant.

La syntaxe est :

let result = condition ? value1 : value2

La condition est évaluée, si elle est vraie, alors value1 est retournée, sinon – value2.

Par exemple :

let accessAllowed = (age > 18) ? true : false;

Techniquement, nous pouvons omettre les parenthèses autour de age > 18. L’opérateur point d’interrogation a une faible précédence, il s’exécute donc après la comparaison >.

Cet exemple fera la même chose que le précédent :

// l'opérateur de comparaison "age > 18" s'exécute en premier quoiqu'il en soit
// (pas besoin de l'envelopper entre parenthèses)
let accessAllowed = age > 18 ? true : false;

Mais les parenthèses rendent le code plus lisible, il est donc recommandé de les utiliser.

Veuillez noter :

Dans l’exemple ci-dessus, il est possible d’éviter l’opérateur ternaire, parce que la comparaison elle-même renvoie un true/false:

// la même chose
let accessAllowed = age > 18;

Multiple ‘?’

Une séquence d’opérateurs point d’interrogation ? permettent de renvoyer une valeur qui dépend de plusieurs conditions.

Par exemple :

let age = prompt('age?', 18);

let message = (age < 3) ? 'Hi, baby!' :
  (age < 18) ? 'Hello!' :
  (age < 100) ? 'Greetings!' :
  'What an unusual age!';

alert( message );

Il peut être difficile au début de comprendre ce qui se passe. Mais après un examen plus approfondi, nous constatons que ce n’est qu’une séquence de tests ordinaire.

  1. Le premier point d’interrogation vérifie si age < 3.
  2. Si vrai – retourne 'Coucou bébé !', sinon il franchi les deux points ":" et vérifie si age < 18.
  3. Si vrai – retourne 'Salut !', sinon – il franchi à nouveau les deux points suivants ":" et vérifie si age < 100.
  4. Si vrai – retourne 'Salutations !', sinon – il franchi enfin les derniers deux points ":" et retourne 'Quel âge inhabituel !'.

La même logique utilisant if..else :

if (age < 3) {
  message = 'Hi, baby!';
} else if (age < 18) {
  message = 'Hello!';
} else if (age < 100) {
  message = 'Greetings!';
} else {
  message = 'What an unusual age!';
}

Utilisation non traditionnelle de ‘?’

Parfois, le point d’interrogation ? est utilisé en remplacement de if :

let company = prompt('Which company created JavaScript?', '');

(company == 'Netscape') ?
   alert('Right!') : alert('Wrong.');

Selon si la condition company == 'Netscape' est vraie ou non, la première ou la deuxième partie après ? s’exécute et affiche l’alerte correspondante.

Nous n’attribuons pas de résultat à une variable ici. L’idée est d’exécuter un code différent en fonction de la condition.

Il n’est pas recommandé d’utiliser l’opérateur ternaire de cette manière.

La notation semble être plus courte qu’un if, ce qui plaît à certains programmeurs. Mais c’est moins lisible.

Voici le même code avec if pour comparaison :

let company = prompt('Which company created JavaScript?', '');

if (company == 'Netscape') {
  alert('Right!');
} else {
  alert('Wrong.');
}

Nos yeux scrutent le code verticalement. Les constructions qui couvrent plusieurs lignes sont plus faciles à comprendre qu’un jeu d’instructions horizontal long.

L’idée d’un point d’interrogation ? est de renvoyer l’une ou l’autre valeur selon la condition. Veuillez l’utiliser pour cela exactement. Il y a if pour exécuter différentes branches du code.

Exercices

importance: 5

Est-ce que alert sera affiché ?

if ("0") {
  alert( 'Hello' );
}

Oui, il sera affiché.

Toute chaîne de caractères à l’exception d’une chaîne vide (et "0" n’est pas vide) devient vraie dans le contexte logique.

Nous pouvons exécuter et vérifier:

if ("0") {
  alert( 'Hello' );
}
importance: 2

En utilisant la construction if..else, écrivez le code qui demande : ‘Quel est le nom “officiel” de JavaScript?’

Si le visiteur entre “ECMAScript”, alors éditez une sortie “Bonne réponse !”, Sinon – retourne “Ne sait pas ? ECMAScript!”

Démo dans une nouvelle fenêtre

<!DOCTYPE html>
<html>

<body>
  <script>
    'use strict';

    let value = prompt('What is the "official" name of JavaScript?', '');

    if (value == 'ECMAScript') {
      alert('Right!');
    } else {
      alert("You don't know? ECMAScript!");
    }
  </script>


</body>

</html>
importance: 2

En utilisant if..else, écrivez le code qui obtient un numéro via le prompt, puis l’affiche en alert :

  • 1, si la valeur est supérieure à zéro,
  • -1, si inférieur à zéro,
  • 0, si est égal à zéro.

Dans cet exercice, nous supposons que l’entrée est toujours un nombre.

Démo dans une nouvelle fenêtre

let value = prompt('Type a number', 0);

if (value > 0) {
  alert( 1 );
} else if (value < 0) {
  alert( -1 );
} else {
  alert( 0 );
}
importance: 5

Réécrivez ce if en utilisant l’opérateur conditionnel '?' :

let result;

if (a + b < 4) {
  result = 'Below';
} else {
  result = 'Over';
}
let result = (a + b < 4) ? 'Below' : 'Over';
importance: 5

Réécrire ce if..else en utilisant plusieurs opérateurs ternaires '?'.

Pour plus de lisibilité, il est recommandé de diviser le code en plusieurs lignes.

let message;

if (login == 'Employee') {
  message = 'Hello';
} else if (login == 'Director') {
  message = 'Greetings';
} else if (login == '') {
  message = 'No login';
} else {
  message = '';
}
let message = (login == 'Employee') ? 'Hello' :
  (login == 'Director') ? 'Greetings' :
  (login == '') ? 'No login' :
  '';
Carte du tutoriel

Commentaires

lire ceci avant de commenter…
  • Si vous avez des améliorations à suggérer, merci de soumettre une issue GitHub ou une pull request au lieu de commenter.
  • Si vous ne comprenez pas quelque chose dans l'article, merci de préciser.
  • Pour insérer quelques bouts de code, utilisez la balise <code>, pour plusieurs lignes -- enveloppez-les avec la balise <pre>, pour plus de 10 lignes - utilisez une sandbox (plnkr, jsbin, codepen…)