Présentation des boucles et des opérateurs d’incrémentation et de décrémentation en JavaScript

Les boucles sont, avec les conditions, l’une des structures de contrôle de base du JavaScript. Nous allons beaucoup les utiliser et il convient donc de les connaitre et de comprendre comment elles fonctionnent.

 

Présentation des boucles

Les boucles vont nous permettre d’exécuter plusieurs fois un bloc de code, c’est-à-dire d’exécuter un code « en boucle » tant qu’une condition donnée est vérifiée et donc ainsi nous faire gagner beaucoup de temps dans l’écriture de nos scripts.

Lorsqu’on code, on va en effet souvent devoir exécuter plusieurs fois un même code. Utiliser une boucle nous permet de n’écrire le code qu’on doit exécuter plusieurs fois qu’une seule fois.

Nous disposons de six boucles différentes en JavaScript :

  • La boucle while (« tant que ») ;
  • La boucle do… while (« faire… tant que ») ;
  • La boucle for (« pour ») ;
  • La boucle for… in (« pour… dans») ;
  • La boucle for… of (« pour… parmi ») ;
  • La boucle for await… of (« pour -en attente-… parmi »).

Le fonctionnement général des boucles est toujours le même : on pose une condition qui sera généralement liée à la valeur d’une variable et on exécute le code de la boucle « en boucle » tant que la condition est vérifiée.

Pour éviter de rester bloqué à l’infini dans une boucle, vous pouvez donc déjà noter qu’il faudra que la condition donnée soit fausse à un moment donné (pour pouvoir sortir de la boucle).

Pour que notre condition devienne fausse à un moment, on pourra par exemple incrémenter ou décrémenter la valeur de notre variable à chaque nouveau passage dans la boucle (ou modifier la valeur de notre variable selon un certain schéma).

Les boucles vont donc être essentiellement composées de trois choses :

  • Une valeur de départ qui va nous servir à initialiser notre boucle et nous servir de compteur ;
  • Un test ou une condition de sortie qui précise le critère de sortie de la boucle ;
  • Un itérateur qui va modifier la valeur de départ de la boucle à chaque nouveau passage jusqu’au moment où la condition de sortie est vérifiée. Bien souvent, on incrémentera la valeur de départ.

 

Les opérateurs d’incrémentation et de décrémentation

Incrémenter une valeur signifie ajouter 1 à cette valeur tandis que décrémenter signifie enlever 1.

Les opérations d’incrémentation et de décrémentation vont principalement être utilisées avec les boucles en JavaScript. Elles vont pouvoir être réalisées grâce aux opérateurs d’incrémentation ++ et de décrémentation --.

Retenez déjà qu’il y a deux façons d’incrémenter ou de décrémenter une variable : on peut soit incrémenter / décrémenter la valeur de la variable puis retourner la valeur de la variable incrémentée ou décrémentée (on parle alors de pré-incrémentation et de pré-décrémentation), soit retourner la valeur de la variable avant incrémentation ou décrémentation puis ensuite l’incrémenter ou la décrémenter (on parle alors de post-incrémentation et de post-décrémentation).
Cette différence d’ordre de traitement des opérations va influer sur le résultat de nombreux codes et notamment lorsqu’on voudra en même temps incrémenter ou décrémenter la valeur d’une variable et l’afficher ou la manipuler d’une quelconque façon. Tenez-en donc bien compte à chaque fois que vous utilisez les opérateurs d’incrémentation ou de décrémentation.
Le tableau ci-dessous présente les différentes façons d’utiliser les opérateurs d’incrémentation et de décrémentation avec une variable let x ainsi que le résultat associé :

Exemple (opérateur + variable) Résultat
++x Pré-incrémentation : incrémente la valeur contenue dans la variable x, puis retourne la valeur incrémentée
x++ Post-incrémentation : retourne la valeur contenue dans x avant incrémentation, puis incrémente la valeur de $x
--x Pré-décrémentation : décrémente la valeur contenue dans la variable x, puis retourne la valeur décrémentée
x-- Post-décrémentation : retourne la valeur contenue dans x avant décrémentation, puis décrémente la valeur de $x

Prenons immédiatement un exemple concret pour illustrer les différences entre pré et post incrémentation ou décrémentation.

Support HTML pour présentation des opérateurs d'incrémentation et de décrémentation en JavaScript

Présentation des opérateurs d'incrémentation et de décrémentation en JavaScript

Exemple d'utilisation des opérateurs d'incrémentation et de décrémentation en JavaScript

See the Pen
Cours JavaScript 3.6.1
by Pierre (@pierregiraud)
on CodePen.

Il y a plusieurs choses qu’on n’a jamais vues dans ce code. Tout d’abord, vous pouvez constater que j’ai déclaré 4 variables sur la même ligne en utilisant une seule fois le mot let. Cette écriture est tout à fait autorisée tant que les différentes variables sont séparées par une virgule et sont bien déclarées sur une seule et même ligne.

Notez que cette syntaxe a des avantages et des inconvénients : elle est un peu plus rapide à écrire, notamment lorsqu’on a beaucoup de variables à déclarer mais est un peu moins claire que la syntaxe de déclaration complète des variables.

Ensuite, on post-incrémente notre variable let a, pré-incrémente notre variable let b, post-décrémente v notre variable let c et pré-décrémente notre variable let d puis on affiche le résultat précédé du texte « a/b/c/d stocke la valeur » dans les paragraphes portant les id « p1 », « p2 », « p3 » et « p4 » dans notre fichier HTML appelant le fichier JavaScript.

Notez bien ici que le premier signe + entre le texte et les opérations d’incrémentation ou de décrémentation est un opérateur de concaténation : il sert à juxtaposer le texte à gauche et la valeur de la variable à droite.

Dans chaque ligne de ce code, on fait donc deux opérations en même temps : on incrémente ou décrémente et on place le résultat dans un paragraphe. Comme vous pouvez le voir, lorsqu’on pré-incrémente ou pré-décrémente, la valeur renvoyée est bien la valeur de base de la variable +/- 1.

En revanche, lorsqu’on post-incrémente ou post-décrémente, la valeur renvoyée est la valeur de base de la variable. Cela est dû au fait que la valeur de base de la variable est ici renvoyée avant l’incrémentation ou la décrémentation. Si on affiche plus tard la valeur de nos variables, on peut voir qu’elles ont bien été incrémentées ou décrémentées comme les autres.

2 réflexions au sujet de “Présentation des boucles et des opérateurs d’incrémentation et de décrémentation en JavaScript”

Laisser un commentaire

© Pierre Giraud - Toute reproduction interdite - Mentions légales