🧩 Les Tableaux JavaScript

Notions de Base et Exemples d’Utilisation

(Avec des exemples concrets, des métaphores du quotidien et une pédagogie qui ne fait pas mal à la tête)

« Un tableau JavaScript, c’est comme une liste de courses écrite à 2h du matin :
il y a tout… mais si tu ne sais pas comment la lire, tu es perdu. » 😅

En JavaScript, les tableaux (arrays) sont absolument partout.
Si tu travailles en JS et que tu ne maîtrises pas les tableaux :

👉 le JS te maîtrise, pas l’inverse 😄

🧠 1. Qu’est-ce qu’un tableau en JavaScript ?

Un tableau est une structure de données qui permet de stocker plusieurs valeurs dans une seule variable.

Au lieu de faire ça ❌ :

const fruit1 = "pomme";
const fruit2 = "banane";
const fruit3 = "orange";

Tu fais ça ✅ :

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

🎉 Plus simple. Plus propre. Plus logique.

🧩 Que peut contenir un tableau ?

👉 Tout. Absolument tout.

const mix = [42, "hello", true, null, { name: "Jean" }, [1, 2, 3]];

🧠 Un tableau JS, c’est un peu une boîte magique sans règles strictes.

🔢 2. Les index : le fameux “ça commence à 0”

En JavaScript (et presque partout en programmation) :

👉 Le premier élément a l’index 0

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

console.log(fruits[0]); // "pomme"
console.log(fruits[1]); // "banane"
console.log(fruits[2]); // "orange"

💡 Astuce pour s’en souvenir :

L’index = le nombre de pas depuis le début.

❌ Erreur classique

console.log(fruits[3]); // undefined

Pourquoi ?
Parce que :

• Il n’y a que 3 éléments
• Les index vont de 0 à 2

📏 3. La longueur d’un tableau : length

console.log(fruits.length); // 3

⚠️ Attention au piège :

fruits[fruits.length - 1]; // dernier élément

👉 Toujours length - 1, jamais length.

➕ 4. Ajouter des éléments à un tableau

➕ push() – Ajouter à la fin

fruits.push("fraise");

🧠 Ce que fait push() :

• Ajoute un élément à la fin
• Modifie le tableau original

📦 Métaphore :

Quelqu’un arrive à la fin de la file d’attente.

➕ unshift() – Ajouter au début

fruits.unshift("citron");

😄 Métaphore :

“Toi, tu passes devant tout le monde.”

⚠️ Moins performant, car tous les éléments doivent se décaler.

➖ 5. Supprimer des éléments

➖ pop() – Supprimer le dernier

fruits.pop();

🎉 Parfait pour :

• Annuler une action
• Retirer le dernier élément ajouté

➖ shift() – Supprimer le premier

fruits.shift();

🚨 Attention :

• Plus lent
• Tous les index changent

🔍 6. Parcourir un tableau (le lire)

🏫 L’ancienne méthode : for

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

✔️ Fonctionne
❌ Un peu lourd
❌ Facile de faire des erreurs

✨ La méthode moderne : forEach()

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

🧠 Avantages :

• Plus lisible
• Plus expressif
• Moins d’erreurs

🎯 7. Chercher dans un tableau

✅ includes() – Existe ou pas ?

fruits.includes("banane"); // true
fruits.includes("kiwi");   // false

👉 Utilisation parfaite dans un if :

if (fruits.includes("pomme")) {
  console.log("Pomme trouvée 🍎");
}

🕵️‍♂️ find() – Trouver UN élément

const users = [
  { id: 1, name: "Jean" },
  { id: 2, name: "Marie" }
];

const user = users.find(u => u.id === 2);

🧠 Ce que fait find() :

• Parcourt le tableau
• S’arrête au premier match
• Retourne l’objet lui-même

⚠️ S’il ne trouve rien → undefined

🧺 filter() – Trouver PLUSIEURS éléments

const notes = [8, 12, 18, 5, 15];

const bonnesNotes = notes.filter(note => note >= 10);

🧠 Différence clé :

• find() → 1 élément
• filter() → un nouveau tableau

🔄 8. Transformer un tableau

🔁 map() – Transformer chaque élément

const prices = [10, 20, 30];

const pricesTTC = prices.map(price => price * 1.2);

🧠 Ce que fait map() :

• Prend un tableau
• Applique une transformation
• Retourne un nouveau tableau

📌 Le tableau original n’est PAS modifié.

⚠️ 9. Les erreurs les plus fréquentes (et comment les éviter)

🚫 Oublier que l’index commence à 0
🚫 Utiliser filter() au lieu de find()
🚫 Modifier un tableau sans le vouloir
🚫 Trop de for alors que map / filter existent

🧠 10. Pourquoi les tableaux sont essentiels ?

Parce que :

• Les APIs renvoient des tableaux
• Les interfaces affichent des listes
• React / Vue / Angular adorent les arrays
• Le monde réel est une suite de listes 📋

🎬 Conclusion Finale

Les tableaux JavaScript :

✅ Simplifient ton code
✅ Améliorent la lisibilité
✅ T’évitent des bugs inutiles
✅ Te font passer au niveau supérieur 😎

Maîtriser les tableaux, c’est maîtriser la base du JavaScript moderne.