Les tableaux JavaScript ont l'une des API de méthodes les plus riches de tout langage mainstream. Mais la plupart des tutoriels enseignent map et filter avec des exemples artificiels — doubler des nombres dans un tableau, filtrer les nombres pairs — et vous laissent ensuite comprendre le reste par vous-même. Passons en revue les méthodes qui apparaissent vraiment dans le code de production, en utilisant des données réalistes : produits, commandes et enregistrements utilisateurs.

Le jeu de données avec lequel nous allons travailler

Pour garder les exemples concrets, nous utiliserons un catalogue de produits réaliste tout au long de cet article :

js
const products = [
  { id: 1, name: 'Wireless Keyboard',  category: 'electronics', price: 79.99,  rating: 4.5, inStock: true  },
  { id: 2, name: 'Mechanical Keyboard', category: 'electronics', price: 149.99, rating: 4.8, inStock: true  },
  { id: 3, name: 'USB-C Hub',          category: 'electronics', price: 49.99,  rating: 4.2, inStock: false },
  { id: 4, name: 'Standing Desk',       category: 'furniture',   price: 499.99, rating: 4.6, inStock: true  },
  { id: 5, name: 'Desk Lamp',           category: 'furniture',   price: 39.99,  rating: 4.1, inStock: true  },
  { id: 6, name: 'Monitor Arm',         category: 'electronics', price: 89.99,  rating: 4.7, inStock: false },
];

map() — Transformer chaque élément

Array.prototype.map() crée un nouveau tableau en appliquant une fonction à chaque élément. C'est le cheval de bataille de la transformation de données — reformater les réponses API dans le format dont votre interface a besoin :

js
// Extract just the display data for a product list component
const productCards = products.map(product => ({
  id:       product.id,
  name:     product.name,
  price:    `$${product.price.toFixed(2)}`,
  badge:    product.inStock ? 'In Stock' : 'Out of Stock',
  stars:    '★'.repeat(Math.round(product.rating))
}));

// productCards[0] → { id: 1, name: 'Wireless Keyboard', price: '$79.99', badge: 'In Stock', stars: '★★★★★' }

// Apply a discount to all prices
const discounted = products.map(p => ({
  ...p,
  price:       parseFloat((p.price * 0.9).toFixed(2)),
  originalPrice: p.price
}));

map() ne mute jamais le tableau original — il retourne toujours un nouveau. C'est pourquoi il est sûr de le chaîner, et pourquoi vous devriez le préférer à une boucle for quand la transformation est l'objectif.

filter() — Obtenir un sous-ensemble

filter() retourne un nouveau tableau contenant uniquement les éléments pour lesquels le callback retourne true :

js
const inStockProducts  = products.filter(p => p.inStock);
const electronicsOnly  = products.filter(p => p.category === 'electronics');
const affordableInStock = products.filter(p => p.inStock && p.price < 100);

// Chain map + filter to get display-ready affordable in-stock electronics
const featuredItems = products
  .filter(p => p.inStock && p.rating >= 4.5)
  .map(p => ({ id: p.id, name: p.name, price: `$${p.price}` }));

reduce() — Le couteau suisse

Array.prototype.reduce() est celle que les développeurs évitent parce que la signature semble intimidante. Mais une fois que ça clique, vous l'utiliserez tout le temps. Il "réduit" un tableau à une seule valeur — et cette valeur peut être n'importe quoi : un nombre, un objet, un autre tableau. Voici un cas d'utilisation réaliste : construire une map de recherche à partir d'un tableau :

js
// Group products by category (the pattern that makes reduce click)
const byCategory = products.reduce((acc, product) => {
  const cat = product.category;
  if (!acc[cat]) acc[cat] = [];
  acc[cat].push(product);
  return acc;
}, {}); // starting value is an empty object

// byCategory.electronics → [Wireless Keyboard, Mechanical Keyboard, USB-C Hub, Monitor Arm]
// byCategory.furniture   → [Standing Desk, Desk Lamp]

// Build an id → product lookup (O(1) access instead of .find() on every render)
const productById = products.reduce((acc, p) => {
  acc[p.id] = p;
  return acc;
}, {});

