Array Methods Extra

Geavanceerde array methods

Je kent al filter(), map() en sort(). Hier leer je de methods die je nodig hebt voor complexere bewerkingen op arrays.

reduce()

reduce() verwerkt alle elementen in een array en bouwt één eindresultaat op. De meest veelzijdige, maar ook ingewikkeldste array method.

const getallen = [1, 2, 3, 4, 5];

const som = getallen.reduce((totaal, getal) => {
  return totaal + getal;
}, 0);

console.log(som); // 15

Visualisatie per stap

// [1, 2, 3, 4, 5].reduce(..., 0)
// Ronde 1: totaal=0,  getal=1 → 0+1=1
// Ronde 2: totaal=1,  getal=2 → 1+2=3
// Ronde 3: totaal=3,  getal=3 → 3+3=6
// Ronde 4: totaal=6,  getal=4 → 6+4=10
// Ronde 5: totaal=10, getal=5 → 10+5=15
// Resultaat: 15

Totaalprijs berekenen

const winkelwagen = [
  { naam: 'Laptop', prijs: 899 },
  { naam: 'Muis', prijs: 29 },
  { naam: 'Toetsenbord', prijs: 79 }
];

const totaal = winkelwagen.reduce((som, product) => {
  return som + product.prijs;
}, 0);

console.log(`Totaal: €${totaal}`); // "Totaal: €1007"

Tellen per categorie

const producten = [
  { naam: 'Laptop', categorie: 'elektronica' },
  { naam: 'Boek', categorie: 'onderwijs' },
  { naam: 'Muis', categorie: 'elektronica' },
  { naam: 'Pen', categorie: 'onderwijs' },
  { naam: 'Monitor', categorie: 'elektronica' }
];

const perCategorie = producten.reduce((teller, product) => {
  const cat = product.categorie;
  teller[cat] = (teller[cat] || 0) + 1;
  return teller;
}, {});

console.log(perCategorie);
// { elektronica: 3, onderwijs: 2 }

some()

some() geeft true terug als minstens één element voldoet aan de voorwaarde.

const getallen = [1, 3, 5, 7, 8];

const heeftEven = getallen.some(n => n % 2 === 0);
console.log(heeftEven); // true (8 is even)

Praktische voorbeelden

const gebruikers = [
  { naam: 'Anna', rol: 'gebruiker' },
  { naam: 'Bob', rol: 'admin' },
  { naam: 'Carol', rol: 'gebruiker' }
];

const heeftAdmin = gebruikers.some(u => u.rol === 'admin');
console.log(heeftAdmin); // true

const producten = [
  { naam: 'Laptop', voorraad: 5 },
  { naam: 'Muis', voorraad: 0 },
  { naam: 'Toetsenbord', voorraad: 12 }
];

const heeftUitverkocht = producten.some(p => p.voorraad === 0);
console.log(heeftUitverkocht); // true

every()

every() geeft true terug als alle elementen voldoen aan de voorwaarde.

const getallen = [2, 4, 6, 8];

const alleEven = getallen.every(n => n % 2 === 0);
console.log(alleEven); // true

const getallen2 = [2, 4, 5, 8];
const alleEven2 = getallen2.every(n => n % 2 === 0);
console.log(alleEven2); // false (5 is oneven)

Formuliervalidatie

const velden = [
  document.querySelector('#naam').value,
  document.querySelector('#email').value,
  document.querySelector('#telefoon').value
];

const alleIngevuld = velden.every(waarde => waarde.trim() !== '');

if (!alleIngevuld) {
  alert('Vul alle verplichte velden in');
}

some vs every

flat()

flat() maakt een geneste array plat — het haalt sub-arrays één niveau omhoog.

const genest = [1, [2, 3], [4, 5]];
console.log(genest.flat()); // [1, 2, 3, 4, 5]

// Dieper genest:
const diepGenest = [1, [2, [3, [4]]]];
console.log(diepGenest.flat());    // [1, 2, [3, [4]]] — één niveau
console.log(diepGenest.flat(2));   // [1, 2, 3, [4]] — twee niveaus
console.log(diepGenest.flat(Infinity)); // [1, 2, 3, 4] — alles plat

Praktisch voorbeeld

const bestellingen = [
  ['Laptop', 'Muis'],
  ['Boek', 'Pen', 'Schrift'],
  ['Monitor']
];

const alleProducten = bestellingen.flat();
console.log(alleProducten);
// ['Laptop', 'Muis', 'Boek', 'Pen', 'Schrift', 'Monitor']

flatMap()

flatMap() combineert map() en flat() in één stap. Je transformeert elk element en maakt het resultaat meteen plat.

const zinnen = ['Hallo wereld', 'Goedemorgen JavaScript'];

// Met map + flat:
const woorden1 = zinnen.map(zin => zin.split(' ')).flat();

// Met flatMap (korter):
const woorden2 = zinnen.flatMap(zin => zin.split(' '));

console.log(woorden2);
// ['Hallo', 'wereld', 'Goedemorgen', 'JavaScript']

Tags uitpakken

const artikelen = [
  { titel: 'React basics', tags: ['react', 'javascript'] },
  { titel: 'CSS grid', tags: ['css', 'layout'] },
  { titel: 'Node.js intro', tags: ['node', 'javascript'] }
];

const alleTags = artikelen.flatMap(artikel => artikel.tags);
console.log(alleTags);
// ['react', 'javascript', 'css', 'layout', 'node', 'javascript']

// Unieke tags:
const uniekeTags = [...new Set(alleTags)];
console.log(uniekeTags);
// ['react', 'javascript', 'css', 'layout', 'node']

slice()

slice() geeft een stuk van een array terug als nieuwe array. De originele array blijft ongewijzigd.

const letters = ['a', 'b', 'c', 'd', 'e'];

console.log(letters.slice(1, 3)); // ['b', 'c']
console.log(letters.slice(2));    // ['c', 'd', 'e'] (tot einde)
console.log(letters.slice(-2));   // ['d', 'e'] (laatste 2)
console.log(letters);             // origineel ongewijzigd

Paginering

const alleItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const itemsPerPagina = 3;
const pagina = 2; // pagina 2 (0-gebaseerd)

const paginaItems = alleItems.slice(
  pagina * itemsPerPagina,
  (pagina + 1) * itemsPerPagina
);

console.log(paginaItems); // [7, 8, 9]

splice()

splice() past een array aan door elementen te verwijderen, toe te voegen of te vervangen. Het wijzigt de originele array.

const kleuren = ['rood', 'groen', 'blauw', 'geel'];

// Verwijder 1 element op index 1:
kleuren.splice(1, 1);
console.log(kleuren); // ['rood', 'blauw', 'geel']

// Voeg in op index 1 (verwijder 0):
kleuren.splice(1, 0, 'paars');
console.log(kleuren); // ['rood', 'paars', 'blauw', 'geel']

// Vervang 2 elementen op index 0:
kleuren.splice(0, 2, 'oranje', 'roze');
console.log(kleuren); // ['oranje', 'roze', 'blauw', 'geel']

Item verwijderen op basis van waarde

const namen = ['Anna', 'Bob', 'Carol'];
const teVerwijderen = 'Bob';

const index = namen.indexOf(teVerwijderen);
if (index !== -1) {
  namen.splice(index, 1);
}

console.log(namen); // ['Anna', 'Carol']

Methods combineren

De echte kracht zit in het koppelen van meerdere methods achter elkaar.

Totaal van gefilterde producten

const producten = [
  { naam: 'Laptop', prijs: 899, categorie: 'elektronica' },
  { naam: 'Boek', prijs: 25, categorie: 'onderwijs' },
  { naam: 'Muis', prijs: 29, categorie: 'elektronica' },
  { naam: 'Pen', prijs: 3, categorie: 'onderwijs' },
  { naam: 'Monitor', prijs: 399, categorie: 'elektronica' }
];

const totaalElektronica = producten
  .filter(p => p.categorie === 'elektronica') // alleen elektronica
  .map(p => p.prijs)                          // pak de prijzen
  .reduce((som, prijs) => som + prijs, 0);    // tel op

console.log(`Totaal elektronica: €${totaalElektronica}`);
// "Totaal elektronica: €1327"

Top 3 duurste producten

const top3 = producten
  .sort((a, b) => b.prijs - a.prijs)  // duur naar goedkoop
  .slice(0, 3)                         // eerste 3
  .map(p => `${p.naam}: €${p.prijs}`); // leesbare tekst

console.log(top3);
// ['Laptop: €899', 'Monitor: €399', 'Muis: €29']

Overzicht alle array methods