JavaScript Academy · Les

Declaratieve datatransformatie

Transformeer gegevens met map, filter en reduce.

Les 2 van 413 stappen

Declaratieve datatransformatie is een gratis JavaScript Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

Declaratief versus imperatief

Imperatieve code zegt HOE (lussen, tellers, wijzigingen). Declaratieve code zegt WAT. Arraymethoden zoals map, filter en reduce laten je transformaties beschrijven zonder handmatige lussen.

const nums = [1, 2, 3, 4];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8]

map: elk element transformeren

map retourneert een nieuwe array met dezelfde lengte, waarbij elk element door je functie wordt getransformeerd. Het origineel blijft ongewijzigd.

const names = ["ada", "bob"];
const upper = names.map((n) => n.toUpperCase());
console.log(upper); // ["ADA", "BOB"]
console.log(names); // unchanged

filter: bepaalde elementen behouden

filter retourneert een nieuwe array met alleen de elementen waarvoor je predicaat een waarheidswaarde retourneert.

const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4, 6]

reduce: terugbrengen tot één waarde

reduce brengt een array terug tot één waarde door waarden op te bouwen. Geef een reducerfunctie en een beginwaarde door.

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

Bewerkingen aan elkaar koppelen

Omdat elke methode een nieuwe array retourneert, kun je ze koppelen tot een leesbare verwerkingsketen die je van boven naar beneden leest.

const nums = [1, 2, 3, 4, 5, 6];
const result = nums
  .filter((n) => n % 2 === 0)
  .map((n) => n * 10);
console.log(result); // [20, 40, 60]

Een realistische verwerkingsketen

Combineer filter, map en reduce om in één expressie een vraag over een gegevensverzameling te beantwoorden.

const orders = [
  { item: "pen", price: 3, paid: true },
  { item: "ink", price: 8, paid: false },
  { item: "pad", price: 5, paid: true }
];
const paidTotal = orders
  .filter((o) => o.paid)
  .map((o) => o.price)
  .reduce((a, p) => a + p, 0);
console.log(paidTotal); // 8

Naar nieuwe structuren mappen

map kan objecten een nieuwe structuur geven, niet alleen getallen. Zet elk record om naar de velden die je nodig hebt.

const users = [{ id: 1, name: "Ada", age: 36 }];
const summary = users.map((u) => ({ id: u.id, label: u.name }));
console.log(summary); // [{ id: 1, label: "Ada" }]

reduce kan alles opbouwen

reduce is niet alleen bedoeld voor sommen. Je kunt er objecten mee opbouwen, gegevens groeperen en zelfs map en filter opnieuw implementeren.

const words = ["a", "bb", "a", "ccc"];
const counts = words.reduce((acc, w) => {
  acc[w] = (acc[w] || 0) + 1;
  return acc;
}, {});
console.log(counts); // { a: 2, bb: 1, ccc: 1 }

De volgorde is belangrijk

Door eerst te filteren voorkom je dat je elementen transformeert die je later toch weggooit. Plaats goedkope filters vroeg in de keten voor duidelijkheid en efficiëntie.

const data = [1, 2, 3, 4, 5];
const out = data
  .filter((n) => n > 2)   // shrink first
  .map((n) => n * n);     // then transform
console.log(out); // [9, 16, 25]

Nergens wijzigingen aanbrengen

Deze methoden wijzigen de bronarray nooit. Daardoor zijn verwerkingsketens veilig en voorspelbaar en passen ze perfect bij de functionele stijl.

const src = [3, 1, 2];
const sorted = [...src].sort((a, b) => a - b);
console.log(sorted); // [1, 2, 3]
console.log(src);    // [3, 1, 2] untouched

flatMap voor geneste resultaten

Wanneer een map arrays oplevert, voert flatMap in één stap een map uit en maakt het één niveau vlakker.

const pairs = [1, 2, 3].flatMap((n) => [n, n * 10]);
console.log(pairs); // [1, 10, 2, 20, 3, 30]

Korte controle

Declaratieve transformaties.

Beantwoord dit in de interactieve les

Samenvatting

Een declaratieve transformatie beschrijft WAT, niet HOE. map transformeert, filter selecteert en reduce brengt terug tot één waarde; koppel ze tot leesbare verwerkingsketens. Geen van deze methoden wijzigt de bron, vroeg filteren is efficiënt en reduce kan elke structuur opbouwen. Gebruik flatMap wanneer een map arrays oplevert.

Gratis beginnen

Leer JavaScript 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: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Declaratieve datatransformatie” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Declaratieve datatransformatie”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Declaratieve datatransformatie”?

Transformeer gegevens met map, filter en reduce. Je oefent met JavaScript 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 JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript 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 2 van 4.

Hoe lang duurt de les “Declaratieve datatransformatie”?

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 JavaScript Academy?

Ja. Elke les over JavaScript 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 JavaScript Academy