Lussen en arrays in JavaScript

Een lus herhaalt een codeblok. Elke uitvoering van het lichaam is een iteratie. Je kunt het aantal herhalingen veranderen door de teller en voorwaarde van de lus te wijzigen, zonder het lichaam te kopiëren.

Lees de drie onderdelen

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

Tussen de ronde haakjes staan een initialisatie, een voorwaarde en een bijwerking, gescheiden door puntkomma's. let i = 1 wordt eenmaal uitgevoerd. Daarna controleert JavaScript i <= 5. Als dat waar is, drukt het lichaam i af, telt de bijwerking i++ er 1 bij op en controleert JavaScript de voorwaarde opnieuw. Een onware voorwaarde beëindigt de lus voordat het lichaam nogmaals wordt uitgevoerd.

Er zijn vijf iteraties maar zes controles van de voorwaarde. Bij de laatste controle is de voorwaarde onwaar en wordt het lichaam niet uitgevoerd. Een lus waarvan de voorwaarde aan het begin onwaar is, heeft geen iteraties.

Kies de eindpunten en stapgrootte

for (let i = 0; i < 10; i++) bezoekt 0 tot en met 9. Beginnen bij 1 met i <= 10 bezoekt 1 tot en met 10. Beide worden tien keer uitgevoerd. Bij een stap van 1 van a naar b, als b minstens a is, geeft < b b - a iteraties en <= b b - a + 1.

De bijwerking kan grotere stappen nemen: for (let i = 0; i <= 20; i += 5) bezoekt 0, 5, 10, 15, 20. Achteruit tellen vereist zowel een afnemende bijwerking als een passende voorwaarde: for (let i = 3; i >= 1; i--) bezoekt 3, 2, 1. Schrijf de eerste en laatste gewenste waarde op voordat je < of <= kiest; zo herken je een grensfout van één positie.

Houd een lopend totaal bij

let total = 0;
for (let i = 1; i <= 100; i++) {
  total += i;
}
console.log(total); // 5050

total is een accumulator: die neemt het resultaat van de ene iteratie mee naar de volgende. Na de eerste drie iteraties bevat die achtereenvolgens 1, 3 en 6. Zet de declaratie vóór de lus, zodat de accumulator eenmaal wordt geïnitialiseerd. Als je de accumulator binnen het lichaam declareert, wordt die telkens opnieuw ingesteld en is die na de lus niet beschikbaar.

Onderzoek een lus die zich vreemd gedraagt

De teller in de luskop gebruikt let omdat i++ er een nieuwe waarde aan toewijst. Een teller met const laat het lichaam eenmaal uitvoeren, maar geeft bij de bijwerking een TypeError. Een let i die in de luskop is gedeclareerd, hoort bij de lus; als je die daarna uitleest, krijg je een ReferenceError, tenzij er buiten de lus een andere variabele met de naam i bestaat.

Een puntkomma direct na de luskop geeft de lus een leeg lichaam. In for (let i = 0; i < 3; i++); { console.log("Hello"); } wordt het blok eenmaal na de lus uitgevoerd. Laat de openingsaccolade aansluiten op de luskop. Controleer ten slotte de richting van de bijwerking: beginnen bij 0 met i < 5 en i-- beweegt van het stoppunt af en eindigt nooit.

Sommige taken eindigen wanneer een resultaat een doel bereikt, niet na een bekend aantal stappen. Een while-lus controleert die stopvoorwaarde vóór elke herhaling. Een do...while-lus controleert die na het lichaam.

Controleer eerst met while

let balance = 1000;
let years = 0;
while (balance < 1500) {
  balance = balance * 1.05;
  years++;
}
console.log(years); // 9

Het saldo groeit met 5% per jaar. Beide variabelen worden vóór de lus geïnitialiseerd. Na acht herhalingen is het saldo ongeveer 1477.46, onder het doel, dus is nog een herhaling nodig. Na negen is het ongeveer 1551.33; de volgende controle is onwaar. Behoud tijdens de berekening het volledige saldo en rond alleen het weergegeven resultaat af.

Als een while-voorwaarde aanvankelijk onwaar is, wordt het lichaam nul keer uitgevoerd. Zet bij een eenvoudige tellus de initialisatie vóór while en de bijwerking aan het einde van het lichaam. Zo behoud je het gedrag van een for-lus als er geen continue is. Met continue vraagt de bijwerking extra aandacht omdat die kan worden overgeslagen.

Voer eenmaal uit vóór de controle

let n = 4096;
let digits = 0;
do {
  n = Math.floor(n / 10);
  digits++;
} while (n > 0);
console.log(digits); // 4

Math.floor rondt naar beneden af. Hier verwijdert elke deling het laatste cijfer: 4096 wordt 409, dan 40, 4 en 0. Elke verwijdering verhoogt digits. Als je met 0 begint, wordt het lichaam nog steeds eenmaal uitgevoerd en telt het correct één cijfer. Een while (n > 0) die vooraf controleert, zou dat geval overslaan en nul cijfers melden. Deze methode om cijfers te tellen is bedoeld voor niet-negatieve gehele getallen.

Met let n = 10 wordt een do...while-lichaam dat n afdrukt eenmaal uitgevoerd, ook als de voorwaarde n < 5 is. Een lus die dezelfde voorwaarde vooraf controleert, drukt niets af. De puntkomma hoort na de laatste voorwaarde in do...while.

Werk naar een uitgang toe

Een oneindige lus blijft zich herhalen zonder te eindigen. Als je n++ vergeet in let n = 0; while (n < 3) { console.log(n); }, blijft de voorwaarde altijd waar. Langlopende code kan een browsertabblad laten vastlopen. Volg wat de voorwaarde verandert en stop een vastgelopen script met de bedieningselementen van de browser.

Een samengestelde voorwaarde zoals attempts < 3 && !found gaat alleen door zolang beide controles waar zijn. De lus stopt wanneer drie pogingen zijn gebruikt of een resultaat is gevonden. Voor een niet-negatief geheel getal dat afneemt naar nul, maakt while (count > 0) het aftellen duidelijker dan while (count). Negatieve getallen zijn ook truthy, dus betekent een truthy-waarde op zichzelf niet dat een teller positief is.

