Boucles et Interactions (Loops and Interactions)

Salut HaWkers, c'est le quatrieme article de notre serie d'articles qui vont couvrir l'approfondissement de notre Roadmap JavaScript - TOUT ce que vous devez Apprendre. Si vous ne savez pas de quoi je parle, cliquez sur le lien precedent.

Bon, commencons !

Les boucles de repetition, ou loops, sont des structures qui permettent de repeter un bloc de code plusieurs fois, economisant des lignes et facilitant la maintenance du code. Dans cet article, nous allons approfondir les principaux types de loops disponibles en JavaScript et comment les utiliser efficacement.

Boucle For

La boucle for est l'une des structures les plus utilisees en programmation. Avec elle, il est possible de definir l'initialisation, la condition d'arret, et l'iteration en une seule ligne. Explorons ses nuances et caracteristiques, mais d'abord pourquoi est-elle importante ?

// Au lieu d'ecrire ceci :
text += cars[0] + '<br>';
text += cars[1] + '<br>';
text += cars[2] + '<br>';
text += cars[3] + '<br>';
text += cars[4] + '<br>';
text += cars[5] + '<br>';

Voici la syntaxe basique de la boucle for :

for (expression 1; expression 2; expression 3) {
  // code du bloc a executer
}

Et sachant cela, vous pouvez ecrire de la facon suivante :

// Vous pouvez ecrire ceci :
for (let i = 0; i < cars.length; i++) {
  text += cars[i] + '<br>';
}

Boucle For avec Objets

En plus des arrays, nous pouvons aussi utiliser les boucles for pour iterer a travers les proprietes d'un objet. En utilisant la boucle for...in, nous pouvons naviguer a travers toutes les proprietes enumerables d'un objet.

const objet = { a: 1, b: 2, c: 3 };

for (const prop in objet) {
  console.log(`objet.${prop} = ${objet[prop]}`);
}

// Sortie :
// objet.a = 1
// objet.b = 2
// objet.c = 3

Boucle For...of

La boucle for...of facilite l'iteration a travers des objets iterables, comme les arrays et strings, sans avoir besoin de se soucier des index. Voyons comment ca fonctionne :

const array = [1, 2, 3, 4, 5];

for (const valeur of array) {
  console.log(valeur);
}

// Sortie :
// 1
// 2
// 3
// 4
// 5

Boucle While

La boucle while cree une iteration qui continue tant que la condition definie est vraie. Elle est extremement utile dans les situations ou nous ne savons pas combien de fois nous aurons besoin d'iterer.

Voici la syntaxe de la boucle while :

while (condition) {
  routine;
}

Et voici un exemple d'utilisation :

let n = 0;
let x = 0;

while (n < 3) {
  n++;
  x += n;
}

console.log(x); // 6

Boucle Infinie : Un Piege a Eviter

Bien que les boucles soient des outils puissants, elles peuvent aussi etre des pieges dangereux. Une boucle infinie peut bloquer votre programme, creant une operation qui ne se termine jamais.

// ATTENTION : Ceci est un exemple de boucle infinie. N'executez pas ce code !
while (true) {
  console.log('Ceci est une boucle infinie !');
}

Explorer des conditions de sortie adequates et eviter la creation involontaire de boucles infinies est vital pour ecrire du code robuste et efficace.

Boucle Do-While

Semblable au while, la boucle do-while garantit que le bloc de code soit execute au moins une fois, independamment de la condition, en la verifiant seulement a la fin de chaque iteration.

Voici la syntaxe du do-while :

do statement;
while (condition);

Et voici un exemple d'utilisation :

let result = '';
let i = 0;

do {
  i = i + 1;
  result = result + i;
} while (i < 5);

console.log(result);
// Sortie : "12345"

Boucle avec Array

Les arrays et les boucles sont des partenaires inseparables en programmation. En travaillant avec des arrays en JavaScript, nous avons diverses facons d'iterer sur eux, comme en utilisant les methodes map, filter, et reduce, qui facilitent la manipulation d'arrays de maniere fonctionnelle et declarative. Mais il existe aussi une autre forme, qui est probablement la plus utilisee, qui est le fameux forEach :

forEach

L'iteration forEach est une fonction d'ordre superieur specifique aux arrays. Elle permet d'iterer sur chaque element d'un array de maniere simplifiee, sans avoir besoin de controler manuellement les index.

Voici la syntaxe du forEach :

arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);

Et voici un exemple d'utilisation :

const array = ['a', 'b', 'c'];

array.forEach(element => console.log(element));

// Sortie attendue : "a"
// Sortie attendue : "b"
// Sortie attendue : "c"

Utiliser des Boucles avec les Methodes de String

Les boucles ne sont pas seulement pour les nombres ou les arrays ; elles peuvent aussi etre utilisees avec les strings ! Nous pouvons, par exemple, iterer sur chaque caractere d'une string en utilisant une boucle for.

