JavaScript-arrays har et af de rigeste metode-API'er i et hvilket som helst populært sprog. Men de fleste guider underviser i map og filter med konstruerede eksempler — fordobling af tal i et array, filtrering af lige tal — og lader dig derefter finde ud af resten. Lad os gennemgå de metoder, der faktisk dukker op i produktionskode, med realistiske data: produkter, ordrer og brugerregistre.

Det datasæt, vi arbejder med

For at holde eksemplerne forankrede bruger vi et realistisk produktkatalog gennem hele artiklen:

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 hvert element

Array.prototype.map() opretter et nyt array ved at anvende en funktion på hvert element. Det er arbejdshesten inden for datatransformation — omformer API-svar til det format, din UI har brug for:

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() muterer aldrig det originale array — det returnerer altid et nyt. Det er derfor, det er sikkert at kæde det, og hvorfor du bør foretrække det frem for en for-løkke, når transformation er målet.

filter() — hent et delsæt

filter() returnerer et nyt array, der kun indeholder de elementer, hvor callbacken returnerer 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() — den schweiziske lommekniv

Array.prototype.reduce() er den, udviklere undgår, fordi signaturen ser skræmmende ud. Men når den klikker på plads, vil du nå efter den hele tiden. Den "reducerer" et array til en enkelt værdi — og den værdi kan være hvad som helst: et tal, et objekt, et andet array. Her er et realistisk use case: opbygning af et opslagskort fra et 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
Tip: Hvis du bruger reduce() bare til at summere tal, overvej et renere alternativ: products.reduce((sum, p) => sum + p.price, 0) er fint til simple tilfælde. Men til gruppering og indeksering er reduce() uovertruffen.

find() og findIndex() — stop ved første match

En meget almindelig fejl er at bruge filter(), når du kun har brug for ét element. filter() scanner altid hele arrayet. find() stopper, så snart den finder et match — O(1) i bedste tilfælde vs. O(n) for 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() og every() — booleanske kontroller

Når du har brug for et ja/nej-svar om et arrays indhold, er some() og every() renere end at filtrere og tjekke længden:

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() og flatMap() — håndtering af indlejrede arrays

Når dit API returnerer indlejrede arrays, sammenpresser flat() og flatMap() dem til ét niveau. flatMap() er særlig nyttig, når en map-operation kan producere nul, ét eller flere elementer per input:

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() — konvertering af arraylignende ting

Array.from() konverterer alt iterabelt til et rigtigt array. Det dukker konstant op med DOM-NodeLists, Sets, Maps og generatorresultater:

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

Sortering korrekt

Standard sort() konverterer alt til strenge, hvilket betyder, at tal sorteres forkert, og strengsortering bryder for ikke-ASCII-tegn. Send altid en komparator:

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;
});
Pas på: sort() muterer det originale array. Spred altid først ([...products].sort(...)), hvis du har brug for at holde den originale rækkefølge intakt.

Object.groupBy() — ES2024-gruppering

Før ES2024 brugte man reduce() til at gruppere arrays (som vist tidligere). Nu er der en indbygget funktion: Object.groupBy(). Den er renere til simple grupperingstilfælde:

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() er tilgængelig i Node.js 21+ og alle moderne browsere fra midten af 2024. Se MDN's groupBy-reference for aktuel kompatibilitet. I ældre miljøer fungerer reduce()-mønstret stadig.

Nyttige værktøjer

Når du arbejder med arrays af JSON-data fra API'er, sparer disse værktøjer rigtig meget tid: JSON Formatter til at inspicere dybt indlejrede data, JSON Path til at forespørge specifikke felter fra store arrays og JS Formatter til at rydde op i metodekæde-kode. Den fulde MDN Array-reference er værd at bogmærke — der er flere metoder, end de fleste udviklere kender til.

Afslutning

JavaScripts array-metoder dækker det meste af, hvad du ellers ville nå efter et hjælpebibliotek for at gøre. map() og filter() til transformation og delsæt, reduce() til gruppering og indeksering, find() frem for filter()[0] til opslag, flatMap() til ét-pas-filter-og-transform og Object.groupBy() til ren gruppering i moderne miljøer. Nøglen er at bruge det rigtige værktøj til jobbet — og vide, at de fleste løkker kan erstattes med en velvalgt metode.

← All JavaScript articles Browse all categories →