Vermijd gelijkheid als stopcontrole voor decimale getallen. Tien optellingen van 0.1 geven 0.9999999999999999 in JavaScript, dus kan while (x !== 1) eindeloos voorbij het bedoelde eindpunt gaan. Een vergelijking zoals x < 1 staat toe dat de grens wordt overschreden; een teller met gehele getallen is beter wanneer precies tien stappen nodig zijn. Bereken elke decimale waarde uit die teller.

Een lus kan stoppen voordat de voorwaarde onwaar wordt of werk voor slechts één item overslaan. Met geneste lussen kun je een reeks binnen een andere herhalen, bijvoorbeeld bij het bezoeken van rijen en kolommen.

Break of continue

break verlaat de bijbehorende lus onmiddellijk. Om het eerste veelvoud van 7 boven 50 te vinden:

for (let n = 51; n <= 100; n++) {
  if (n % 7 === 0) {
    console.log(n); // 56
    break;
  }
}

Na het afdrukken van 56 gaat de uitvoering na de lus verder. De waarden 57 tot en met 100 worden nooit gecontroleerd. while (true) kan hetzelfde patroon gebruiken wanneer de uitgang het gemakkelijkst binnen het lichaam te controleren is; een bereikbare break moet de uitgang bieden.

continue slaat de rest van de huidige iteratie over. In een for-lus wordt de bijwerking in de luskop nog wel uitgevoerd voordat de voorwaarde opnieuw wordt gecontroleerd:

for (let i = 1; i <= 9; i++) {
  if (i % 2 === 0) continue;
  console.log(i);
}

Bij de even waarden wordt het afdrukken overgeslagen, dus is de uitvoer 1, 3, 5, 7, 9. Als je continue door break vervangt, eindigt de lus bij 2 en wordt alleen 1 afgedrukt.

In een while-lus springt continue direct naar de voorwaarde. Een bijwerking die later in het lichaam staat, wordt overgeslagen. Als i gelijk is aan 2 en het lichaam begint met if (i === 2) continue;, kan de lus voor altijd op die waarde blijven steken. Zet de benodigde bijwerking vóór die sprong of gebruik for om te tellen.

Herhaal een binnenste lus voor elke rij

for (let row = 1; row <= 3; row++) {
  let line = "";
  for (let col = 1; col <= 4; col++) {
    line = line + (row * col) + " ";
  }
  console.log(line.trim());
}

Voor row = 1 bezoekt de binnenste lus kolommen 1 tot en met 4 en bouwt de tekst “1 2 3 4” op. Voor rij 2 begint de lus opnieuw bij kolom 1 en produceert “2 4 6 8”. Rij 3 produceert “3 6 9 12”. Het binnenste lichaam wordt twaalf keer uitgevoerd: vier kolommen voor elk van de drie rijen. Declareer line binnen het buitenste lichaam, zodat elke rij met een lege string begint.

Gebruik verschillende namen voor de tellers. Een binnenste let i overschaduwt een buitenste i, waardoor het lastig wordt beide posities uit te lezen.

Bezoek elk verschillend paar eenmaal

Begin voor vier personen met de nummers 0 tot en met 3 de binnenste teller bij i + 1:

for (let i = 0; i < 4; i++) {
  for (let j = i + 1; j < 4; j++) {
    console.log(i, j);
  }
}

De paren zijn 0–1, 0–2, 0–3, 1–2, 1–3, 2–3: zes bezoeken. Als j bij 0 begint, zijn er zestien bezoeken, waaronder paren van een persoon met zichzelf en omgekeerde herhalingen.

Een gewone break verlaat alleen de binnenste lus. Om een volledige geneste zoekactie te beëindigen, geef je de buitenste lus een label, bijvoorbeeld outer: for (...), en gebruik je bij de overeenkomst break outer;. Het label noemt de lus die moet worden verlaten; het verandert niet de volgorde waarin de paren worden gecontroleerd.

Een array slaat een geordende lijst op onder één naam. De waarden heten elementen. Een arrayliteral gebruikt blokhaken en komma's: const temps = [18, 21, 19, 24];. De literal [] maakt een lege array.

Tel posities vanaf nul

const colors = ["red", "green", "blue"];
console.log(colors[0]); // "red"
console.log(colors[2]); // "blue"
console.log(colors.length); // 3

De index van een element is de positie geteld vanaf nul. Het derde element heeft index 2. length telt geïndexeerde posities, inclusief eventuele lege posities. Voor deze array zonder gaten is het ook het aantal elementen. De laatste index is colors.length - 1, dus colors[colors.length - 1] leest “blue”.

Als je colors[colors.length] uitleest, vraag je om index 3, één positie voorbij het einde, en krijg je undefined. Een ontbrekende index geeft niet alleen omdat die ontbreekt een fout. Ook colors[5] geeft undefined.

Lees vanaf het einde

colors.at(-1) leest het laatste element en colors.at(-2) het element daarvoor. Niet-negatieve indexen werken zoals gewoonlijk: colors.at(0) leest “red”. Een negatief getal tussen blokhaken heeft een andere betekenis: colors[-1] telt niet vanaf het einde en geeft voor deze array undefined.

Lees een lijst binnen een lijst

Een element kan zelf een array zijn:

const grid = [[1, 2, 3], [4, 5, 6]];
console.log(grid[1]); // [4, 5, 6]
console.log(grid[1][0]); // 4

De eerste index selecteert een rij. De tweede selecteert een waarde binnen die rij. grid.length is 2, terwijl grid[0].length gelijk is aan 3. Deze lengtes beschrijven verschillende arrays. Rijen in een geneste array kunnen verschillende lengtes hebben.

Arrays kunnen typen mengen, zoals in [42, "km", true]. Een lijst met één soort gegevens, zoals temperaturen, is gemakkelijker te verwerken omdat je elk element op dezelfde manier kunt behandelen.

Herken een array en voorkom verrassingen met lege posities

typeof [1, 2] geeft “object” terug en is dus geen specifieke controle op arrays. Gebruik Array.isArray(value): dat geeft true terug voor [1, 2] en false voor “12”.

new Array(3) maakt drie lege posities; het slaat niet het enkele getal 3 op. Gebruik [3] voor één element of [0, 0, 0] voor drie expliciete nullen. Een lege positie levert bij uitlezen undefined op, maar is een gat, geen expliciet opgeslagen waarde. Met arrayliterals maak je de bedoelde inhoud duidelijk.