const keyboard = productById[2]; // instant lookup

// Calculate total cart value
const cart      = [{ productId: 1, qty: 2 }, { productId: 4, qty: 1 }];
const cartTotal = cart.reduce((total, item) => {
  const product = productById[item.productId];
  return total + (product.price * item.qty);
}, 0);
// 79.99 * 2 + 499.99 * 1 = 659.97
Conseil pratique : Si vous utilisez reduce() juste pour additionner des nombres, envisagez une alternative plus claire : products.reduce((sum, p) => sum + p.price, 0) est bien pour les cas simples. Mais pour le groupement et l'indexation, reduce() est imbattable.

find() et findIndex() — S'arrêter à la première correspondance

Une erreur très courante est d'utiliser filter() quand vous n'avez besoin que d'un seul élément. filter() parcourt toujours le tableau entier. find() s'arrête dès qu'il trouve une correspondance — O(1) dans le meilleur cas vs O(n) pour filter :

js
// ❌ Returns an array, scans everything even after finding a match
const found = products.filter(p => p.id === 3)[0];

// ✅ Returns the item directly, stops at first match
const product = products.find(p => p.id === 3);
// { id: 3, name: 'USB-C Hub', ... }

// findIndex() — gives you the position (useful for updates and deletions)
const idx = products.findIndex(p => p.id === 3);
// Update immutably:
const updated = [
  ...products.slice(0, idx),
  { ...products[idx], inStock: true },
  ...products.slice(idx + 1)
];

some() et every() — Vérifications booléennes

Quand vous avez besoin d'une réponse oui/non sur le contenu d'un tableau, some() et every() sont plus propres que de filtrer et vérifier la longueur :

js
const hasOutOfStock   = products.some(p => !p.inStock);    // true
const allHighRated    = products.every(p => p.rating >= 4.0); // true
const allInStock      = products.every(p => p.inStock);       // false

// Common pattern: form validation
const formFields = [
  { name: 'email',    value: '[email protected]', valid: true  },
  { name: 'password', value: '',                 valid: false },
  { name: 'username', value: 'dev123',           valid: true  }
];

const isFormValid  = formFields.every(field => field.valid);   // false
const hasAnyError  = formFields.some(field => !field.valid);   // true

flat() et flatMap() — Gestion des tableaux imbriqués

Quand votre API renvoie des tableaux imbriqués, flat() et flatMap() les aplatissent en un seul niveau. flatMap() est particulièrement utile quand une opération map peut produire zéro, un ou plusieurs éléments par entrée :

js
// flat() — collapse one level of nesting
const orderLines = [
  ['Wireless Keyboard', 'USB-C Hub'],
  ['Standing Desk'],
  ['Mechanical Keyboard', 'Monitor Arm', 'Desk Lamp']
];
const allItems = orderLines.flat();
// ['Wireless Keyboard', 'USB-C Hub', 'Standing Desk', 'Mechanical Keyboard', ...]

// flatMap() — map + flat in one pass (more efficient than chaining)
const ordersWithTags = [
  { id: 101, items: ['keyboard', 'hub'],   tags: ['electronics'] },
  { id: 102, items: ['desk', 'lamp'],      tags: ['furniture', 'sale'] },
];

// Get all unique tags across all orders
const allTags = ordersWithTags.flatMap(order => order.tags);
// ['electronics', 'furniture', 'sale']

// Filter-and-extract in one pass with flatMap
const expensiveNames = products.flatMap(p =>
  p.price > 100 ? [p.name] : [] // return empty array to skip, or [value] to include
);
// ['Mechanical Keyboard', 'Standing Desk']

Array.from() — Conversion de choses similaires à des tableaux

Array.from() convertit tout élément itérable en un vrai tableau. Cela apparaît constamment avec les NodeLists DOM, les Sets, les Maps et les résultats de générateurs :

js
// Convert a NodeList to an array so you can use .map() and .filter()
const checkboxes = Array.from(document.querySelectorAll('input[type="checkbox"]'));
const checkedValues = checkboxes
  .filter(el => el.checked)
  .map(el => el.value);

