map en filter — de basis
Transformeer en selecteer gegevens met map en filter; koppel ze aan elkaar en voorkom mutaties voor veiligere code
map en filter — de basis is een gratis JavaScript Academy-les op CoddyKit. Dit is les 1 van 2. 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 2 lessen.
Inleiding tot map en filter
Doel: Transformeer items met map en selecteer items met filter.
- map: transformeren
- filter: selecteren
- map → filter koppelen
- Niet muteren
Basisprincipes van map
map past een functie toe op elk element en retourneert een nieuwe array (met dezelfde lengte).
// map transforms each value and returns a new array
const nums = [1, 2, 3];
const doubled = nums.map(function (n) {
return n * 2;
});
console.log("nums:", nums);
console.log("doubled:", doubled);
Basisprincipes van filter
filter retourneert alleen de items waarvoor je callback true retourneert (de lengte kan veranderen).
// filter keeps values that pass the test
const values = [1, 2, 3, 4, 5];
const evens = values.filter(function (n) {
return n % 2 === 0;
});
console.log("values:", values);
console.log("evens:", evens);
Voorbeeld van koppelen
Combineer stappen: gebruik map om te transformeren en daarna filter om te selecteren.
// Chain methods for clarity
const prices = [4, 7, 10];
// First add tax, then keep items over 8
const withTax = prices.map(function (p) {
return p * 1.1;
});
const expensive = withTax.filter(function (p) {
return p > 8;
});
console.log("withTax:", withTax);
console.log("expensive:", expensive);
Demonstratie zonder mutatie
Onveranderlijkheid: map/filter retourneren nieuwe arrays; het origineel blijft ongewijzigd.
// map and filter do not mutate the original array
const base = [2, 4, 6];
const plusOne = base.map(function (n) {
return n + 1;
});
const small = base.filter(function (n) {
return n < 5;
});
console.log("base:", base);
console.log("plusOne:", plusOne);
console.log("small:", small);
Tips voor overzichtelijke arrays
Tips:
- Geef kleine callbacks duidelijke namen (n, item).
- Houd ketens kort (maximaal 2–3 stappen).
- Geef de voorkeur aan zuivere callbacks (zonder bijwerkingen).
Quiz: map versus filter
Korte controle: Elk element transformeren.
Herhaling
Herhaling: Gebruik map om waarden om te zetten, filter om er enkele te selecteren en combineer ze zonder de oorspronkelijke array te wijzigen.
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
Veelgestelde vragen
Is de les “map en filter — de basis” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “map en filter — de basis”, 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 2 lessen.
Wat leer ik in “map en filter — de basis”?
Transformeer en selecteer gegevens met map en filter; koppel ze aan elkaar en voorkom mutaties voor veiligere code 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 1 van 2.
Hoe lang duurt de les “map en filter — de basis”?
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
- map en filter — de basis
- reduce, some/every en find — eenvoudige patronen