Lees strings zonder ze ter plaatse te proberen te wijzigen

Strings ondersteunen ook indexering, length en at(). "hello"[1] is “e” en "hello".at(-1) is “o”. Strings zijn onveranderlijk: een toewijzing aan een tekenpositie vervangt het teken niet. In de strikte modus, waaronder JavaScript-modules, geeft die toewijzing een TypeError. Bouw een nieuwe string als tekst moet veranderen.

Het wijzigen van een bestaande array heet mutatie. Sommige methoden wijzigen de array; andere geven een nieuwe array terug. De retourwaarde van een methode kan ook een lengte of een verwijderd element zijn, dus controleer zowel de array als het resultaat van de aanroep.

Vervang elementen en wijzig de uiteinden

const scores = [70, 80, 90];
scores[1] = 85;
console.log(scores); // [70, 85, 90]

const zorgt dat scores naar dezelfde array blijft verwijzen. Het bevriest de inhoud van die array niet. De toewijzing scores = [] zou een TypeError geven, maar toewijzing via een index is toegestaan.

Voor const queue = ["Ana", "Ben"]; geeft queue.push("Cleo") de waarde 3 terug. De array wordt ["Ana", "Ben", "Cleo"]. Daarna geeft queue.pop() “Cleo” terug en blijven de eerste twee namen over. Als je het resultaat van een aanroep van push opslaat, sla je de lengte als getal op, niet de bijgewerkte array. pop en shift geven undefined terug bij een lege array. Toevoegen of verwijderen aan het begin verschuift ook de andere indexen, wat bij lange arrays meer werk kan kosten.

Voeg in en verwijder in het midden

splice(start, deleteCount, ...items) wijzigt de array en geeft een array met verwijderde elementen terug:

const days = ["Mon", "Tue", "Thu", "Fri"];
const removed = days.splice(2, 0, "Wed");
// days: ["Mon", "Tue", "Wed", "Thu", "Fri"]
// removed: []
const nextRemoved = days.splice(1, 2);
// days: ["Mon", "Thu", "Fri"]
// nextRemoved: ["Tue", "Wed"]

De eerste aanroep begint bij index 2, verwijdert nul items en voegt daar “Wed” in. De tweede begint bij index 1 en verwijdert twee items. Het tweede argument is een aantal, geen eindindex. Elementen na een invoeging of verwijdering krijgen nieuwe indexen.

Kopieer een bereik met slice

slice(start, end) geeft een nieuwe array terug en sluit de eindindex uit. Voor const t = [10, 20, 30, 40, 50]; geeft t.slice(1, 3) de waarde [20, 30] en laat t ongewijzigd. t.slice(-2) kopieert de laatste twee elementen, [40, 50]. Zonder argumenten kopieert t.slice() de hele array. De extra letter in splice duidt op een andere bewerking: die wijzigt de oorspronkelijke array; slice kopieert een bereik.

Houd de lijst vrij van onbedoelde gaten

Als je voorbij het einde schrijft, ontstaan lege posities. Na const a = [1, 2]; a[4] = 5; is de lengte 5 en zijn indexen 2 en 3 gaten. Ook delete a[i] laat een gat achter en behoudt de lengte. Gebruik push om aan het einde toe te voegen en splice(i, 1) om een element te verwijderen en het gat te sluiten.

Een kleinere length toewijzen verwijdert elementen van het einde. a.length = 0 maakt de array leeg. De verwijderde elementen verschijnen niet opnieuw als de lengte later wordt vergroot.

Ook sort en reverse wijzigen arrays. Kopieermethoden zijn onder andere slice, concat, map, filter, toSorted, toReversed, toSpliced en with. Wanneer een methode een nieuwe array teruggeeft, sla je dat resultaat op of gebruik je het; de oorspronkelijke array bevat nog steeds de eerdere inhoud.

Een zoekactie kan een ja/nee-resultaat of de positie van een element nodig hebben. Tekstconversie heeft een ander doel: de vorm van gegevens veranderen zodat een lijst kan worden gelezen, opgeslagen of verwerkt.

Vraag of iets aanwezig is of waar het staat

includes(value) geeft een booleaanse waarde terug. ["tea", "coffee"].includes("tea") is true; als je de zoekopdracht verandert in “Tea”, krijg je false. Tekst vergelijken is hoofdlettergevoelig en typen zijn van belang: [5].includes("5") is false.

indexOf(value) geeft de eerste overeenkomende index terug, of -1 wanneer geen waarde overeenkomt. lastIndexOf zoekt vanaf het einde. In [3, 7, 3, 9] staat de eerste 3 op index 0 en de laatste op index 2. Zoeken naar 5 geeft -1 terug.

Schrijf geen if (arr.indexOf(x)). Index 0 is falsy, terwijl -1 truthy is: die controle wijst een overeenkomst aan het begin af en accepteert een ontbrekende waarde. Gebruik arr.indexOf(x) !== -1, of gebruik includes als de positie niet nodig is.

Voor gewone waarden vereisen beide methoden hetzelfde type en dezelfde waarde, net als strikte gelijkheid. Ze behandelen NaN verschillend: [1, NaN].includes(NaN) is true, maar [1, NaN].indexOf(NaN) is -1. De gelijkheidsregel van includes kan NaN aan zichzelf gelijkstellen.

Vergelijk inhoud bewust

Twee afzonderlijk gemaakte arrays zijn verschillende arrays, ook wanneer hun elementen overeenkomen. [1, 2] === [1, 2] is false; ook == vergelijkt array-identiteit. Om dezelfde geordende inhoud te controleren, vergelijk je de lengtes en daarna de waarden op elke overeenkomstige index. Alleen met een ja/nee-controle op aanwezigheid stel je niet vast dat de volgorde en het aantal herhalingen gelijk zijn.

Voeg elementen samen tot een string

const dateParts = ["2026", "03", "15"];
console.log(dateParts.join("-")); // "2026-03-15"
console.log([1, 2, 3].join()); // "1,2,3"
console.log([1, 2, 3].join("")); // "123"

join plaatst het scheidingsteken tussen de elementen, nooit na het laatste. Het standaardscheidingsteken is een komma zonder spaties. Elementen met null en undefined leveren lege tekst op. Kies het scheidingsteken expliciet voor leesbare uitvoer.