// Deduplicate an array using Set → Array.from
const tags    = ['electronics', 'sale', 'electronics', 'new', 'sale'];
const unique  = Array.from(new Set(tags));
// ['electronics', 'sale', 'new']

// Create a range (like Python's range())
const range = Array.from({ length: 5 }, (_, i) => i + 1);
// [1, 2, 3, 4, 5]

// Extract Map entries for further processing
const priceMap = new Map(products.map(p => [p.id, p.price]));
const prices   = Array.from(priceMap.values()); // [79.99, 149.99, ...]

Trier correctement

Le sort() par défaut convertit tout en chaînes de caractères, ce qui signifie que les nombres se trient incorrectement et que le tri des chaînes casse pour les caractères non-ASCII. Passez toujours un comparateur :

js
// ❌ Default sort — wrong for numbers
[10, 9, 100, 2].sort(); // [10, 100, 2, 9] ← string order

// ✅ Numeric sort
[10, 9, 100, 2].sort((a, b) => a - b); // [2, 9, 10, 100] ascending
[10, 9, 100, 2].sort((a, b) => b - a); // [100, 10, 9, 2] descending

// Sort products by price ascending
const byPrice = [...products].sort((a, b) => a.price - b.price);

// Sort by name — use localeCompare for proper string ordering
const byName = [...products].sort((a, b) =>
  a.name.localeCompare(b.name, 'en', { sensitivity: 'base' })
);

// Multi-key sort: category first, then rating descending
const sorted = [...products].sort((a, b) => {
  if (a.category !== b.category) return a.category.localeCompare(b.category);
  return b.rating - a.rating;
});
Attention : sort() mute le tableau original. Utilisez toujours l'opérateur spread en premier ([...products].sort(...)) si vous avez besoin de conserver l'ordre original.

Object.groupBy() — Groupement ES2024

Avant ES2024, vous utilisiez reduce() pour grouper des tableaux (comme montré plus tôt). Maintenant il y a un natif : Object.groupBy(). C'est plus propre pour les cas de groupement simples :

js
// Group products by category — ES2024
const grouped = Object.groupBy(products, p => p.category);
// {
//   electronics: [Wireless Keyboard, Mechanical Keyboard, USB-C Hub, Monitor Arm],
//   furniture:   [Standing Desk, Desk Lamp]
// }

// Group by stock status
const byStock = Object.groupBy(products, p => p.inStock ? 'available' : 'unavailable');

// Group orders by month
const orders = [
  { id: 1, date: new Date('2026-01-15'), total: 129.99 },
  { id: 2, date: new Date('2026-01-22'), total: 49.99  },
  { id: 3, date: new Date('2026-02-05'), total: 89.99  },
];
const byMonth = Object.groupBy(orders, o =>
  o.date.toLocaleString('en', { month: 'long', year: 'numeric' })
);

Object.groupBy() est disponible dans Node.js 21+ et tous les navigateurs modernes depuis mi-2024. Vérifiez la référence MDN de groupBy pour la compatibilité actuelle. Pour les environnements plus anciens, le schéma reduce() fonctionne encore.

Outils utiles

Quand vous travaillez avec des tableaux de données JSON provenant d'APIs, ces outils font gagner du temps : Formateur JSON pour inspecter des charges profondément imbriquées, JSON Path pour interroger des champs spécifiques dans de grands tableaux, et Formateur JS pour nettoyer le code de chaînes de méthodes. La référence MDN Array complète vaut la peine d'être mise en favoris — il y a plus de méthodes que la plupart des développeurs ne le savent.

Conclusion

Les méthodes de tableau JavaScript couvrent la plupart de ce pour quoi vous vous seriez tourné vers une bibliothèque utilitaire. map() et filter() pour transformer et sous-ensembler, reduce() pour grouper et indexer, find() plutôt que filter()[0] pour les recherches, flatMap() pour le filtre-et-transformation en une passe, et Object.groupBy() pour un groupement propre dans les environnements modernes. La clé est d'utiliser le bon outil pour le travail — et de savoir que la plupart des boucles peuvent être remplacées par une méthode bien choisie.

← All JavaScript articles Browse all categories →