Arrays & Methods

Wat zijn Array Methods?

Array methods zijn ingebouwde functies waarmee je arrays kunt filteren, sorteren, transformeren en doorzoeken zonder zelf loops te schrijven.

Enkelvoud en meervoud

De array heeft altijd een naam in het meervoud. De parameter in een method is het enkelvoud, omdat het verwijst naar één item per ronde.

const studenten = [...];
studenten.filter(student => ...);

Visualisatie

const studenten = ['Anna', 'Bob', 'Carol'];

studenten.filter(student => {
  // Ronde 1: student = 'Anna'
  // Ronde 2: student = 'Bob'
  // Ronde 3: student = 'Carol'
});

Veel voorkomende namen

studenten.filter(s => s.leeftijd > 18);
studenten.filter(persoon => persoon.leeftijd > 18);
studenten.filter(x => x.leeftijd > 18);

push()

push() voegt één of meer items toe aan het einde van een array. Let op: dit verandert de originele array (mutatie).

Simpel voorbeeld

const fruits = ['appel', 'banaan'];

fruits.push('kers');

console.log(fruits); // ['appel', 'banaan', 'kers']

Meerdere items tegelijk toevoegen

const getallen = [1, 2];

getallen.push(3, 4, 5);

console.log(getallen); // [1, 2, 3, 4, 5]

Een object toevoegen aan een array

const studenten = [
  { naam: 'Anna', cijfer: 8 },
  { naam: 'Bob', cijfer: 6 }
];

studenten.push({ naam: 'Carol', cijfer: 9 });

console.log(studenten);

De return-waarde gebruiken

const taken = ['afwassen'];

const nieuweLengte = taken.push('stofzuigen');

console.log(nieuweLengte); // 2  ← niet de array, maar de lengte
console.log(taken);        // ['afwassen', 'stofzuigen']

// Niet in React state:
items.push(nieuwItem);

// Wel in React state:
setItems([...items, nieuwItem]);

Verwante methodes

filter()

filter() geeft een nieuwe array terug met alleen de elementen die voldoen aan de opgegeven voorwaarde.

const getallen = [1, 2, 3, 4, 5, 6];
const even = getallen.filter(getal => getal % 2 === 0);
console.log(even); // [2, 4, 6]

Wat is modulo (%)

% geeft de rest van een deling terug.

6 % 2 = 0
7 % 2 = 1
8 % 2 = 0

Praktische voorbeelden

const studenten = [
  { naam: 'Anna', leeftijd: 17 },
  { naam: 'Bob', leeftijd: 20 },
  { naam: 'Carol', leeftijd: 19 }
];

const volwassen = studenten.filter(student => student.leeftijd >= 18);
console.log(volwassen);

map()

map() maakt een nieuwe array waarin elk element is omgezet naar een nieuwe waarde. De originele array blijft onveranderd.

Simpel voorbeeld: getallen verdubbelen

const getallen = [1, 2, 3, 4];
const verdubbeld = getallen.map(n => n * 2);

console.log(verdubbeld); // [2, 4, 6, 8]
console.log(getallen);   // [1, 2, 3, 4] — origineel blijft hetzelfde

Map met strings

const namen = ['jan', 'piet', 'klaas'];
const netjes = namen.map(naam =>
  naam.charAt(0).toUpperCase() + naam.slice(1)
);

console.log(netjes); // ['Jan', 'Piet', 'Klaas']

Map met een array van objecten

Heel vaak heb je een array met objecten en wil je daar één property uit halen, of elk object aanpassen.

const producten = [
  { naam: 'Laptop', prijs: 800 },
  { naam: 'Muis', prijs: 25 },
  { naam: 'Toetsenbord', prijs: 60 }
];

// Alleen de namen pakken
const namen = producten.map(product => product.naam);
console.log(namen); // ['Laptop', 'Muis', 'Toetsenbord']

// Of elk object bijwerken (met spread)
const metKorting = producten.map(product => ({
  ...product,
  prijs: product.prijs * 0.9
}));
console.log(metKorting);

join() — de lelijke komma's oplossen

Als je een array direct als tekst toont, voegt JavaScript er automatisch komma's tussen. Dit zie je vaak als je een array in een template literal of in innerHTML zet.

