JavaScript-arrays hebben een van de rijkste methode-API's in elke gangbare taal. Maar de meeste tutorials leren map en filter met gekunstelde voorbeelden — getallen in een array verdubbelen, even getallen filteren — en laten je de rest zelf uitzoeken. Laten we de methoden doorlopen die echt voorkomen in productiecode, met realistische data: producten, bestellingen en gebruikersrecords.

De dataset waarmee we werken

Om de voorbeelden concreet te houden, gebruiken we gedurende dit artikel een realistisch productcatalogus:

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() — Elk item transformeren

Array.prototype.map() maakt een nieuwe array door een functie op elk element toe te passen. Het is het werkpaard van datatransformatie — API-reacties omvormen naar het formaat dat je UI nodig heeft:

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() muteert de originele array nooit — het geeft altijd een nieuwe terug. Daarom is het veilig om te ketenen, en waarom je het boven een for-lus moet verkiezen wanneer transformatie het doel is.

filter() — Een deelverzameling ophalen

filter() geeft een nieuwe array terug die alleen de elementen bevat waarvoor de callback true teruggeeft:

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() — Het Zwitserse zakmes

Array.prototype.reduce() is degene die ontwikkelaars vermijden omdat de signatuur intimiderend lijkt. Maar als het eenmaal klikt, grijp je er continu naar. Het "reduceert" een array tot een enkele waarde — en die waarde kan van alles zijn: een getal, een object, een andere array. Hier is een realistische toepassing: een opzoektabel bouwen uit een array:

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
Pro-tip: Als je reduce() alleen gebruikt om getallen op te tellen, overweeg dan een schoner alternatief: products.reduce((sum, p) => sum + p.price, 0) is prima voor eenvoudige gevallen. Maar voor groeperen en indexeren is reduce() onverslaanbaar.

find() en findIndex() — Stoppen bij de eerste overeenkomst

Een veelgemaakte fout is het gebruik van filter() wanneer je maar één item nodig hebt. filter() scant altijd de hele array. find() stopt zodra het een overeenkomst vindt — O(1) in het beste geval vs O(n) voor 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() en every() — Booleaanse controles

Wanneer je een ja/nee-antwoord nodig hebt over de inhoud van een array, zijn some() en every() schoner dan filteren en de lengte controleren:

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() en flatMap() — Geneste arrays verwerken

Wanneer je API geneste arrays teruggeeft, vouwen flat() en flatMap() ze samen tot één niveau. flatMap() is bijzonder nuttig wanneer een map-bewerking nul, één of meerdere items per invoer kan produceren:

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() — Array-achtige zaken omzetten

Array.from() converteert alles wat itereerbaar is naar een echte array. Dit komt voortdurend voor bij DOM NodeLists, Sets, Maps en generatorresultaten:

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, ...]

Correct sorteren

De standaard sort() converteert alles naar strings, wat betekent dat getallen verkeerd worden gesorteerd en string-sortering breekt voor niet-ASCII-tekens. Geef altijd een comparator mee:

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;
});
Let op: sort() muteert de originele array. Spreid altijd eerst ([...products].sort(...)) als je de oorspronkelijke volgorde intact wilt houden.

Object.groupBy() — ES2024-groepering

Voor ES2024 gebruikte je reduce() om arrays te groeperen (zoals eerder getoond). Nu is er een ingebouwde methode: Object.groupBy(). Het is schoner voor eenvoudige groeperingsgevallen:

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() is beschikbaar in Node.js 21+ en alle moderne browsers vanaf medio 2024. Controleer de MDN groupBy-referentie voor actuele compatibiliteit. Voor oudere omgevingen werkt het reduce()-patroon nog steeds.

Handige hulpmiddelen

Bij het werken met arrays van JSON-gegevens uit API's besparen deze tools echte tijd: JSON Formatter om diep geneste payloads te inspecteren, JSON Path om specifieke velden uit grote arrays op te vragen, en JS Formatter om methodeketens-code op te schonen. De volledige MDN Array-referentie is het bewaren waard — er zijn meer methoden dan de meeste ontwikkelaars weten.

Samenvatting

De array-methoden van JavaScript dekken het meeste waaraan je een utility-bibliotheek zou willen gebruiken. map() en filter() voor transformeren en deelverzamelingen maken, reduce() voor groeperen en indexeren, find() boven filter()[0] voor opzoekingen, flatMap() voor filter-en-transformeer in één stap, en Object.groupBy() voor schone groepering in moderne omgevingen. De sleutel is het juiste gereedschap voor de klus gebruiken — en weten dat de meeste lussen kunnen worden vervangen door een goed gekozen methode.

← All JavaScript articles Browse all categories →