Boucles JavaScript pour débutants : apprenez les bases

C'est un lundi maussade et vous êtes au travail. Nous savons tous à quel point les lundis peuvent être déprimants, n'est-ce pas ? Votre patron s'approche de vous et vous dit : « Hé, j'ai 300 e-mails non ouverts que nous avons reçus au cours du week-end. Je veux que vous les ouvriez chacun, que vous notiez le nom de l'expéditeur et que vous supprimiez les e-mails une fois que vous avez terminé.

Cette tâche semble très fatigante si vous essayez de la faire manuellement. La prochaine chose qui vous vient à l’esprit est probablement d’aller sur Google et de rechercher un logiciel capable d’automatiser ce processus et de vous faciliter la vie, n’est-ce pas ?

Eh bien, nous avons des situations similaires en programmation. Il y a des moments où vous devez effectuer des tâches répétées jusqu'à ce qu'elles soient terminées. Comment résolvez-vous ce problème ? En JavaScript, nous avons ce que nous appelons des boucles. Les boucles nous permettent de résoudre des tâches répétées en réduisant la quantité de code nécessaire pour terminer la tâche.

Dans cet article, nous verrons ce qu'est une boucle, comment elle fonctionne et les différentes méthodes que nous pouvons utiliser pour l'appliquer dans nos programmes.

Qu’est-ce qu’une boucle ?

Les boucles sont utilisées en JavaScript pour effectuer facilement des actions répétées. Ils sont basés sur une condition qui renvoie vrai ou faux.

Une condition est une expression qui doit être transmise pour maintenir une boucle en cours d’exécution. Une boucle s'exécute lorsque les conditions spécifiées renvoient une valeur vraie et s'arrête lorsqu'elles renvoient une valeur fausse.

Quand devez-vous utiliser une boucle ?

Les boucles sont utiles pour effectuer des tâches répétitives. Par exemple, l’utilisation d’une boucle raccourcit le code nécessaire à la résolution d’un problème. Cela permet de gagner du temps, d'optimiser l'utilisation de la mémoire et d'améliorer la flexibilité.

La véritable signification d’une boucle va au-delà de la réduction de la longueur du code et de la limitation de la répétition. Ils sont également utiles lorsque vous travaillez avec des données dans un tableau, un objet ou d'autres structures. De plus, les boucles favorisent la modularité du code en réduisant le code répétitif et en augmentant la réutilisabilité du code, ce qui permet de créer des codes pouvant être utilisés dans différentes parties de votre projet.

Types de boucles

Il existe deux grandes catégories de boucles : les boucles contrôlées à l’entrée et les boucles contrôlées à la sortie.

Les boucles contrôlées par l'entrée évaluent la condition à « l'entrée de la boucle » avant d'exécuter le corps de la boucle. Si la condition est vraie, le corps court. Sinon, le corps ne fonctionne pas. Les boucles for et while sont des exemples de boucles contrôlées par l'entrée.

Les boucles contrôlées par la sortie se concentrent sur le corps de la boucle plutôt que sur la condition de test, garantissant que le corps de la boucle est exécuté au moins une fois avant d'évaluer la condition de test. Un bon exemple de boucle contrôlée par la sortie est la boucle do-while .

Examinons quelques exemples de boucles contrôlées par l'entrée :

Boucle while

