🧠 Itération de tableau en JavaScript

La méthode facile (et agréable) pour parcourir les tableaux sans perdre la tête

Apprendre JavaScript, c’est un peu comme apprendre à cuisiner 🍳
Au début, tu sais ce qu’est un ingrédient (un tableau),
mais tu te demandes :

« Ok… j’ai un tableau.
Comment je fais pour utiliser chaque élément correctement ? »

Bonne nouvelle 🎉
JavaScript adore les tableaux
et il te donne plein d’outils simples pour les parcourir.

Dans cet article, on va :

• comprendre ce que veut dire “itérer”
• explorer toutes les méthodes importantes
• voir quand utiliser laquelle
• apprendre des astuces de développeur
• éviter les pièges classiques

Le tout avec des exemples clairs, concrets et un peu d’humour 😄

📦 1. Qu’est-ce que l’itération d’un tableau ?

👉 Itérer un tableau, ça veut dire :

parcourir chaque élément, un par un, pour faire quelque chose avec.

Prenons un tableau simple :

const fruits = ["pomme", "banane", "orange"];

Itérer ce tableau, c’est dire à JavaScript :

« Regarde chaque fruit, et fais une action. »

Par exemple :

• afficher chaque fruit
• transformer chaque fruit
• vérifier une condition
• créer un nouveau tableau

Sans itération, un tableau… ne sert pas à grand-chose 😉

🔁 2. La méthode classique : la boucle for

C’est la méthode historique.
Elle existe depuis toujours.
Elle marche partout.

const fruits = ["pomme", "banane", "orange"];

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

🧠 Décomposition ligne par ligne :

let i = 0;

➡ On commence au premier élément (index 0)

i < fruits.length;

➡ On s’arrête à la fin du tableau

i++;

➡ On avance d’un élément à chaque tour

fruits[i]

➡ On accède à l’élément actuel

✅ Avantages

• Contrôle total
• Très précis
• Utile pour des cas complexes

❌ Inconvénients

• Plus long à écrire
• Facile de se tromper
• Moins lisible

👉 Aujourd’hui, on l’utilise surtout quand on a besoin de l’index.

🙂 3. forEach : la méthode préférée des développeurs modernes

Voici la méthode simple, propre et élégante ✨

const fruits = ["pomme", "banane", "orange"];

fruits.forEach(function (fruit) {
  console.log(fruit);
});

🧠 Ce que fait forEach :

• JavaScript parcourt le tableau pour toi
• Il te donne chaque élément
• Tu te concentres uniquement sur l’action

💬 En langage humain :

« Pour chaque fruit, affiche-le »

✨ Version moderne avec fonction fléchée

fruits.forEach(fruit => {
  console.log(fruit);
});

Encore mieux 😄

🧪 Exemple pratique

const users = ["Ali", "Marie", "John"];

users.forEach(user => {
  console.log(`Bienvenue ${user} 👋`);
});

Résultat :

Bienvenue Ali 👋
Bienvenue Marie 👋
Bienvenue John 👋

⚠️ Important à savoir

• forEach ne retourne rien
• Il sert à agir, pas à transformer

🚀 4. map : parcourir ET transformer (le super pouvoir)

map est utilisé quand tu veux créer un nouveau tableau.

const numbers = [1, 2, 3, 4];

const doubled = numbers.map(number => {
  return number * 2;
});

Résultat :

[2, 4, 6, 8]

🧠 Ce que fait map :

• Parcourt chaque élément
• Applique une transformation
• Retourne un nouveau tableau

📌 Le tableau original reste intact
(JavaScript est respectueux 😄)

🧪 Exemple concret

const prices = [10, 20, 30];

const pricesWithTax = prices.map(price => {
  return price * 1.2;
});

➡ Calcul automatique
➡ Code clair
➡ Très utilisé en production

🔍 5. for...of : simple, lisible, efficace

Une boucle moderne et très appréciée :

const fruits = ["pomme", "banane", "orange"];

for (const fruit of fruits) {
  console.log(fruit);
}

Pourquoi elle est géniale ?

• Pas d’index
• Pas de length
• Lecture naturelle

💬 Comme une phrase :

« Pour chaque fruit dans fruits »

👉 Parfaite quand tu veux juste parcourir et lire.

🚫 6. L’erreur classique : for...in ❌

Beaucoup de débutants écrivent :

for (let fruit in fruits) {
  console.log(fruit);
}

Résultat :

0
1
2

😱 Surprise !

Pourquoi ?

• for...in parcourt les index
• Pas les valeurs

👉 À éviter pour les tableaux
👉 Réservé aux objets

🧪 7. Cas réel : afficher des données utilisateur

const users = [
  { name: "Ali", age: 25 },
  { name: "Marie", age: 30 },
  { name: "John", age: 28 }
];

users.forEach(user => {
  console.log(`${user.name} a ${user.age} ans`);
});

Lisible. Propre. Professionnel.

🎯 8. Quelle méthode choisir ? (Guide rapide)

💡 9. Astuces de développeur

✔ Lisibilité > complexité
✔ map retourne toujours un tableau
✔ forEach ne retourne rien
✔ Évite les boucles inutiles
✔ Moins de code = moins de bugs 😄

🧠 10. Résumé final

• Itérer = parcourir un tableau
• JavaScript offre plusieurs solutions
• Les méthodes modernes sont plus propres
• Le bon choix dépend de ton besoin

🚀 Mot de la fin

Parcourir un tableau en JavaScript,
ce n’est pas une épreuve,
c’est une compétence fondamentale.

Une fois maîtrisée :

• ton code est plus clair
• ton raisonnement s’améliore
• tu passes un cap de développeur 💪