Sommaire

Temps de lecture approximative : 10 minutes

Les conditions

Les structures conditionnelles ou tout simplement les conditions permettent d'exécuter en JavaScript, comme dans tous les langages de développements, des instructions selon si une condition est vérifiée ou non. Par exemple, sur un site e-commerce, on peut finaliser une commande si le panier contient au moins un article. Les conditions s'utilisent principalement avec des variables. C'est une notion qui peut paraître déroutante au premier abord, mais qui est extrêmement importante pour votre apprentissage du JavaScript. Il est indispensable de maîtriser cette notion pour développer efficacement en JavaScript.

L'instruction if en JavaScript

En JS, la condition la plus minimaliste possible requiert l'instruction if. En français, on peut tout simplement traduire cette instruction par si.

Ci-après la syntaxe d'une condition if

JS

let azerty = 5;
if(azerty > 1) {
   console.log('La variable $azerty est strictement plus grand que 1.');
}

Résultat dans la console

Nous avons donc l'instruction if puis entre parenthèses le test de la condition. Chaque test est converti en valeur booléenne. Par conséquent, si le test vaut true, alors le PHP exécutera le code à l'intérieur de la condition, si le test vaut false, alors il sera ignoré. Il est possible de faire tout un tas de tests complètement différents avec divers opérateurs de comparaisons qui remplissent des fonctions bien différentes. Nous resterons pour le moment sur des opérateurs triviaux comme < ou >.

Chaque bloc d'instructions à exécuter si le test de la condition est vérifié est délimité entre { et } (accolades ouvrante et fermante). Les opérandes sont les variables ou les valeurs de chaque côté d’un opérateur dans une condition. En l'occurence dans notre exemple ci-dessus, azerty et 1.

Il est possible d'imbriquer les conditions. La syntaxe des instructions if n'est pas impactée. Ci-dessous un exemple.

JS

let azerty = 2;
if(azerty > 1) {
   console.log('La variable $azerty est strictement plus grand que 1.');
   let qwerty = 0;
   if(qwerty < 2) {
      console.log('La variable $qwerty est strictement plus petite que 2.');
   }
}

Résultat dans la console

Dans l'exemple ci-dessus, si la valeur de la variable azerty est de 0 ou 1, alors rien ne s'affiche car la première condition n'est pas vérifiée.

L'instruction else

Il n'est pas rare de vouloir exécuter une instruction si un test de condition est vérifié et une autre si ce n'est pas le cas. Et klac, c'est justement le rôle de l'instruction else. Elle est toujours associée à un if. Donc les instructions contenues dans le else sont exécutées uniquement si le test de condition du if n'est pas vérifié. On peut traduire en français cette instruction par sinon. Un exemple sans plus attendre.

JS

let azerty = 0;
if(azerty > 1) {
   console.log('La variable $azerty est strictement plus grand que 1.');
} else {
   console.log('La variable $azerty est plus petite ou égale à 1.');
}

Résultat dans la console

L'instruction else if

Comme son nom l'indique, l'instruction else if est une combinaison de l'instruction if et else. Le bloc d'instruction du else if est exécuté uniquement si le test de condition du premier if n'est pas vérifié et vaut donc false. Seulement, à la différence de else, le bloc d'instruction du else if ne s'exécutera que si le test de sa condition est vérifié et vaut donc true.

JS

let azerty = 5;
if(azerty < 1) {
   console.log('La variable $azerty est plus petit que 1.');
} else if(azerty > 4) {
   console.log('La variable $azerty est strictement plus grand que 4.');
} else {
   console.log('La variable $azerty entre 1 et 4.');
}

Résultat dans la console

Si on souhaite vulgariser l'exemple ci-dessus et l'exprimer oralement, on pourrait dire :

• Si la variable azerty est strictement inférieure à 1 alors, ...
• Sinon si la variable azerty est strictement supérieure à 4 alors, ...
• Sinon, ...

Après un premier if, il est possible d'avoir plusieurs else if les uns à la suite des autres. Le premier else if qui sera vérifié et qui sera évalué à true sera exécuté.

Les opérateurs de comparaison

Depuis le début du chapitre nous utilisons très largement le chevron comme opérateur de comparaison qui permet de tester si une valeur est strictement supérieure ou inférieure à une autre. Il existe bien évidemment d'autres opérateurs de comparaison. Ceux que nous utiliserons dans le cours sont listés dans le tableau ci-après.

Opérateur	Description	Exemple
==	true si la valeur est égale à	azerty == qwerty
!=	true si la valeur est différente de	azerty != qwerty
>	true si la valeur est strictement supérieure à	azerty > qwerty
<	true si la valeur est strictement inférieure à	azerty < qwerty
>=	true si la valeur est supérieure ou égale à	azerty >= qwerty
<=	true si la valeur est inférieure ou égale à	azerty <= qwerty

Pour comprendre comment fonctionnent les différentes conditions avec les différents opérateurs, nous continuerons d'utiliser la fonction console.log(), qui permet d'afficher un message dans la console du navigateur.

JS

let azerty = 5;
let qwerty = 10;
console.log(azerty == qwerty);
console.log(azerty > qwerty);
console.log(azerty < qwerty);
console.log(azerty >= qwerty);
console.log(azerty <= qwerty);

Résultat dans la console

Les opérateurs logiques

En En JS, les opérateurs logiques sont utilisés pour combiner des tests de conditions. Grâce à ces opérateurs, il est possible d'ajouter plus d'un test de condition dans une seule instruction if. Ci-après un exemple pour les utiliser.

Opérateur	Description	Exemple
&&	true seulement si tous les tests de condition sont évalués à true	azerty && qwerty
||	true seulement si l'un des tests de condition est évalué à true	azerty || qwerty
!	Inverse la logique d'un test de condition	!azerty

JS

let a = 10;
let b = 5;
let c = 0;
if(a && b && c) {
   console.log('Les variables $a, $b et $c contiennent des valeurs différentes de false.');
} else {
   console.log('Une des variables $a, $b ou $c contient false comme valeur.');
}

if(a >= 10 || b >= 10 || c >= 10) {
   console.log('Une des variables $a, $b ou $c a une valeur supérieure ou égale à 10.');
} else {
   console.log('Aucune des variables $a, $b ou $c ne contient une valeur supérieure ou égale à 10.');
}

if(!c) {
   console.log('La variable $c a une valeur équivalente à false.');
} else {
   console.log('La variable $c a une valeur équivalent à true.');
}

Résultat dans la console

La compréhension de ce chapitre n'est pas importante, elle est incontournable. C'est très important de bien comprendre cette notion. Vous serez sûrement amené à revenir sur ce chapitre pour vous remémorer certaines règles et les différentes syntaxes. C'est normal, ces notions ne sont pas simples. Elles se graveront dans votre mémoire en pratiquant.