Als je + met een string gebruikt, wordt een array ook omgezet in tekst, maar met komma's: "List: " + [1, 2] wordt “List: 1,2”. Geneste structuur gaat in die tekst verloren: String([1, [2, 3]]) geeft “1,2,3”. Log de array zelf om de structuur te bekijken.

Splits tekst in delen

"red,green,blue".split(",") geeft ["red", "green", "blue"] terug. Het scheidingsteken moet exact overeenkomen. Als je “red, green” alleen op een komma splitst, blijft de spatie aan het begin van “ green” staan; als je op “, ” splitst, worden de komma en die spatie verwijderd.

"4,8,15".split(",") geeft strings terug, geen getallen. Converteer elk deel voordat je getalswaarden optelt. Anders kan de operator + tekst samenvoegen in plaats van een totaal te berekenen.

Voor eenvoudige tekst op basis van letters produceert "stressed".split("").reverse().join("") “desserts”. De splitsing maakt een nieuwe array, het omkeren wijzigt die array en het samenvoegen bouwt opnieuw een string op. Een leeg scheidingsteken splitst UTF-16-code-eenheden; sommige symbolen gebruiken meer dan één eenheid, dus is dit geen algemene manier om alle leesbare tekst om te keren.

Een lus kan arrayposities bezoeken of de waarden rechtstreeks nemen. Kies de vorm die de informatie beschikbaar maakt die het lichaam nodig heeft. Houd rekening met veranderende indexen van de array wanneer je elementen invoegt of verwijdert.

Gebruik indexen voor posities en richting

