Comprendre le concept des boucles (sans code)

Introduction

Quand on débute le dev, il peut parfois être compliqué de comprendre les boucles. On se concentre trop sur la syntaxe, sans comprendre l'intérêt même de la boucle.

Si je ne comprends pas à quoi va me servir une boucle, je vais avoir du mal à l'utiliser, encore plus à choisir laquelle utiliser.

Je propose de faire un petit tour sur l'avantage des boucles en prenant exemple dans la vie de tous les jours. Car , oui, dans la vie, on passe son temps à faire des boucles 😉

On s'est tous retrouvés au moins une fois dans cette situation où on doit préparé les sandwichs, les saucisses pour le barbecue, les goûters... pour un groupe de personnes. Si ça ne t'es jamais arrivé, je pense que tu n'auras tout de même aucun mal à te représenter la situation !

Exemple de la vie courante utilisé dans cet article : créer des sandwichs pour un groupe de personnes.

Convention

Voici les protagonistes de notre "histoire" :

• 👤 : 1 personne.
• 👤👤👤👤👤 : le groupe de personnes.
• 🤔 : un bonhomme (qui réfléchi ou pense à une personne).

Le sandwich 🥪 sera composé de pain 🍞 , salade 🥗, jambon 🥓, tomate 🍅 puis pain 🍞 à nouveau.

J'utiliserai la flèche → pour représenter des étapes.

On partira du principe que je dois expliquer à quelqu'un comment s'y prendre.

Préparer les sandwichs, sans les boucles

Si c'est la tout première fois que mon bonhomme fait ça, je vais sûrement devoir lui expliquer en répétant chaque étape. Je lui dis donc que pour s'assurer qu'il prépare un sandwich par personne il va :

• penser à une personne (🤔 → 👤),
• lui préparer son sandwich (🍞 + 🥗 + 🥓 + 🍅 + 🍞 → 🥪) pour obtenir le résultat (🥪👤),
• puis il va penser à la personne suivante,
• lui préparer son sandwicc,
• etc. Il devra régulièrement regarder s'il reste des personnes sans sandwich pour savoir s'il faut continuer à préparer des sandwichs (🤔 →👤❌🥪 ?).

Pour simplifier, je ne mettrai l'étape de vérification qu'à la fin.

Voici la séquence pour un groupe de 5 personnes :

Pour la 1ère personne :
🤔 → 👤 → 🍞 + 🥗 + 🥓 + 🍅 + 🍞 → 🥪👤
Pour la 2ème personne :
🤔 → 👤 → 🍞 + 🥗 + 🥓 + 🍅 + 🍞 → 🥪👤
Pour la 3ème personne :
🤔 → 👤 → 🍞 + 🥗 + 🥓 + 🍅 + 🍞 → 🥪👤
Pour la 4ème personne :
🤔 → 👤 → 🍞 + 🥗 + 🥓 + 🍅 + 🍞 → 🥪👤
Pour la 5ème personne :
🤔 → 👤 → 🍞 + 🥗 + 🥓 + 🍅 + 🍞 → 🥪👤
Une petite vérification :
🤔 →👤❌🥪 ?

Rien qu'avec cette séquence, on peut voir que c'est fastidieux. Tu te dis même sûrement déjà que j'aurais pu faire plus simple. Tu aurais d'ailleurs fait autrement, sans même trop y réfléchir. Hé bien ! Sans le savoir tu aurais fait une boucle. Voyons-ça !

Préparer les sandwichs, avec des boucles

On remarque assez facilement qu'il y a des choses qui se répètent dans la séquence ci-dessus. Pour éviter de redonner les instructions à chaque fois, on peut imaginer que je lui explique comme ceci :

1. calcule le nombre de personnes,
2. crée un sandwich pour chaque personne,
3. répète le point 2 jusqu'à ce que le nombre de sandwichs corresponde au nombre de personnes.

Voici la séquence :

Calcule le nombre de personnes : 🤔 → 👤 + 👤 + 👤 + 👤 + 👤 = 5

Boucle jusqu'à arriver à 5 :

• 🍞 + 🥗 + 🥓 + 🍅 + 🍞 → 🥪👤
• compte 1 sandwich

Ca revient au même que compter avec des petits bâtons.

C'est tout de même beaucoup plus simple ! Non ?

On aurait aussi pu imaginer une autre explication :

1. crée une liste à cocher des personnes qui ont besoin d'un sandwich
2. prépare un sandwich
3. coche la personne à qui va le sandwich Recommence les étapes 2 et 3 tant qu'il reste des cases à cocher

Boucle 1 : pour chaque personne

• ☐ 👤

Boucle 2 :

• 🍞 + 🥗 + 🥓 + 🍅 + 🍞 → 🥪👤
• ✅👤

Ce qui revient à faire une liste des personnes et cocher au fur et à mesure

Des boucles imbriquées

Pour m'assurer qu'il n'oublie aucun ingrédient, je pourrais lui proposer d'y aller par étapes :

• préparer autant de pain que de personnes,
• puis ajouter la salade sur chaque pain,
• puis le jambon etc.
• et enfin distribue les sandwichs.

On aurait par exemple cette séquence :

Calcule le nombre de personnes : 🤔 → 👤 + 👤 + 👤 + 👤 + 👤 = 5

Boucle 1 : Prépare le pain pour le nombre de personnes :

• 🍞 + 🍞 + 🍞 + 🍞 + 🍞
• boucle 2 : Sur chaque pain :
  • + 🥗
  • + 🥓
  • + 🍅
  • + 🍞
• 🥪👤

Cette méthode peut paraitre plus longue mais permet assez facilementde moduler les sandwichs selon les préférences et/ou intolérances de chacun par exemple 😉

Tu peux retrouver des slides reprenant ces exemples sur insta

J'espère que ces exemples de la vie courante t'auront permis de démystifier les boucles. Je pourrai te proposer un article qui te donne la syntaxe javaScript pour chaque exemple. Ca te dit ?