Les Boucles en JS

Fonctionnement des boucles

Une boucle permet d'exécuter plusieurs fois une liste d'instructions précises. Il y en a différents types, détaillées ci-dessous.

Boucles à itérations

Une boucle a itérations est une boucle qui va s'exécuter un nombre précis de fois, selon ce qu'elle admet.

La boucle For standard

Elle permet d'effectuer un nombre précis de fois la même action, et possède trois paramètres, séparés par des ';' :

1. On définit un itérateur de boucle, qui s'occupe de l'arrêt de notre boucle.

2. On définit une condition d'arrêt, liée à l'itérateur défini juste avant.

3. On modifie la valeur de l'itérateur de boucle à chaque fois qu'on exécute à nouveau les instructions de la boucle.

Affichage :

    
        //voici la structure d'une boucle: définition de l'itérateur; condition de fin de la boucle;
        //augmentation de 1 de l'itérateur à chaque exécution des instructions
        for(let iterator = 0; iterator < 3; iterator++){
            //j'effectue les instructions à l'intérieur
        }
    

Exemple : Somme de valeurs dans un tableau

    
        //Je définis un tableau de nombres à virgule
        const tableau = [4,8,6,7,5,1,60,2.7,4.9];
        //j'initialise la somme des valeurs du tableau à l'extérieur (0 car on a pas ajouté d'objet)
        let somme = 0;
        //j'effectue ma boucle pour sommer tous les nombres
        for(let iterator = 0; iterator < tableau.length; iterator++){
            //j'ajoute la valeur actuelle sur laquelle je suis sur mon tableau à ma somme totale
            somme = somme + tableau[iterator]; // correspond à somme += tableau[iterator]
        }
        //somme contient la somme de tous les nombres dans le tableau
    

Les boucles For sur des tableaux/arrays

Différente de la boucle habituelle, on peut en définir pour traverser chaque élément d'un tableau.

Il y en a trois types :

- la boucle for(... of ...)

Elle s'effectue sur des tableaux simples, ou entre crochets.

    
        //je définis un tableau simple contenant des chaînes de caractères
        let tableau = ['toto', 'foo', 'bar', 'zouzou']
        //je parcours tout le tableau, et je regarde l'entrée
        for(entree of tableau)
        {//pour chaque entrée du tableau, j'affiche l'entrée dans ma console
            console.log(entree);
        }        
    

Pour récupérer l'index d'une valeur du tableau, on utilisera la fonction native indexOf().

- la boucle for(... in ...)

Elle s'effectue sur des tableaux indexés(entre accolades), ou objets.

    
        //je définis un tableau indexé ou un objet
        let objet = {'toto' : 3, 'marmelade' : 4};
        //pour chaque clé de ce tableau/objet
        for (const clef in objet) {
            //j'affiche la clé
            console.log(clef);
            //j'affiche la valeur associée à la clé
            console.log(objet.clef)
            //deuxième possibilité : objet[clef] pour accéder à la valeur associée
        }
    

Cette boucle est utile pour consulter toutes les clés/valeurs, ou d'en utiliser une en particulier

- la boucle forEach

Elle s'effectue seulement sur un tableau. Cette boucle effectue une fonction appelée Callback (voir lien pour plus d'infos).

    
    //je définis un tableau
    let tableau = ['toto', 'foo', 'bar', 'zouzou']
    //pour chaque paire (clé, valeur) de mon tableau, j'effectue les instructions suivantes : 
    tableau.forEach((key,value) => {
        //j'affiche dans ma console la clé sur laquelle je suis
        console.log(key);
        //j'affiche dans ma console la valeur sur laquelle je suis
        console.log(value);
    });
    

Boucles 'infinies'

Une boucle dite infinie permet de réaliser une liste d'instructions pendant une durée indéfinie.

Elle continue tant que sa condition de départ est vraie (ou true).

Une fois que cette condition devient fausse (ou false), la boucle finit sa liste d'instructions, et s'arrête là.

Exemple :

    
        //je définis un booléen qui est ma partie qui exécute ma boucle
        let boolean = true;
        //je définis une variable
        let variable = 0;
        //tant que ma condition est vraie
        while(boolean)
        {//j'effectue mes lignes de codes
            variable = variable + 1;
            console.log(variable);
            //je donne une condition de sortie à ma boucle: si ma condition est vraie,
            if(variable>15)
            {//je transforme la condition d'entrée de ma boucle à false, afin d'en sortir
                boolean = false;
            }
        }
    

Attention! Si la boucle ne se ferme pas, elle s'exécutera à l'infini, pouvant planter votre navigateur!