JavaScript

Javascript for : les itérations indispensables pour parcourir un Array.

Vous voulez tout savoir sur les boucles for en javascript? Vous êtes au bon endroit, nous allons voir for, continue et break et for … of.

Bon article à vous tous.

javascript for tout simple

Avant de nous lancer à corps perdu dans le code, nous allons revenir sur le principe de boucle. Les boucles servent à parcourir des tableaux où toutes sortes de variables qui contient plusieurs valeurs. Prenons l’exemple d’un tableau de pokémons (et oui encore).

explication for

Vous l’aurez compris, votre tableau de pokemons va être parcouru d’itération en itération : Pikachu puis Salamèche puis Carapuce puis … jusqu’à la fin de votre Array.

Au niveau du code javascript on pourrait transcrire comme ceci :

let pokemons = ['Pikachu','Salamèche','Carapuce'];
for(let i = 0; i < pokemons.length; i++){
    console.log(pokemons[i]);
}

Le premier argument du for (let i = 0;) va déterminer la valeur initiale de notre index i. Le second argument va déterminer quand la boucle va s’arrêter. Dans notre cas elle s’arrête à la fin de notre array (i < pokemons.length). Le troisieme argument va déterminer comment l’index va varier à chaque itération (i++).

continue et break

Nous avons vu le classique for qui est connu de tous (ou quasiment). En revanche, continue et break sont beaucoup moins connus mais tous aussi redoutables.

  • continue : permet de passer à la prochaine itération sans exécuté le code qui le succède dans la boucle
  • break : permet de sortir de la boucle for sans exécuter les itérations restantes

continue

Nous allons tout de suite voir un exemple de l’utilisation de continue :

let pokemons = ['Pikachu','Salamèche','Carapuce'];
let nbIteration = 0;
for(let i = 0; i < pokemons.length; i++){
    if(pokemons[i] === 'Salamèche'){
        console.log(pokemons[i]);
        continue; // continue va ici directement passer à l'itération suivante 
    }
    nbIteration++;
}
console.log(nbIteration); //2

continue vous permet de bypasser nbIteration++ afin de ne pas l’incrémenter. Il peut être utile dans de nombreux cas.

break

Il est temps de passer à un exemple de l’utilisation de break :

let pokemons = ['Pikachu','Salamèche','Carapuce'];
let nbIteration = 0;
for(let i = 0; i < pokemons.length; i++){
    if(pokemons[i] === 'Pikachu'){
        console.log(pokemons[i]);
        break; // continue va ici directement passer à l'itération suivante 
    }
    nbIteration++;
}
console.log(nbIteration); //0

break va totalement sortir de la boucle for. Vu que Pikachu est le premier item de notre tableau, break ne va jamais exécuté nbIteration++. nbIteration sera donc égal à 0.

for … of

J’aimerai à présent vous parler du méconnu for … of. Il n’est pas très populaire, pourtant il est extrêmement efficace, notamment en remplacement de forEach. Beaucoup plus performant que ce dernier.

let pokemons = ['Pikachu','Salamèche','Carapuce'];
for(const pokemon of pokemons){
    console.log(pokemon); // Pikachu puis Salamèche puis Carapuce
}

Vous l’aurez compris, il permet d’itérer sur tout un tableau (array), tout en réduisant la syntaxe et en gardant les performances du for.

Si vous voulez aller plus loin dans votre apprentissage en javascript et notamment sur forEach et map, je ne peux que vous conseiller de lire cet article :
http://pierreterrat.com/javascript-map-foreach/

Beaucoup d’efforts et de temps sont passés pour vous fournir du contenu de qualité, merci de partager et de commenter cet article pour faire vivre ce blog.

4 commentaires

  • Ellinn

    Bonjour Pierre,

    L’article est plutôt concis et je suppose que c’est un choix donc aucun souci de se côté ! Mon interrogation est que je me demande simplement pourquoi ne pas avoir parlé du for…in, il est important dans ma tête de comprendre la nuance avec le for…of !

    Continue sur ta lancée,
    A bientôt.

      • Ellinn

        for…in fonctionne avec n’importe quel type de données et réduira même l’effort d’écrire le for(let i = 0; i < pokemons.length; i++)

        Par exemple:

        const pokemons = ['Pikachu','Salamèche','Carapuce'];

        for(let i = 0; i < pokemons.length; i++){
        console.log(pokemons[i]);
        }

        for(const index in pokemons) {
        console.log(pokemons[index])
        }

        auront le même output 😉

      • Ellinn

        Pour compléter mon commentaire : Array, Map etc sont eux-même des objects, il n’y a donc pas raison de ne pas utiliser for…in sur eux si le use case s’y prête 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *