Tableaux (Arrays)

Les tableaux sont des collections ordonnées d'éléments, essentielles en JavaScript pour manipuler des listes de données.

Création et accès

javascript

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

// Accès par index (commence à 0)
console.log(fruits[0]); // 'pomme'
console.log(fruits[1]); // 'banane'

// Taille du tableau
console.log(fruits.length); // 3

Information

Contrairement à des langages comme C ou Java, les tableaux JavaScript peuvent contenir plusieurs types différents :

javascript

const mixed = [1, 'hello', true, { name: 'Alice' }]; // ✅ Valide

Cependant, cette pratique n'est pas recommandée. Privilégiez des tableaux homogènes (un seul type) pour un code plus prévisible et plus facile à maintenir.

Tableaux dynamiques

Les tableaux JavaScript sont dynamiques : leur taille n'est pas fixe et peut changer à tout moment.

javascript

const numbers = [1, 2, 3]; // Taille : 3
numbers.push(4);            // Taille : 4
numbers.push(5, 6);         // Taille : 6
numbers.pop();              // Taille : 5

Si vous connaissez d'autres langages :

Comme ArrayList en Java (pas int[])
Comme vector en C++ (pas les tableaux statiques)
Pas besoin de déclarer la taille à l'avance
Redimensionnement automatique

En pratique : Vous pouvez ajouter ou retirer des éléments librement.

Méthodes mutantes : .push(), .pop(), .shift(), .unshift() modifient le tableau original
Méthodes immutables : .map(), .filter(), .slice() créent toujours un nouveau tableau

Méthodes de base

javascript

const numbers = [1, 2, 3];

// Ajouter à la fin
numbers.push(4); // [1, 2, 3, 4]

// Retirer le dernier
numbers.pop(); // [1, 2, 3]

// Vérifier la présence
numbers.includes(2); // true

// Trouver l'index
numbers.indexOf(2); // 1

// Vérifier si c'est un tableau
Array.isArray(numbers); // true

Que retourne fruits[fruits.length - 1] si fruits = ['pomme', 'banane', 'orange'] ?

Méthodes de transformation

Ces méthodes sont essentielles en JavaScript car elles créent de nouveaux tableaux sans modifier l'original (immutabilité).

Pourquoi l'immutabilité ?

Les méthodes comme .map(), .filter(), .reduce() ne modifient jamais le tableau original. Elles en créent un nouveau.

Avantages :

Code plus prévisible et facile à déboguer
Évite les effets de bord (side effects)
Facilite le suivi des changements de données
Bonne pratique pour les applications web

Privilégiez toujours les méthodes immutables.

Les méthodes essentielles

javascript

const numbers = [1, 2, 3, 4, 5];
const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 }
];

// .map() - Transforme chaque élément
const doubled = numbers.map(n => n * 2);
// [2, 4, 6, 8, 10]

const names = users.map(user => user.name);
// ['Alice', 'Bob']

// .filter() - Garde les éléments qui passent le test
const evens = numbers.filter(n => n % 2 === 0);
// [2, 4]

const adults = users.filter(user => user.age >= 18);
// [{ id: 1, name: 'Alice', age: 25 }, { id: 2, name: 'Bob', age: 30 }]

// .find() - Retourne le premier élément qui correspond
const bob = users.find(user => user.id === 2);
// { id: 2, name: 'Bob', age: 30 }

// .some() - Au moins un élément passe le test ?
numbers.some(n => n > 3); // true

// .every() - Tous les éléments passent le test ?
numbers.every(n => n > 0); // true

// .reduce() - Réduit à une seule valeur
const sum = numbers.reduce((acc, n) => acc + n, 0);
// 15 (1+2+3+4+5)

Que retourne [1, 2, 3].map(n => n * n) ?

Quelle différence entre .map() et .filter() ?

Que fait le deuxième paramètre de .reduce() ?

Comprendre, pas mémoriser

Vous n'avez pas besoin de mémoriser toutes ces méthodes !

L'important est de comprendre les concepts :

.map() → transformer
.filter() → filtrer
.find() → chercher
.reduce() → accumuler

Avec la pratique, ces méthodes deviendront naturelles. Consultez la documentation (MDN) quand vous avez besoin d'un rappel sur la syntaxe.

Opérations immutables

Pour copier ou modifier des tableaux sans mutation, utilisez ces techniques :

javascript

const original = [1, 2, 3];

// Copier un tableau
const copy1 = original.slice(); // Méthode classique
const copy2 = [...original]; // Spread operator

// Ajouter des éléments (sans push)
const withFour = [...original, 4]; // [1, 2, 3, 4]
const withZero = [0, ...original]; // [0, 1, 2, 3]

// Combiner des tableaux (sans mutation)
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]
// Ou : arr1.concat(arr2)

// Retirer un élément par index
const numbers = [1, 2, 3, 4, 5];
const index = 2;
const withoutIndex = [
  ...numbers.slice(0, index),
  ...numbers.slice(index + 1)
];
console.log(withoutIndex); // [1, 2, 4, 5]

Quelle est la différence entre [1, 2, 3].push(4) et [...[1, 2, 3], 4] ?

Exercice : Pratique : Méthodes de tableaux

Facile

Avec ce tableau de produits :

javascript

const products = [
{ name: 'Laptop', price: 1000 },
{ name: 'Mouse', price: 25 },
{ name: 'Keyboard', price: 75 }
];

Extraire tous les noms dans un tableau
Filtrer les produits à moins de 100€
Calculer le prix total

Astuce : Utilisez .map(), .filter() et .reduce()

Tableau de syntaxe

Méthode	Usage	Retourne	Mutable ?
`.map()`	Transformer chaque élément	Nouveau tableau	❌ Non
`.filter()`	Filtrer des éléments	Nouveau tableau	❌ Non
`.find()`	Trouver un élément	Élément ou undefined	❌ Non
`.some()`	Tester au moins un	boolean	❌ Non
`.every()`	Tester tous	boolean	❌ Non
`.reduce()`	Accumuler/réduire	Une valeur	❌ Non
`.slice()`	Copier/extraire	Nouveau tableau	❌ Non
`[...array]`	Copier (spread)	Nouveau tableau	❌ Non
`.push()`	Ajouter à la fin	Nouvelle longueur	✅ Oui
`.pop()`	Retirer le dernier	Élément retiré	✅ Oui

Bonne pratique

Privilégiez toujours les méthodes immutables (.map(), .filter(), .slice(), spread operator) plutôt que les méthodes mutantes (.push(), .pop(), .splice()).

Votre code sera plus prévisible, plus facile à déboguer, et maintenable.