4-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.

1-   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.

2-   Les boucles while, do… while, for et for… in et les instructions break et continue en JavaScript

Dans cette leçon, nous allons passer en revue les différentes boucles à notre disposition en JavaScript et comprendre comment elles fonctionnent et quand utiliser une boucle plutôt qu’une autre.

Pour rappel, nous pouvons utiliser les boucles suivantes en JavaScript :

• La boucle while ;
• La boucle do… while ;
• La boucle for ;
• La boucle for… in ;
• La boucle for… of ;
• La boucle for await… of.

La boucle JavaScript while

La boucle while (« tant que » en français) va nous permettre de répéter une série d’instructions tant qu’une condition donnée est vraie c’est-à-dire tant que la condition de sortie n’est pas vérifiée.

L’une des boucles while les plus simples qu’on puisse créer pour illustrer le fonctionnement de cette première boucle va être une boucle while qui va itérer sur une valeur numérique d’une variable.

La boucle JavaScript do… while

La boucle do… while (« faire… tant que ») est relativement semblable à la boucle while dans sa syntaxe.

La grande différence entre les boucles while et do… while va résider dans l’ordre dans lequel vont se faire les opérations.

En effet, lorsqu’on utilise une boucle do… while, le code de la boucle va être exécuté avant l’évaluation de la condition de sortie.

Cela signifie qu’à la différence de la boucle while, on effectuera toujours un passage dans une boucle do… while même si la condition de sortie n’est jamais vérifiée et donc le code de la boucle sera toujours exécuté au moins une fois.

Prenons un exemple pour illustrer la différence de structure et de fonctionnement entre les boucles while et do… while.

La boucle JavaScript for

La boucle for (« pour » en français) est structurellement différente des boucles while et do… while puisqu’on va cette fois-ci initialiser notre variable à l’intérieur de la boucle.

La boucle for utilise une syntaxe relativement condensée et est relativement puissante ce qui en fait la condition la plus utilisée en JavaScript.

Utiliser une instruction continue pour passer directement à l’itération suivante d’une boucle

Pour sauter une itération de boucle et passer directement à la suivante, on peut utiliser une instruction continue. Cette instruction va nous permettre de sauter l’itération actuelle et de passer directement à l’itération suivante.

Cette instruction peut s’avérer très utile pour optimiser les performances d’une boucle et économiser les ressources lorsqu’on utilise une boucle pour rechercher spécifiquement certaines valeurs qui répondent à des critères précis.

Utiliser une instruction break pour sortir prématurément d’une boucle

On va également pouvoir complètement stopper l’exécution d’une boucle et sortir à un moment donné en utilisant une instruction break au sein de la boucle.

Utiliser cette instruction peut à nouveau s’avérer très intéressant pour optimiser les performances de notre script lorsqu’on utilise une boucle pour chercher une valeur en particulier en itérant parmi un grand nombre de valeurs.

Comme pour l’instruction continue, il est difficile d’illustrer l’intérêt réel de l’utilisation de break avec les boucles à ce stade du cours car ces instructions prennent tout leur sens lorsqu’on recherche une valeur dans un tableau par exemple.

Les boucles for… in, for… of et for await…of

Les boucles for… in, for… of et for await…of vont être utilisées pour parcourir des objets. Nous les étudierons donc lorsque nous aborderons les objets.

TP

let a = 10
let i = 0

while (i<=10){
    console.log(i);
    i=i+1;
}

let a = 10
let i=0
do{
    console.log(i)
    i=i+1;
}
 while (i<=10)

for (let i =0;i<=10 ; i++){
    console.log(i)
}

let notes = [10,15,8]

for (let i=0;i<=notes.length;i++){

    console.log(notes[i])
}

let notes = [10,15,8]

for (note of notes){

    console.log(note)
}

const personnes ={
    nom: 'bentaleb',
    prenom: 'mohamed'
}

for (personne in personnes){
    console.log(personne)
}

let notes = [10,15,8,20,13]
let i
for (i=0 ; i<= notes.length ; i++){
    console.log(i)

    if (notes[i]== 8){
        console.log('la note est :' + notes[i])
        break;
    }
}

console.log('i est '+i)

Retour Plan cours