Frontend Academy · Les

Array-methoden: map filter reduce find

Transformeer, filter en aggregeer arrays met higher-order-methoden in plaats van handmatige lussen. Koppel ze voor expressieve datapijplijnen.

Les 1 van 413 stappen

Array-methoden: map filter reduce find is een gratis Frontend Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.

Waarom arraymethoden?

Imperatieve for-lussen werken, maar verbergen de bedoeling. Hogere-ordemethoden voor arrays beschrijven wat je wilt in plaats van hoe je moet itereren. Ze leveren schonere, testbare en combineerbare code op die leest als gewone tekst.

Array.map() — elk element transformeren

map() retourneert een nieuwe array waarin elk element door de callback is getransformeerd. De oorspronkelijke array wordt niet gewijzigd. Gebruik deze methode wanneer je de ene array naar een andere wilt omzetten.

const names = ['alice', 'bob', 'carol'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CAROL']

const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]

Array.filter() — overeenkomende elementen selecteren

filter() retourneert een nieuwe array met alleen de elementen waarvoor de callback een waarde retourneert die als waar wordt geëvalueerd. De callback is een predicaatfunctie.

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob',   age: 17 },
  { name: 'Carol', age: 30 },
];
const adults = users.filter(u => u.age >= 18);
// [{ name: 'Alice', age: 22 }, { name: 'Carol', age: 30 }]

Array.reduce() — een waarde accumuleren

reduce(callback, initialValue) voegt alle elementen samen tot één waarde. De callback ontvangt de accumulator en het huidige element. De beginwaarde is de startwaarde van de accumulator.

const prices = [10, 20, 30, 40];
const total = prices.reduce((sum, price) => sum + price, 0);
// 100

const tallied = ['a', 'b', 'a', 'c', 'b', 'a'].reduce((acc, letter) => {
  acc[letter] = (acc[letter] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

Array.find() — eerste overeenkomst

find() retourneert het eerste element dat aan het predicaat voldoet, of undefined als er geen overeenkomst is. Gebruik deze methode om een item op te zoeken aan de hand van een ID of eigenschapswaarde.

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const bob = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }

const missing = users.find(u => u.id === 99);
// undefined

Array.findIndex()

findIndex() lijkt op find(), maar retourneert de index van het overeenkomende element, of -1 als het niet is gevonden. Handig om te bepalen waar je een element in een array moet bijwerken.

const idx = users.findIndex(u => u.id === 2);
// 1

Array.some() en Array.every()

some() retourneert true als ten minste één element de test doorstaat. every() retourneert true alleen als alle elementen slagen. Beide stoppen zodra het eerste doorslaggevende resultaat is gevonden.

const hasAdult = users.some(u => u.age >= 18);  // true if any adult
const allAdults = users.every(u => u.age >= 18); // true only if all adults

Array.flatMap() — mappen en vervolgens afvlakken

flatMap() mapt elk element en vlakt het resultaat vervolgens één niveau af. Dit is gelijk aan .map(...).flat(), maar efficiënter.

const sentences = ['Hello world', 'Foo bar'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Foo', 'bar']

Arraymethoden aan elkaar koppelen

Methoden retourneren nieuwe arrays, dus je kunt ze aan elkaar koppelen. Lees zulke ketens van links naar rechts: eerst filteren, daarna transformeren en ten slotte aggregeren.

const result = products
  .filter(p => p.inStock)
  .map(p => ({ ...p, price: p.price * 0.9 })) // 10% discount
  .sort((a, b) => a.price - b.price)
  .slice(0, 5); // top 5 cheapest in-stock products

Array.at() en Array.includes()

at(-1) haalt het laatste element op. includes(value) controleert of een waarde bestaat. Dat is veel duidelijker dan arr[arr.length - 1] en arr.indexOf(v) !== -1.

const arr = [1, 2, 3, 4, 5];
arr.at(-1);        // 5
arr.at(-2);        // 4
arr.includes(3);   // true
arr.includes(99);  // false

Onveranderlijkheid: wijzig niets rechtstreeks

map, filter en reduce retourneren nieuwe arrays. push, pop en splice wijzigen de oorspronkelijke array. Maak in de status van React altijd nieuwe arrays (met spread of map) in plaats van de status rechtstreeks te wijzigen.

// Bad in React:
state.items.push(newItem); // mutates original

// Good:
const newItems = [...state.items, newItem]; // new array

Korte controle

Welke arraymethode retourneert een nieuwe array met de elementen waarvoor de callback true retourneert?

Beantwoord dit in de interactieve les

Samenvatting: arraymethoden

map() transformeert elk element. filter() selecteert overeenkomende elementen. reduce() voegt elementen samen tot één waarde. find() retourneert de eerste overeenkomst. some()/every() testen of elementen aanwezig zijn. Ketens van deze methoden vervangen geneste lussen door leesbare, declaratieve gegevenspijplijnen.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 41
Lessen: 163

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Array-methoden: map filter reduce find” gratis?

Ja — de volledige tekst van “Array-methoden: map filter reduce find” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.

Wat leer ik in “Array-methoden: map filter reduce find”?

Transformeer, filter en aggregeer arrays met higher-order-methoden in plaats van handmatige lussen. Koppel ze voor expressieve datapijplijnen. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Frontend Academy te beginnen?

Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Array-methoden: map filter reduce find”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?

Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Frontend Academy