JavaScript-arrays har et av de rikeste metode-API-ene i et hvilket som helst populært språk. Men de fleste veiledninger lærer map og filter med konstruerte eksempler — fordobling av tall i en array, filtrering av partall — og overlater deg deretter til å finne ut resten. La oss gå gjennom metodene som faktisk dukker opp i produksjonskode, ved hjelp av realistiske data: produkter, bestillinger og brukerregistre.

Datasettet vi jobber med

For å holde eksemplene forankret bruker vi en realistisk produktkatalog gjennom hele artikkelen:

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() oppretter en ny array ved å anvende en funksjon på hvert element. Det er arbeidshesten for datatransformasjon — omformer API-svar til formatet brukergrensesnittet trenger:

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 aldri den opprinnelige arrayen — den returnerer alltid en ny. Det er derfor det er trygt å kjede den, og hvorfor du bør foretrekke den fremfor en for-løkke når transformasjon er målet.

filter() — hent et delsett

filter() returnerer en ny array som bare inneholder elementene der 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() — sveitsisk lommekniv

Array.prototype.reduce() er den utviklere unngår fordi signaturen ser skremmende ut. Men når den klikker på plass, vil du nå etter den hele tiden. Den "reduserer" en array til en enkelt verdi — og den verdien kan være hva som helst: et tall, et objekt, en annen array. Her er et realistisk brukstilfelle: bygge et oppslagskart fra en 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
Tips: Hvis du bruker reduce() bare for å summere tall, vurder et renere alternativ: products.reduce((sum, p) => sum + p.price, 0) er fint for enkle tilfeller. Men for gruppering og indeksering er reduce() uovertruffen.

find() og findIndex() — stopp ved første treff

En veldig vanlig feil er å bruke filter() når du bare trenger ett element. filter() skanner alltid hele arrayen. find() stopper så snart den finner et treff — O(1) i beste fall mot 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() — boolske sjekker

Når du trenger et ja/nei-svar om innholdet i en array, er some() og every() renere enn å filtrere og sjekke lengden:

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 av nestede arrays

Når API-et ditt returnerer nestede arrays, komprimerer flat() og flatMap() dem til ett nivå. flatMap() er spesielt nyttig når en map-operasjon kan produsere null, ett eller flere elementer per inndata:

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 av arraylignende ting

Array.from() konverterer alt itererbart til en ekte array. Det dukker stadig opp 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 strenger, noe som betyr at tall sorteres feil og strengsortering feiler for ikke-ASCII-tegn. Send alltid 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;
});
Pass på: sort() muterer den opprinnelige arrayen. Spread alltid først ([...products].sort(...)) hvis du trenger å beholde den opprinnelige rekkefølgen intakt.

Object.groupBy() — ES2024-gruppering

Før ES2024 brukte man reduce() til å gruppere arrays (som vist tidligere). Nå finnes det en innebygd funksjon: Object.groupBy(). Den er renere for enkle grupperingstilfeller:

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 tilgjengelig i Node.js 21+ og alle moderne nettlesere fra midten av 2024. Se MDNs groupBy-referanse for aktuell kompatibilitet. I eldre miljøer fungerer fortsatt reduce()-mønsteret.

Nyttige verktøy

Når du jobber med arrays av JSON-data fra API-er, sparer disse verktøyene ekte tid: JSON Formatter for å inspisere dypt nestede data, JSON Path for å spørre etter spesifikke felt fra store arrays, og JS Formatter for å rydde opp i metodekjedekode. Den fullstendige MDN Array-referansen er verdt å bokmerke — det er flere metoder enn de fleste utviklere vet om.

Oppsummering

JavaScripts array-metoder dekker det meste av det du ellers ville nå etter et hjelpbibliotek for. map() og filter() for transformasjon og delsett, reduce() for gruppering og indeksering, find() fremfor filter()[0] for oppslag, flatMap() for ett-pass-filter-og-transformer, og Object.groupBy() for ren gruppering i moderne miljøer. Nøkkelen er å bruke riktig verktøy for jobben — og vite at de fleste løkker kan erstattes med en velvalgt metode.

← All JavaScript articles Browse all categories →