Une boucle while a la syntaxe suivante.

 while (condition) { // loop's body }

La liste suivante explique la fonctionnalité d'une boucle while :

1. La boucle while prend une condition de test entre parenthèses.

   
   

2. Le programme vérifie la condition pour voir si elle réussit ou échoue.

   
   

3. Le code dans le corps de la boucle s'exécute tant que la condition est passée.

   
   

4. Le programme termine son fonctionnement une fois que la condition de test échoue.

Ci-dessous, prenons un exemple pratique de la boucle while :

 let arr = []; let i = 1; let number = 5; while (i <= number) { arr.push(i) i++ } console.log(arr)

1. L'extrait de code ci-dessus initialise les variables "arr", "i" et "num".

   
   

2. La variable " arr " est un tableau qui contient les valeurs qui satisfont à la condition de test.

   
   

3. La variable "i" garde une trace de chaque incrément après chaque itération.

   
   

4. La variable "nombre" compare la valeur de "i" à sa valeur (5) après chaque itération.

   
   

5. Le code dans le corps de la boucle pousse chaque valeur de « i » après chaque itération dans le tableau tant que « i » est inférieur ou égal à « nombre ».

   
   

6. Une fois que la valeur actuelle de « i » ne remplit pas la condition, dans ce cas, où la valeur de « i » est supérieure au « nombre » qui est 6, la boucle cesse de fonctionner.

   
   

La méthode push() est une fonction JavaScript intégrée qui ajoute un nouvel élément à la fin d'un tableau.

Sortir

 [1, 2, 3, 4, 5]

faire pendant que la boucle

Une boucle do-while ressemble beaucoup à la boucle while ; la principale différence entre la boucle while et la boucle do-while est que la boucle do-while assure l'exécution du code au moins une fois avant d'évaluer l'état de la boucle ; la boucle do-while a la syntaxe suivante ci-dessous.

 do { // loop's body } while (//condition)

Le do-while est un excellent exemple de boucle contrôlée par la sortie. Cela réside dans le fait que les boucles contrôlées par la sortie donnent la priorité au corps de la boucle avant la condition de test. Examinons maintenant un exemple de code pratique utilisant la boucle do-while .

Exemple:

 let i = 1; let num = 5; do { console.log(i); i++; } while (i <= num);

Maintenant, décomposons cet extrait de code :

1. Nous avons initialisé les variables "i" et "num".

   
   

2. La console enregistre la valeur de "i" (1) avant d'évaluer l'état de la boucle.

   
   

3. La condition est vérifiée et la valeur de "i" s'incrémente de +1 après chaque itération.

   
   

4. La boucle termine son opération une fois que « i » est supérieur à « num ».

   
   

Sortir

 1 2 3 4 5

Bien que la boucle do-while soit très similaire à la boucle while , il existe des différences subtiles que nous devons noter ; Prenons un autre exemple qui compare la différence entre les boucles while et do-while .

 let i = 5; let num = 4 while( i < num) { console.log(i) }

Cette boucle while ci-dessus ne renverra aucun résultat à la console ; maintenant, pourquoi est-ce ainsi ?

1. Nous avons initialisé les variables "i" et "num" avec des valeurs de 5 et 4, respectivement.

   
   

2. La condition vérifie si la valeur de « i » est inférieure à « num ».

   
   

3. Si c'est vrai, il enregistre chaque valeur respective.

   
   

4. Puisque la valeur initiale de "i" dépasse celle de "num", la boucle ne s'exécute jamais.

   
   

Prenons maintenant un exemple similaire avec la boucle do-while .

 let i = 5; let num = 4; do { console.log(i) } while ( i < num)

Sortir

 5

La boucle do-while assure l'exécution du bloc de code, qui renvoie 5 dans la console, bien que "i" ait initialement une valeur supérieure à "num", il est toujours enregistré une fois dans la console. Cette représentation vous montre la différence de fonctionnalité entre les boucles do-while et while .

Pour la boucle

La for loop est un type de boucle unique et l'une des boucles les plus couramment utilisées par les programmeurs. La for loop est une boucle qui exécute un bloc de code un nombre de fois spécifique en fonction d'une condition. La boucle for a la syntaxe suivante ci-dessous.

 for (Expression1...; Expression2....; Expression3...{    //code block }

Expression 1 : cette partie d'une for loop est également appelée zone d'initialisation ; c'est le début de notre for loop et la zone où la variable counter est définie. La variable counter est utilisée pour suivre le nombre de fois où la boucle s'exécute et la stocker sous forme de valeur.

Expression 2 : C'est la deuxième partie de la boucle ; cette partie définit l'instruction conditionnelle qui exécuterait la boucle.

Expression 3 : C'est ici que se termine la boucle ; la variable compteur dans cette section met à jour sa valeur après chaque itération en augmentant ou en diminuant la valeur comme spécifié dans la condition.

Passons à un exemple utilisant la boucle for.

 for (let i = 0; i < 100; i++) {  console.log("Hello World" ) }

À partir de l’extrait de code ci-dessus, décomposons-le ensemble.

1. Tout d’abord, nous avons initialisé la variable compteur « i » avec une valeur de zéro.

   
   

2. Ensuite, nous avons créé l'instruction conditionnelle qui permettrait au code de continuer à fonctionner.

   
   

3. Nous avons comparé la valeur de « i » à 100 ; s'il réussit ce test, "Hello World" est enregistré.

   
   

4. Ce processus se répète tandis que le compteur augmente de +1 après chaque itération.

   
   

5. La boucle se termine lorsque la valeur du compteur atteint 100.

   
   

Sortir

 Hello World Hello World Hello World ... //repeated 97 more times making it 100 "Hello World" in total ...

pour chaque boucle

La boucle for-each est une méthode en JavaScript qui parcourt un tableau et applique une fonction de rappel sur chaque élément de ce tableau ; une fonction de rappel est simplement une autre fonction passée en paramètre dans une fonction. La fonction de rappel fonctionne en s'exécutant séquentiellement une fois l'exécution de la fonction principale terminée.

Examinons la syntaxe de base d'une boucle for-each .

 array.forEach(function(currentValue, index, arr))

Le code fourni ci-dessus explique le fonctionnement d'une boucle for-each .

• Cette boucle accepte trois paramètres, qui sont la valeur actuelle, un index et un tableau.

• La valeur actuelle représente la valeur actuelle de l'élément dans le tableau.

• L'index est un paramètre facultatif qui vous indique la position numérotée de l'élément actuel dans ce tableau.

• L'arr est un autre paramètre facultatif qui vous indique à quel tableau appartient l'élément.

  
  

 let myArray = [1, 2, 3, 4, 5]; array.forEach((num, index, arr) => { arr[index] = num * 2; console.log(array); });

Décomposons l'exemple ci-dessus :

1. Nous avons initialisé un tableau avec le nom de variable "myArray" et l'avons stocké avec des entiers allant de 1 à 5.

   
   

2. La méthode for-each array prend trois paramètres et applique une fonction de rappel sur le tableau.

   
   

3. Cette ligne; arr[index] = num * 2 multiplie la valeur de l'élément actuel par 2 et attribue la valeur renvoyée à l'index de l'élément actuel.

   
   

Attention : la méthode for-each array ne renvoie pas de nouveau tableau ; au lieu de cela, il modifie le tableau d'origine et le renvoie.

Sortir

 [2, 4, 6, 8, 10]

À quoi servent... In et For... des boucles en JavaScript ?

Les boucles for... in et for... of boucles sont très utiles lorsqu'il s'agit d'itérer sur des objets itérables ; Les objets itérables font référence à tout élément susceptible d'être bouclé, des exemples courants d'objets itérables sont les tableaux, les chaînes, les ensembles, etc.

Les for... in et for... of sont similaires dans la façon dont ils itèrent/se déplacent à travers les objets, la principale différence entre eux est indiquée dans la façon dont ils renvoient des valeurs.

pour... dans les boucles

Une boucle for... in est utile lorsque vous devez extraire la ou les clés/propriétés d'un objet et ses propriétés correspondantes de l'objet parent. La boucle for... in peut parfois parcourir un objet d'une manière différente de la façon dont elle a été définie dans cet objet particulier ; Prenons un exemple de boucle for... in en action.

 let namesArray = []; const studentScores = { John: 60, Dan: 53, Tricia: 73, Jamal: 45, Jane: 52 } for(const name in studentScores){ namesArray.push(name); } console.log(namesArray);

Dans l'exemple ci-dessus, nous avons défini un objet nommé studentScores qui contient plusieurs noms d'étudiants et leurs scores correspondants. En utilisant for... in , nous avons pu récupérer uniquement les noms des étudiants, qui représentent les clés de l'objet studentScores, et les stocker dans un tableau en utilisant la méthode push() .

Sortir

 ["John", "Dan", "Tricia", "Jamal", "Jane"]

pour... de boucles

La boucle for... of est un type spécial de boucle qui parcourt les valeurs d'objets itérables tels que des tableaux, des chaînes, des cartes, etc., les boucles for... of ne se soucient pas des clés ou des propriétés d'un objet. , ils affichent plutôt des priorités sur les valeurs uniquement.

La boucle for... of est incapable de parcourir les objets normaux et générera une erreur car ils ne sont pas itérables. Prenons un exemple utilisant la boucle for.. of .

 let numArray = [1,2,3,4,5] for (const value of numArray) {   console.log(value) } // Output = 1,2,3,4,5

En résumé, les boucles for... in et for... of sont un excellent moyen de parcourir des objets itérables ; la principale différence est qu'une boucle for... in renvoie la clé d'un objet tandis que la for... of renvoie uniquement les valeurs des objets itérables.

Qu’est-ce qu’une boucle infinie et comment pouvons-nous l’éviter ?

Une boucle infinie fait référence à une boucle qui continue de s'exécuter indéfiniment ; cela se produit lorsqu'une boucle n'a pas de condition de sortie définie. Les boucles infinies sont dangereuses car elles peuvent faire planter votre navigateur et entraîner des actions indésirables dans votre programme.

 // infinite loop sample while (true) { console.log("keep on running") }

Pour éviter les boucles infinies dans votre programme, assurez-vous toujours qu'il existe une condition de sortie définie dans votre boucle.

Conclusion

Merci beaucoup d'être arrivé à la fin de cet article, les boucles en Javascript sont un concept important que tout développeur doit maîtriser car il est très utile pour créer un bon programme optimisable. Je pense qu'avec cet article, vous serez en mesure de comprendre les bases et les subtilités de l'utilisation des boucles dans votre programme.