const texte = 'HaWkers';
for (let i = 0; i < texte.length; i++) {
  console.log(texte[i]);
}

// Sortie :
// H
// a
// W
// k
// e
// r
// s

Utiliser des Boucles avec les Fonctions Asynchrones

Parfois, il peut etre necessaire d'utiliser des boucles avec des fonctions asynchrones, et le JavaScript moderne nous permet de le faire elegamment avec l'aide de async/await. Voyons un exemple :

const taches = [1, 2, 3, 4, 5].map(n => async () => {
  console.log(`Demarrage de la tache ${n}`);
  await new Promise(res => setTimeout(res, 1000));
  console.log(`Completion de la tache ${n}`);
});

for (const tache of taches) {
  await tache();
}

// Sortie (avec un intervalle de 1 seconde entre chaque ensemble de logs) :
// Demarrage de la tache 1
// Completion de la tache 1
// ...
// Demarrage de la tache 5
// Completion de la tache 5

Note : Ce code doit etre execute dans un environnement qui supporte async/await, et a l'interieur d'une fonction asynchrone.

Mot-cle continue dans les Boucles

Le mot-cle continue permet de sauter l'iteration actuelle d'une boucle, continuant directement a l'iteration suivante. C'est un outil precieux pour eviter l'execution de code inutile dans des situations specifiques a l'interieur d'une boucle.

Observons un exemple ou nous voulons afficher uniquement les nombres impairs d'un array :

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

// Sortie :
// 1
// 3
// 5
// 7
// 9

Dans cet exemple, nous utilisons continue pour sauter l'execution du code pour les nombres pairs, affichant uniquement les nombres impairs.

Mot-cle break dans les Boucles

Le mot-cle break, d'autre part, permet de sortir completement d'une boucle, interrompant toutes les iterations futures. Il est utilise pour optimiser le code, evitant les executions inutiles quand nous avons deja atteint le resultat desire.

Voyons cela en action :

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

// Sortie :
// 0
// 1
// 2
// 3
// 4

Dans cet exemple, la boucle est interrompue des que i devient 5, evitant les iterations inutiles et sortant de la boucle plus tot.

Boucles Imbriquees

Les boucles imbriquees sont des boucles placees a l'interieur d'autres boucles. Bien que puissantes, elles doivent etre utilisees avec precaution, car elles peuvent facilement entrainer des problemes de performance, surtout quand on travaille avec de grands ensembles de donnees.

Voyons comment nous pouvons utiliser des boucles imbriquees pour creer une table de multiplication :

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(`Resultat de la multiplication de ${i} et ${j} est : ${i * j}`);
  }
}

// Sortie :
// Resultat de la multiplication de 1 et 1 est : 1
// Resultat de la multiplication de 1 et 2 est : 2
// ...
// Resultat de la multiplication de 3 et 3 est : 9

Ici, nous avons deux boucles : une pour i et une autre pour j. Cela nous permet de multiplier chaque combinaison de i et j, creant une table de multiplication.

Boucles et Recursion

Parfois, nous pouvons utiliser la recursion, un processus dans lequel une fonction s'appelle elle-meme, comme alternative aux boucles. La recursion peut offrir des solutions plus propres et plus faciles a comprendre pour des problemes complexes.

function compteARebours(n) {
  if (n <= 0) {
    console.log('Termine !');
    return;
  }
  console.log(n);
  compteARebours(n - 1);
}

compteARebours(3);

// Sortie :
// 3
// 2
// 1
// Termine !

Boucles et Manipulation du DOM

Les boucles peuvent etre un outil puissant quand elles sont combinees avec la manipulation du DOM dans le developpement web. Ci-dessous, nous allons iterer sur une liste d'elements DOM et modifier leur contenu :

const elementsListe = document.querySelectorAll('li');

for (const [index, item] of elementsListe.entries()) {
  item.textContent = `Element numero ${index + 1}`;
}

Construire des Animations avec les Boucles

Nous pouvons utiliser des boucles pour creer des animations dynamiques sur nos pages web. Voici un exemple simple utilisant une boucle for pour animer le changement de couleur de fond d'un element :

const element = document.querySelector('.mon-element');

for (let i = 0; i <= 100; i++) {
  setTimeout(() => {
    element.style.backgroundColor = `rgba(255,0,0,${i / 100})`;
  }, i * 100);
}

// Dans ce code, l'element '.mon-element' changera graduellement sa couleur de fond vers le rouge sur 10 secondes.

Conclusion

Eh bien HaWkers, comme vous pouvez le constater, maitriser les boucles de repetition est fondamental pour tout developpeur JavaScript. Elles offrent une maniere puissante et flexible d'iterer sur des ensembles de donnees, d'executer du code repetitif et de creer des algorithmes plus complexes et efficaces. J'espere que ce guide vous aidera a mieux comprendre et a utiliser ces structures de controle essentielles dans votre quotidien de programmeur.

Retour au Roadmap JavaScript - TOUT ce que vous devez Apprendre.

C'est parti !