Intéressons nous de plus près à la forme la plus répandue d'instruction conditionnelle que vous utiliserez en JavaScript:

1. Le mot‑clé if suivie de parenthèses.
2. Une condition à évaluer, placée entre les parenthèses (typiquement « cette valeur est‑elle plus grande que cet autre valeur ? » ou « cette valeur existe-t-elle ? »).
   Cette condition se servira des opérateurs de comparaison et opérateurs de logique que nous avons étudié dans le précédent module, et renverra true ou false.
3. Une paire d'accolades, à l'intérieur de laquelle se trouve du code — cela peut être n'importe quel code voulu ; il sera exécuté seulement si la condition renvoie true.
4. Le mot‑clé else.
5. Une autre paire d'accolades, à l'intérieur de laquelle se trouve du code différent — tout code souhaité et il sera exécuté seulement si la condition ne renvoie pas true.

Ainsi le code suivant permet d'afficher dans la console 'Vous êtes majeur!' si le age est supérieure à 18, sinon ile affichera 'Vous êtes mineur!':

Affiche:

"Vous êtes majeur!"

1. Le mot‑clé if suivie de parenthèses.
2. Une condition à évaluer, placée entre les parenthèses (typiquement « cette valeur est‑elle plus grande que cet autre valeur ? » ou « cette valeur existe-t-elle ? »).
   Cette condition se servira des opérateurs de comparaison et opérateurs de logique que nous avons étudié dans le précédent module, et renverra true ou false.
3. Une paire d'accolades, à l'intérieur de laquelle se trouve du code — cela peut être n'importe quel code voulu ; il sera exécuté seulement si la condition renvoie true.
4. Le mot‑clé else.
5. Une autre paire d'accolades, à l'intérieur de laquelle se trouve du code différent — tout code souhaité et il sera exécuté seulement si la condition ne renvoie pas true.

Notez qu'il n'est pas nécessaire d'inclure une instruction else et le deuxième bloc entre accolades — le code suivant est aussi parfaitement correct :

Voici une autre syntax pour ajouter une condition à notre code.

L'opérateur ternaire ou conditionnel est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est true et une autre si elle est false.

Elle est utile dans certains cas, et occupe moins de place qu'un bloc if...else si votre choix est limité à deux possibilités à choisir via une condition true/false. Voici le pseudo‑code correspondant :

L'équivalent de la condition précédente en utilisant l'opérateur ternaire serait:

Les Instructions if...else font bien le travail d'aiguiller la programmation selon des conditions, mais elles ne sont pas sans inconvénient. Elles sont principalement adaptées aux cas où vous avez un choix binaire.

Quand nous avons un système de condition plus complexe, avec plusieurs testes, les code peut devenir très bit illisible.

Les instructions switch sont vos amies — elles prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec.

Voici un peu de pseudo-code, pour vous donner l'idée :

Et un exemple simple pour mieux comprendre:

Ce qui affiche:

"C'est une couleur chaude!"

Il est important de savoir que si une condition est validée, le code exécutera toutes les autres instructions, même si la condition reste fausse.

Pour arrêter le code, nous utilisons le break, utilisons l'exemple précédent pour illustrer:

Ce qui affiche:

"C'est une couleur chaude!"
"C'est une couleur froide!"

Mais pourquoi cela fonctionne-t-il de cette manière?

C'est pour avoir la possibilité d'utiliser un OU afin d'éviter de dupliquer du code.

Dans notre exemple, les instructions sont les mêmes pour la couleur bleu et vert. Si nous voulons éviter de dupliquer ce code il faut faire:

Ce qui affiche:

"C'est une couleur froide!"

La première, celle que vous utiliserez le plus souvent, est la boucle for. Elle a la syntaxe suivante :

1. Le mot-clé for, suivi par des parenthèses. A l'intérieur des parenthèses, on a trois objets :

• 1. Une initialisation : il s'agit souvent d'une variable initialisée à une certaine valeur, qui est incrémentée afin de compter le nombre de fois où la boucle s'est exécutée. On peut également la nommer compteur.
• 2. Une condition de sortie : comme mentionné précédemment, cela définit le moment où la boucle doit arrêter de s'exécuter. C'est généralement une expression contenant un opérateur de comparaison, un test pour voir si la condition de sortie est atteinte.
• 3. Une expression finale : elle est toujours évaluée (ou exécutée) chaque fois que la boucle a effectué une itération complète. Cela sert souvent à incrémenter (ou dans certains cas décrémenter) le compteur, pour le rapprocher de la valeur de la condition de sortie.

2. Des accolades contenant un bloc de code : ce code sera exécuté chaque fois que la boucle itère.

for n'est pas le seul type de boucle disponible en JavaScript.

D'abord, regardons la boucle while. Nous allons reprendre l'exemple de la table multiplication:

Cela fonctionne de manière très similaire à la boucle for, sauf que la variable de départ est définie avant la boucle, et l'expression finale est incluse dans la boucle après le code à exécuter, plutôt que ces deux éléments soient inclus dans les parenthèses.

La condition de sortie est incluse dans les parenthèses, précédées du mot-clé while au lieu de for.

La boucle do…while est très similaire, mais dénote une variation par rapport à la structure de la boucle while :

Dans ce cas, l'initialiseur vient en premier, avant que la boucle ne commence. Le mot-clé do précède directement les accolades contenant le code à exécuter et l'expression finale.

Le différenciateur ici est que la condition de sortie vient après tout, enveloppée entre parenthèses et précédée d'un mot-clé while.

Dans une boucle do…while, le code à l'intérieur des accolades est toujours exécuté au moins une fois avant que la vérification ne soit effectuée pour voir si elle doit être exécutée à nouveau (dans while et for, la vérification arrive en premier, donc le code pourrait ne jamais être exécuté).

Attention : Avec while et do…while, comme avec toutes les boucles, vous devez vous assurer que l'initialiseur est incrementé pour qu'il atteigne finalement la condition de sortie.

Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera.

C'est ce qu'on appelle une boucle infinie.