Het probleem

const fruits = ['appel', 'banaan', 'kers'];

console.log(`Ik hou van ${fruits}`);
// Ik hou van appel,banaan,kers   ← lelijke komma's

De oplossing: join()

join() plakt alle items van een array aan elkaar tot één string, met een scheidingsteken dat jij kiest.

const fruits = ['appel', 'banaan', 'kers'];

console.log(fruits.join(', '));   // "appel, banaan, kers"
console.log(fruits.join(' - '));  // "appel - banaan - kers"
console.log(fruits.join(''));     // "appelbanaankers"
console.log(fruits.join(' en ')); // "appel en banaan en kers"

Combineren met map()

Vaak gebruik je eerst map() om de items om te zetten, en daarna join() om er één nette string van te maken.

const studenten = [
  { naam: 'Anna', cijfer: 8 },
  { naam: 'Bob', cijfer: 6 },
  { naam: 'Carol', cijfer: 9 }
];

// Eerst elke student omzetten naar een tekst, dan met regelovergangen plakken
const overzicht = studenten
  .map(student => `${student.naam}: ${student.cijfer}`)
  .join('\n');

console.log(overzicht);
// Anna: 8
// Bob: 6
// Carol: 9

slice()

slice() geeft een nieuw stuk van een array terug, zonder het origineel te wijzigen. Handig om bijvoorbeeld alleen de eerste paar items (een "top 5") te tonen.

Top 5 uit een lijst

const spelers = ['Lisa', 'Mark', 'Sara', 'Jan', 'Mo', 'Eva', 'Tom', 'Lin'];

const topVijf = spelers.slice(0, 5);

console.log(topVijf); // ['Lisa', 'Mark', 'Sara', 'Jan', 'Mo']
console.log(spelers); // origineel blijft 8 items lang

Vanaf een bepaalde index

const getallen = [10, 20, 30, 40, 50];

console.log(getallen.slice(2));    // [30, 40, 50]  — vanaf index 2 t/m einde
console.log(getallen.slice(1, 3)); // [20, 30]      — index 1 en 2
console.log(getallen.slice());     // [10, 20, 30, 40, 50] — kopie van de hele array

Negatieve indexen (vanaf het einde)

const namen = ['Anna', 'Bob', 'Carol', 'Dirk', 'Eva'];

console.log(namen.slice(-2));   // ['Dirk', 'Eva']  — laatste twee
console.log(namen.slice(-3, -1)); // ['Carol', 'Dirk']

Combineren met andere methods

Je gebruikt slice() vaak na filter() of sort() om bijvoorbeeld de top 5 hoogste scores te pakken.

const spelers = [
  { naam: 'Lisa', score: 80 },
  { naam: 'Mark', score: 95 },
  { naam: 'Sara', score: 72 },
  { naam: 'Jan',  score: 88 },
  { naam: 'Mo',   score: 91 },
  { naam: 'Eva',  score: 65 }
];

const topDrie = spelers
  .sort((a, b) => b.score - a.score) // hoog naar laag
  .slice(0, 3);                       // top 3

console.log(topDrie);

sort()

sort() sorteert een array. Voor getallen is een vergelijkingsfunctie nodig.

const scores = [100, 25, 80, 60];
scores.sort((a, b) => a - b); // laag naar hoog

Sorteren op object eigenschappen

const cursussen = [
  { titel: "Basics", rating: 4.2 },
  { titel: "HTML", rating: 4.8 }
];

cursussen.sort((a, b) => b.rating - a.rating);

find()

find() geeft het eerste element terug dat voldoet aan een voorwaarde.

const personen = [
  { naam: 'Jan', leeftijd: 25 },
  { naam: 'Piet', leeftijd: 30 }
];

const gevonden = personen.find(p => p.leeftijd > 25);
console.log(gevonden);

findIndex()

findIndex() werkt als find(), maar geeft de index terug.

const kleuren = ['rood', 'groen', 'blauw'];
const index = kleuren.findIndex(k => k === 'groen');
console.log(index); // 1

includes()

includes() controleert of een array een bepaald element bevat.

const fruits = ['appel', 'banaan', 'sinaasappel'];
console.log(fruits.includes('banaan')); // true

Overzicht array methods