const fruits = ["apple", "pear", "plum"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

De indexen zijn 0, 1, 2. De controle is < fruits.length, omdat index 3 voorbij het einde ligt. Met <= zou een extra iteratie undefined uitlezen. Lussen met index kunnen ook achteruit lopen, beginnend bij fruits.length - 1 en doorgaand zolang i >= 0, of elk tweede element bezoeken met i += 2.

Gebruik for...of voor waarden

for (const fruit of fruits) {
  console.log(fruit.toUpperCase());
}

Dit drukt “APPLE”, “PEAR” en “PLUM” af. fruit bevat één waarde per iteratie. const werkt omdat elke iteratie een nieuwe binding maakt; de lus wijst geen nieuwe waarde toe aan één gedeelde teller. for...of werkt ook op strings. Een lus over “banana” kan klinkers tellen door voor elke ch "aeiou".includes(ch) te controleren.

Een lokaal getal wijzigen schrijft niet naar de array. Na for (let n of nums) { n = n * 2; } zijn de numerieke elementen van nums ongewijzigd. Om ze te wijzigen, wijs je waarden toe via nums[i] of bouw je een nieuwe array met verdubbelde getallen.

Haal waarden en indexen samen op

entries() levert paren met een index en een waarde. Blokhaken in de luskop pakken elk paar uit:

for (const [i, fruit] of fruits.entries()) {
  console.log((i + 1) + ". " + fruit);
}

De uitvoer is “1. apple”, “2. pear”, “3. plum”. Arrayindexen beginnen nog steeds bij nul; i + 1 verandert alleen de weergegeven nummering.

for...in bezoekt eigenschapsnamen. Bij arrays zijn de indexen strings en kan de lus extra eigenschappen bevatten. Gebruik de bovenstaande vormen om arrayelementen te verwerken.

Voorkom dat verschoven elementen worden overgeslagen

const nums = [2, 4, 5, 6];
for (let i = 0; i < nums.length; i++) {
  if (nums[i] % 2 === 0) nums.splice(i, 1);
}
// nums is [4, 5]

Op index 0 schuift door het verwijderen van 2 de waarde 4 naar index 0. De bijwerking verplaatst i naar 1, dus wordt 4 overgeslagen. De lus ziet daarna 5 en verwijdert 6. Het resultaat bevat nog steeds een even getal.

Als je op index verwijdert, loop dan vanaf het einde achteruit. Door een element te verwijderen verschuiven dan alleen posities die al zijn bezocht. Een andere aanpak is een nieuwe array bouwen met de waarden die je wilt behouden. Voeg geen elementen toe aan dezelfde array terwijl de stopcontrole van de lus van de lengte afhangt; het eindpunt kan blijven opschuiven.

Veel taken met arrays gebruiken dezelfde kleine luspatronen. Bepaal welk resultaat je nodig hebt, kies de beginwaarde en werk het resultaat eenmaal bij voor elk relevant element. Door de uitvoering te volgen, zie je wat het resultaat na elke stap betekent.

Tel waarden op en tel overeenkomsten

const temps = [18, 21, 19, 24];
let sum = 0;
let warm = 0;
for (const t of temps) {
  sum += t;
  if (t > 20) warm++;
}

sum telt elke temperatuur op; warm telt er alleen één bij op voor een temperatuur boven 20 °C. Ze houden verschillende grootheden bij. Dat onderscheid wordt zichtbaar als je de uitvoering volgt:

Het gemiddelde is sum / temps.length, wat 20,5 °C geeft. Controleer de lengte voordat je deelt: een lege array geeft 0 / 0, wat NaN is en geen betekenisvol gemiddelde.

Houd een grootste of kleinste waarde bij

Initialiseer bij een niet-lege array het maximum met het eerste element. Vervang het daarna alleen wanneer je een grotere waarde vindt:

const values = [-3, -7, -1, -5];
let max = values[0];
for (const n of values) {
  if (n > max) max = n;
}
// max is -1

Als je bij nul begint, blijft bij een lijst met alleen negatieve waarden ten onrechte nul staan. Beginnen bij -Infinity werkt ook voor een maximum, maar bij een lege invoer blijft dan die beginwaarde staan. Voor een minimum keer je de vergelijking om en kies je het eerste element of Infinity als beginwaarde.

Zoek een eerste overeenkomst of controleer een hele lijst

Een zoekactie slaat een overeenkomst op en verlaat de lus met break. Met let firstWarm; kan de lus bij de eerste t > 20 de toewijzing firstWarm = t uitvoeren en stoppen. De lus vindt 21 en controleert de latere elementen niet. Als niets overeenkomt, blijft de variabele undefined.

Voor een controle of “alle” elementen voldoen, begin je een vlag met true en stel je die bij de eerste mislukte controle in op false. Voor een controle of “minstens één” element voldoet, begin je met false en stel je de vlag bij de eerste geslaagde controle in op true. Als een score vanaf 50 voldoende is, slaagt [72, 85, 49] bij 49 niet voor de controle of alle scores voldoende zijn. Bij een lege lijst blijft de beginwaarde van de vlag ongewijzigd.

Bouw gewijzigde waarden op en vergelijk aangrenzende elementen

const km = [1.5, 3, 0.25];
const meters = [];
for (const d of km) {
  meters.push(d * 1000);
}
// meters is [1500, 3000, 250]

De nieuwe array begint leeg en ontvangt per iteratie één omgerekende afstand. Zet een voorwaarde vóór push als slechts enkele waarden in het resultaat thuishoren.

Begin voor veranderingen van dag tot dag bij index 1, omdat index 0 geen vorige dag heeft:

const changes = [];
for (let i = 1; i < temps.length; i++) {
  changes.push(temps[i] - temps[i - 1]);
}
// changes is [3, -2, 5]

Er is één verschil minder dan er metingen zijn. Als je in de omgekeerde volgorde aftrekt, keert elk teken om. Dezelfde resultaatvormen komen terug bij arraymethoden: map bouwt getransformeerde waarden op, filter behoudt overeenkomende elementen, find zoekt, some en every controleren en reduce verzamelt waarden. Een lus blijft nuttig wanneer je bij één keer doorlopen meerdere resultaten nodig hebt, zoals bij sum en warm.

Een functie ontvangt invoer, voert code uit en kan een resultaat teruggeven. Een callback is een functie die aan een andere functie wordt doorgegeven om te worden aangeroepen. Arraymethoden gebruiken callbacks om het werk voor elk element te beschrijven.

Schrijf een korte pijlfunctie

n => n * 2 ontvangt een parameter met de naam n en geeft de verdubbelde waarde terug. De pijl scheidt de invoer van het lichaam. Bij één parameter mogen de ronde haakjes worden weggelaten. Bij nul of meerdere parameters zijn ze nodig: () => 0 en (a, b) => a - b.

const double = n => n * 2;
const doubled = [1, 2, 3].map(double);
// doubled is [2, 4, 6]

double is de naam van de functie zelf. De methode roept die met elk getal aan. Als je map(double()) schrijft, roep je de functie direct aan en geef je het resultaat door in plaats van de functie. Gebruik bij een benoemde controle zoals function isEven(n) { return n % 2 === 0; } de aanroep filter(isEven) om de methode elk element te laten doorgeven.

Geef een waarde terug vanuit een instructieblok

Een expressie na de pijl wordt automatisch teruggegeven. Accolades maken een blok, dus heeft een resultaat een expliciete return nodig:

const double = n => {
  const doubled = n * 2;
  return doubled;
};

Zonder return geeft de functie undefined terug. [1, 2, 3].map(n => { n * 2; }) levert daarom [undefined, undefined, undefined] op. De vermenigvuldiging wordt uitgevoerd, maar de waarde wordt nooit het resultaat van de callback.

Lees callbackargumenten op basis van hun positie

Methoden zoals map, filter en forEach geven eerst het element door, als tweede de index vanaf nul en als derde de hele array. In (name, i) => ... kies je de namen zelf; hun posities bepalen wat ze ontvangen. Laat ongebruikte parameters aan het einde weg. Andere methoden hebben andere parameterlijsten: reduce ontvangt ook een accumulator en een sorteer­callback ontvangt twee waarden om te vergelijken.

Gebruik forEach voor acties

const letters = ["a", "b"];
const result = letters.forEach((letter, i) => {
  console.log(i + ": " + letter);
});
// Prints "0: a" and "1: b".
// result is undefined.

Afdrukken is een neveneffect: een actie die tijdens de uitvoering van de callback plaatsvindt. forEach gooit retourwaarden van callbacks weg en geeft zelf undefined terug. Gebruik map als je een nieuwe array met resultaten nodig hebt. Een waarde teruggeven vanuit een forEach-callback verandert die regel niet.

Een return in deze callback beëindigt alleen de huidige aanroep; de methode gaat verder met het volgende element. Je kunt break niet binnen een callback gebruiken om forEach te verlaten. Kies for...of met break, of een zoekmethode zoals find of some, wanneer later werk bij een overeenkomst moet stoppen.

Deze callbackmethoden wijzigen de bronarray niet zelf. De callback kan die nog wel muteren, bijvoorbeeld via een toewijzing met een index of push. Als callbacks zich richten op hun retourwaarde of bedoelde actie, is het gemakkelijker te beredeneren wat de bronarray daarna bevat.

Kies een arraymethode op basis van de vorm van het resultaat. map levert een waarde voor elk aanwezig element. filter behoudt de oorspronkelijke elementen die aan een voorwaarde voldoen. Beide geven nieuwe arrays terug.

Transformeer met map

const km = [1.5, 3, 0.25];
const meters = km.map(d => d * 1000);
// meters is [1500, 3000, 250]; km is unchanged.

De retourwaarde van de callback wordt het element op de overeenkomstige positie. Bij invoer zonder gaten wordt de callback eenmaal per element aangeroepen en heeft het resultaat dezelfde lengte. Stringelementen transformeren werkt ook: ["ana", "ben"].map(s => s.toUpperCase()) geeft ["ANA", "BEN"].

De tweede callbackparameter geeft de index. ["Ana", "Ben"].map((name, i) => (i + 1) + ". " + name) bouwt ["1. Ana", "2. Ben"] op. Als de callback een instructieblok als lichaam heeft, geef je de op te slaan waarde expliciet terug.

Selecteer met filter

const temps = [18, 21, 19, 24];
const warm = temps.filter(t => t > 20);
// warm is [21, 24]

filter behoudt een element wanneer de callback een truthy-resultaat teruggeeft. De methode behoudt het element zelf, niet de booleaanse waarde van de callback. De behouden waarden blijven in hun oorspronkelijke volgorde. Het resultaat kan alle, enkele of geen elementen bevatten; temps.filter(t => t > 30) is [].

Geef niet het element zelf terug wanneer nul een geldige waarde is. [0, 5, 0, 3].filter(n => n) laat beide nullen weg omdat ze falsy zijn. Een voorwaarde zoals n !== null verwijdert ontbrekende metingen die door null worden voorgesteld, terwijl nul behouden blijft. Geef de werkelijke regel aan om een element te behouden.

Als je map gebruikt met een voorwaardelijke expressie die undefined teruggeeft voor afgewezen elementen, worden die niet verwijderd. Die resultaten met undefined nemen nog steeds posities in de nieuwe array in.

Volg een keten van links naar rechts

[12, 7, 30, 4].filter(n => n >= 10).map(n => n / 2) maakt eerst [12, 30] en daarna [6, 15]. De tweede callback ontvangt alleen de behouden elementen. Eerst filteren is passend wanneer de controle naar de oorspronkelijke waarden verwijst. Als je de volgorde verandert, kan veranderen wat de controle te zien krijgt.

Converteer numerieke tekst bewust

const numbers = "4,8,15".split(",").map(Number);
// numbers is [4, 8, 15]

Number ontvangt elk tekstdeel en levert een getal op. parseInt rechtstreeks doorgeven is een valkuil: het tweede argument is een grondtal, terwijl map daar de index doorgeeft. ["10", "10", "10"].map(parseInt) geeft [10, NaN, 2]. Gebruik map(s => parseInt(s, 10)) om het grondtal vast te zetten, of map(Number) voor deze strings met gehele getallen.

Noch map noch filter vervangt de bronarray. Alleen temps.map(t => t + 1); schrijven gooit de nieuw berekende array weg. Sla die op, geef die terug vanuit een functie of gebruik die in een keten.

Sommige vragen vereisen één waarde, andere een positie of een ja/nee-antwoord. Zoekmethoden kunnen stoppen zodra dat antwoord bekend is. Door het juiste retourtype te kiezen, kun je latere voorwaarden gemakkelijker correct schrijven.

Kies een waarde of een index

const temps = [18, 21, 19, 24];
console.log(temps.find(t => t > 20)); // 21
console.log(temps.findIndex(t => t > 20)); // 1
console.log(temps.findLast(t => t > 20)); // 24
console.log(temps.findLastIndex(t => t > 20)); // 3

find zoekt vanaf het begin en geeft het eerste overeenkomende element terug. findIndex geeft de index daarvan terug. De vormen met Last zoeken achteruit. Alle vier stoppen wanneer ze de gevraagde overeenkomst vinden.

temps.find(t => t > 30) geeft undefined terug; temps.findIndex(t => t > 30) geeft -1 terug. Controleer i !== -1 voordat je een gevonden index aan splice doorgeeft. Anders verwijdert splice(-1, 1) het laatste element, ook al is er geen overeenkomst gevonden.

Behoud falsy-overeenkomsten

[3, 0, 5].find(n => n < 1) geeft 0 terug, een geslaagde overeenkomst. if (result) behandelt die ten onrechte als een mislukking omdat nul falsy is. Voor numerieke gegevens maakt result !== undefined onderscheid tussen nul en geen overeenkomst. Als een array zelf undefined als overeenkomende waarde kan bevatten, gebruik dan findIndex en vergelijk het resultaat met -1; de waarde alleen kan die gevallen niet onderscheiden.

filter is geschikt als alle overeenkomsten nodig zijn. [5, 12, 8, 130].filter(n => n > 10) geeft [12, 130]; find geeft alleen 12 terug. Als je filter(...)[0] gebruikt, wordt de volledige array met overeenkomsten berekend voordat de eerste waarde wordt gelezen.

Controleer op minstens één of alle elementen

const scores = [72, 85, 49];
const anyFailed = scores.some(s => s < 50); // true
const allPassed = scores.every(s => s >= 50); // false

some stopt bij de eerste geslaagde controle. every stopt bij de eerste mislukte controle. Hun antwoorden zijn booleaanse waarden, geen elementen. Bij deze aanroepen laat de 49 de controle met some slagen en die met every mislukken.

Voor een lege array geeft some false terug omdat niets voldoet. every geeft true terug omdat niets niet voldoet. Als een volledige verzameling resultaten minstens één score moet bevatten, combineer je de controles: scores.length > 0 && scores.every(s => s >= 50). De lengtevoorwaarde handelt leegte af; every controleert de elementen.

Kies exacte aanwezigheid of een eigen controle

includes("ana") zoekt precies die waarde. Een hoofdletterongevoelige zoekactie heeft een callback nodig: names.some(n => n.toLowerCase() === "ana"). Die kan zowel “Ana” als “ANA” accepteren. Gebruik includes voor een bekende waarde en een zoekactie met een callback wanneer elk element volgens een regel moet worden gecontroleerd.

reduce neemt een accumulator mee van het ene element naar het volgende. De callback geeft de accumulator voor de volgende stap terug. Na het laatste element geeft de methode die eindwaarde terug.

Volg een totaal

const temps = [18, 21, 19, 24];
const total = temps.reduce((sum, t) => sum + t, 0);
// total is 82

De 0 is de beginwaarde van de accumulator. De callback ontvangt eerst sum en als tweede de huidige temperatuur t. De teruggegeven som wordt het eerste argument van de volgende aanroep.

Dit is hetzelfde lopende totaal als bij een lus met let sum = 0. Een callback heeft na de accumulator en het element ook optionele argumenten voor de index en de array. De parameternamen zijn vrij te kiezen, maar hun volgorde ligt vast.

Geef een bruikbare beginwaarde op

Met een beginwaarde begint de reductie bij het eerste element. Zonder beginwaarde wordt het eerste aanwezige element de accumulator en beginnen de callbackaanroepen bij het volgende aanwezige element. Bij een lege array geeft het weglaten van de beginwaarde een TypeError. [].reduce((sum, n) => sum + n, 0) geeft veilig 0 terug omdat geen callbackaanroep nodig is.

De beginwaarde bepaalt ook het soort resultaat. Gebruik 0 voor totalen of aantallen en "" voor tekst. ["a", "b", "c"].reduce((text, s) => text + s.toUpperCase(), "") bouwt “ABC” op. Een numeriek totaal dat met een string begint, kan door + per ongeluk tekst samenvoegen.

Tel en vind een uiterste waarde

const scores = [72, 85, 49];
const passed = scores.reduce(
  (count, s) => s >= 50 ? count + 1 : count,
  0
);
// passed is 2

Bij een voldoende komt er één bij; bij een onvoldoende wordt het ongewijzigde aantal teruggegeven. Elke tak levert een volgende accumulator. Geef voor een maximum de grotere waarde terug: [-3, -7, -1, -5].reduce((max, n) => n > max ? n : max, -Infinity) geeft -1. Beginnen bij nul zou verkeerd zijn voor deze lijst met alleen negatieve waarden. Lege invoer laat -Infinity staan, dus handel dat resultaat af wanneer een echt maximum nodig is.

Geef op elk pad een waarde terug

Een callback met een blok heeft return nodig. (sum, n) => { sum + n; } geeft undefined terug, dus is het eindresultaat van de reductie undefined. Een gedeeltelijk ontbrekende retourwaarde is ook gevaarlijk. Als je bij het tellen in [72, 49, 85] alleen bij een voldoende een waarde teruggeeft, krijg je eerst 1, daarna undefined bij 49 en daarna NaN wanneer bij 85 één wordt opgeteld. Geef de ongewijzigde accumulator terug wanneer een element niets bijdraagt.

Combineer bewerkingen zonder de taak te verhullen

Het totaal van de voldoende scores is scores.filter(s => s >= 50).reduce((sum, s) => sum + s, 0), wat 157 geeft. Voor een gemiddelde is een apart aantal nodig: temps.reduce((sum, t) => sum + t, 0) / temps.length geeft 20,5 °C. Controleer eerst de lengte, want lege invoer geeft na de deling NaN. Als een callback meerdere niet-gerelateerde taken gaat uitvoeren, kan een for...of-lus de veranderende resultaten duidelijker tonen.

Sorteren kiest een volgorde door elementen te vergelijken. Omkeren draait alleen de bestaande volgorde om. Beide bewerkingen hebben methoden die een array wijzigen en methoden die een kopie maken.

Begrijp de standaardvolgorde

[10, 9, 1, 100].sort() geeft [1, 10, 100, 9]. Zonder vergelijkingsfunctie vergelijkt sort elementen als strings, teken voor teken met UTF-16-code-eenheden. “100” begint met “1”, dat vóór “9” komt. De opgeslagen elementen blijven getallen; alleen de vergelijking gebruikt hun tekstvorm.

Ook voor strings kan deze standaardvolgorde lezers verrassen. ["banana", "Cherry", "apple"].sort() geeft ["Cherry", "apple", "banana"], omdat ASCII-hoofdletters vóór kleine letters komen. Letters met een accent kunnen worden gescheiden van de letters waarmee lezers ze groeperen. Gebruik een taalafhankelijke vergelijking voor de alfabetische volgorde die mensen verwachten.

Geef een waarde met het juiste teken terug

Een vergelijkingsfunctie ontvangt twee elementen, a en b. Een negatieve retourwaarde plaatst a vóór b; een positieve retourwaarde plaatst het na b; nul behandelt ze als gelijk bij het sorteren.

const nums = [10, 9, 1, 100];
nums.sort((a, b) => a - b);
// nums is [1, 9, 10, 100]

De vergelijking van 10 met 9 levert de positieve waarde 1 op, dus komt 9 vóór 10. Gebruik (a, b) => b - a voor aflopende getalvolgorde. Geef een getal met een betekenisvol teken terug. (a, b) => a > b geeft alleen true of false terug, die 1 of 0 worden; de functie meldt nooit dat a vóór b hoort. Zo'n vergelijkingsfunctie geeft een onbetrouwbare volgorde.

Sorteren is stabiel: elementen die als gelijk worden vergeleken, behouden hun oorspronkelijke onderlinge volgorde. ["kiwi", "fig", "pear", "plum"].sort((a, b) => a.length - b.length) geeft ["fig", "kiwi", "pear", "plum"]. De drie woorden van vier letters behouden hun volgorde.

Kies mutatie of een kopie

const sorted = scores.sort((a, b) => a - b); geeft een tweede naam aan dezelfde, nu gesorteerde array. De eerdere volgorde blijft niet behouden. Gebruik voor een nieuwe gesorteerde array scores.toSorted((a, b) => a - b) of maak een kopie met spreadsyntaxis vóór sort.

[3, 1, 2].toReversed() geeft [2, 1, 3]. Dat is een omgekeerde reeks, geen aflopende getalvolgorde. Om de grootste waarden eerst te zetten, gebruik je een vergelijkingsfunctie voor aflopende volgorde of sorteer je oplopend voordat je de volgorde omkeert.

Controleer typen voordat je numerieke tekst sorteert

Waarden uit split zijn strings. ["10", "9", "100"].sort() geeft ["10", "100", "9"]. Aftrekken in een vergelijkingsfunctie converteert numerieke strings tijdens de vergelijking, maar laat de elementen als strings staan. Converteer eerst met map(Number) wanneer de waarden numerieke gegevens zijn en gebruik daarna een vergelijkingsfunctie voor getallen. Dit bereidt de gegevens ook voor op later optellen zonder onbedoelde tekstsamenvoeging.

Mensen verwachten dat de volgorde van tekst en de opmaak van getallen de conventies van een taal volgen. Bewaar waarden in vormen die gemakkelijk te verwerken zijn, kies een expliciete landinstelling voor tekstvergelijking en maak de uiteindelijke uitvoer op voor de lezer.

Vergelijk tekst met regels van een landinstelling

a.localeCompare(b, locale) geeft een negatief getal terug als a vóór b komt, een positief getal als het erna komt en nul als ze als gelijk worden vergeleken. Alleen het teken is gegarandeerd, niet exact -1 of 1.

const names = ["Zoe", "Émile", "adam"];
const sorted = names.toSorted((a, b) => a.localeCompare(b, "en"));
// sorted is ["adam", "Émile", "Zoe"]

Een landinstelling is een taalcode zoals “en”, “de” of “sv”. Het Duits plaatst “ä” vóór “z”, terwijl het Zweeds die na “z” plaatst. Geef de bedoelde taal van de pagina door om die keuze expliciet te maken. Zonder landinstelling bepalen de standaardinstellingen van de uitvoeringsomgeving de volgorde.

Gewone vergelijkingen met < vergelijken nog steeds tekencodes. Woorden van elkaar aftrekken levert NaN op, wat bij het sorteren werkt als een vergelijking met gelijk resultaat; het levert geen alfabetische volgorde op.

Stel nuttige vergelijkingsopties in

Met { numeric: true } worden reeksen cijfers als getallen vergeleken. Als je ["file10", "file2", "file1"] sorteert met (a, b) => a.localeCompare(b, "en", { numeric: true }), krijg je ["file1", "file2", "file10"]. Een gewone tekstsortering plaatst “file10” vóór “file2”.

In het Engels behandelt { sensitivity: "base" } varianten in hoofdlettergebruik en accenten, zoals “a”, “A” en “á”, als gelijk. Deze regels hangen af van de taal: het Zweeds behandelt “a” en “ä” als verschillende basisletters. Gebruik de bedoelde landinstelling zowel bij vergelijken op overeenkomst als bij sorteren.

Hergebruik bij veel vergelijkingen een tekstvergelijker:

const collator = new Intl.Collator("en", { numeric: true });
const sorted = files.toSorted(collator.compare);

collator.compare is al een vergelijkingsfunctie. Door die eenmaal te maken, voorkom je dat dezelfde opties voor de landinstelling tijdens een grote sortering steeds opnieuw worden ingesteld.

Sorteer datums voordat je ze opmaakt

Strings met vaste breedte in de vorm YYYY-MM-DD plaatsen het jaar vóór de maand en de dag. Tekstsortering volgt dan de datumvolgorde: ["2026-03-15", "2025-11-02", "2026-01-20"].sort() geeft ["2025-11-02", "2026-01-20", "2026-03-15"].

Tekst met de dag eerst, zoals “15/03/2026” en “20/01/2025”, vergelijkt eerst de dag en kan daardoor het latere jaar voorop plaatsen. Sla deze datums op en sorteer ze in ISO-vorm en maak aan het einde tekst voor de weergave.

Bouw leesbare lijsten en getallen op

join(", ") gebruikt overal hetzelfde scheidingsteken. Intl.ListFormat voegt het laatste verbindingswoord van de taal toe:

const list = new Intl.ListFormat("en-US", {
  style: "long", type: "conjunction"
});
list.format(["Ana", "Ben", "Cleo"]);
// "Ana, Ben, and Cleo"

“en-GB” levert “Ana, Ben and Cleo” op; “nl” levert “Ana, Ben en Cleo” op. Een alternatief gebruikt in het Engels “or”. Twee namen geven “Ana and Ben” zonder komma.

(1234.5).toLocaleString("en-US") geeft “1,234.5”, terwijl “de-DE” “1.234,5” geeft. Deze resultaten zijn strings. Sorteer numerieke gegevens voordat je toLocaleString met map toepast; als je eerst opmaakt, vervang je numerieke waarden door tekst waarvan de interpunctie de tekstsortering beïnvloedt.

Een arrayvariabele bevat een referentie naar een array. Als je die variabele aan een andere naam toewijst, wordt de array gedeeld. Met spreadsyntaxis kun je een nieuwe buitenste array maken, lijsten combineren of elementen als afzonderlijke functieargumenten doorgeven.

Maak onderscheid tussen toewijzen en kopiëren

const a = [1, 2, 3];
const b = a;
b.push(4);
// a and b both refer to [1, 2, 3, 4].
console.log(a === b); // true

Er is één array met twee namen. const verhindert niet dat een van beide namen wordt gebruikt om de array te wijzigen. Voor een nieuwe buitenste array is een echte kopieerbewerking nodig:

const c = [...a];
c.push(5);
// c is [1, 2, 3, 4, 5]; a stays [1, 2, 3, 4].
console.log(c === a); // false

De drie punten leggen de elementen van a uit binnen een nieuwe arrayliteral. Als je ze weglaat, heeft dat een ander effect: [a] maakt een array met één element, namelijk de volledige array a. [...a] bevat de elementen van a afzonderlijk.

Combineer en voeg in

[...[1, 2], ...[3, 4]] geeft [1, 2, 3, 4], net als [1, 2].concat([3, 4]). [...first, 99, ...second] plaatst één extra element tussen twee lijsten. [...list, "new"] maakt een verlengde array, terwijl list.push("new") de bestaande array wijzigt. Spreadsyntaxis behoudt de volgorde van de elementen van elke invoer.

Herken een oppervlakkige kopie

const grid = [[1, 2], [3, 4]];
const copy = [...grid];
copy[0].push(9);
// grid[0] and copy[0] are both [1, 2, 9].

De buitenste arrays verschillen, maar hun rijelementen verwijzen nog steeds naar dezelfde binnenste arrays. Dit is een oppervlakkige kopie. Als je copy[0] vervangt door een nieuwe rij, verandert alleen de gekopieerde buitenste array; als je de bestaande rij wijzigt, verandert de gedeelde rij. structuredClone(grid) maakt een onafhankelijke diepe kopie van deze geneste arrays.

Spreid waarden uit in een aanroep

Math.max(...[3, 9, 4]) geeft drie afzonderlijke argumenten door en geeft 9 terug. Als je de array rechtstreeks doorgeeft, geeft Math.max([3, 9, 4]) één array door en levert NaN op. Lege spreadsyntaxis geeft Math.max(...[]) === -Infinity en Math.min(...[]) === Infinity.

Zeer grote arrays kunnen de argumentenlimiet van een engine overschrijden wanneer je ze in een aanroep uitspreidt. Er is geen universeel veilig aantal elementen. Gebruik een lus of reduce om een uiterste waarde voor grote invoer te vinden. Spreadsyntaxis in een arrayliteral maakt geen lijst met functieargumenten.

Spreid strings uit en werk kopieën bij

[..."hello"] levert vijf strings met elk één letter op. Spreadsyntaxis voor strings bezoekt Unicode-codepunten: [..."a😀"] heeft twee elementen, terwijl "a😀".split("") drie UTF-16-code-eenheden heeft. Sommige zichtbare symbolen combineren meerdere codepunten, dus levert uitspreiden geen algemene telling van zichtbare tekens op. Een getal is niet itereerbaar; [...5] geeft een TypeError.

In een parameterlijst gebruikt function total(...nums) restsyntaxis om argumenten in een array te verzamelen. Spreadsyntaxis in een aanroep doet het omgekeerde: die geeft afzonderlijke argumenten door.

Voor bijwerkingen op basis van kopieën geeft [10, 20, 30].with(1, 25) de waarde [10, 25, 30] en geeft .toSpliced(1, 1) de waarde [10, 30]. Ook toSorted en toReversed behouden de bronarray. Dit zijn oppervlakkige kopieën, dus geldt dezelfde regel voor het delen van binnenste arrays.