JavaScript-objecten en JSON

Een object groepeert samenhangende waarden onder namen. Elke eigenschap koppelt een sleutel aan een waarde. Gebruik één object voor een record en een array van objecten voor een geordende lijst. Parallelle arrays kunnen hun onderlinge samenhang verliezen als er maar één wordt gesorteerd of gewijzigd.

Maak en lees een record

const book = { title: "Dune", pages: 412, available: true };
book.title;    // "Dune"
book["title"]; // "Dune"

Eigenschapswaarden kunnen behalve primitieve waarden ook arrays, objecten of functies zijn. Sleutels zijn strings of symbolen; deze voorbeelden gebruiken strings. Stringsleutels die geldige identifiers zijn, hebben geen aanhalingstekens nodig. Sleutels met spaties of koppeltekens hebben die wel nodig: { "release-year": 1965 }. Numerieke sleutels worden strings, dus { 1: "a" } heeft de sleutel "1". Objectliterals staan een komma aan het einde toe.

Puntnotatie gebruikt de letterlijke naam na de punt. Blokhaaknotatie evalueert een expressie:

const field = "pages";
book[field]; // 412
book.field;  // undefined

De tweede expressie zoekt naar een eigenschap met de naam "field". Blokhaken zijn ook geschikt voor book["release-year"]. Een ontbrekende eigenschap geeft undefined terug; als je via die waarde verder leest, zoals in book.author.name, wordt een TypeError opgeworpen als author ontbreekt.

Wijzig de inhoud van het object

book.author = "Frank Herbert";
book.pages = 896;
delete book.available;

Een toewijzing voegt een ontbrekende eigenschap toe of vervangt een bestaande waarde. Verwijderen haalt de eigenschap zelf weg, dus "available" in book is nu onwaar. const houdt de variabele gekoppeld aan dit object, maar staat wijzigingen in de inhoud toe.

Voor const reading = { city: "Nairobi", tempC: 24.5 }; slaat reading.tempC += 1.5; de waarde 26 op. Daarna voegt reading.humidity = 61; een veld toe. Met const key = "humidity"; leest reading[key] de waarde 61. Een naam zoals tempC maakt de eenheid van de meting zichtbaar.

Gebruik variabelen in een literal

const name = "Lena";
const age = 29;
const person = { name, age };
const lang = "nl";
const greeting = { [lang]: "Hallo" };

De verkorte eigenschapsnotatie { name, age } betekent hetzelfde als { name: name, age: age }. Bij een berekende eigenschapsnaam wordt de expressie tussen blokhaken geëvalueerd: greeting heeft de eigenschap "nl". Zonder die blokhaken zou { lang: "Hallo" } de letterlijke sleutel "lang" aanmaken.

Controleren of een veld bestaat is iets anders dan de waarde ervan controleren. Een lege string, nul of false kan een volkomen geldige opgeslagen waarde zijn.

Stel de juiste vraag over aanwezigheid

const item = { stock: 0, note: undefined };
Object.hasOwn(item, "stock"); // true
"note" in item;                // true
Boolean(item.stock);          // false

Object.hasOwn(obj, key) controleert alleen de eigen eigenschappen van het object. De operator in controleert ook overgeërfde eigenschappen: "toString" in {} is true, terwijl Object.hasOwn({}, "toString") gelijk is aan false. Oudere code roept vaak obj.hasOwnProperty(key) aan.

Een voorwaarde zoals if (item.stock) controleert of de waarde truthy is. Ze kan geen onderscheid maken tussen een ontbrekend veld en een aanwezig veld met de waarde nul. Hetzelfde probleem geldt voor "", false, null, undefined en NaN. Zelfs een waarde undefined kan bij een bestaande eigenschap horen, zoals bij note hierboven.

Kies sleutels, waarden of paren

Voor const scores = { Ana: 82, Ben: 74, Chen: 91 }; geven deze functies arrays terug van eigen opsombare eigenschappen met strings als sleutels:

Het object heeft geen lengte zoals een array: scores.length is undefined. Object.keys(scores).length telt drie eigenschappen. Om de scores op te tellen, reduceer je de waarden met nul als beginwaarde. De som is 247 en het gemiddelde is ongeveer 82,33.

Doorloop met beide onderdelen beschikbaar

let bestName;
let bestScore = -Infinity;
for (const [name, score] of Object.entries(scores)) {
  if (score > bestScore) {
    bestName = name;
    bestScore = score;
  }
}

De lus vergelijkt achtereenvolgens 82, 74 en 91 met de hoogste score tot dan toe. De lus eindigt met "Chen" en 91. Het patroon met blokhaken geeft namen aan de twee onderdelen van elk paar.

Een gewoon object is niet itereerbaar, dus for...of scores werpt een TypeError op. Object.entries(scores) levert een itereerbare array. De oudere for...in-lus levert stringsleutels op en kan overgeërfde opsombare eigenschappen bevatten.

Zet sleutel-waardeparen weer om in een object

const weightsG = { flour: 500, sugar: 250, salt: 5 };
const weightsKg = Object.fromEntries(
  Object.entries(weightsG).map(([item, g]) => [item, g / 1000])
);

entries levert paren op, map wijzigt elke waarde met behoud van de sleutel en fromEntries bouwt het record opnieuw op. Het resultaat is { flour: 0.5, sugar: 0.25, salt: 0.005 }; weightsG blijft ongewijzigd.

De volgorde van eigen eigenschappen ligt vast. Array-indexsleutels van "0" tot en met "4294967294" verschijnen eerst in oplopende volgorde; andere stringsleutels volgen de invoegvolgorde. Een voorloopnul, zoals in "01", voorkomt dat een sleutel een array-index is. Zo geeft Object.keys({ b: 1, 2: "x", a: 2, 1: "y" }) de array ["1", "2", "b", "a"]. Gebruik een array als posities betekenis hebben.

Twee variabelen kunnen naar één object verwijzen. Voordat je een wijziging voorspelt, bepaal je of de code een nieuw object heeft gemaakt of een referentie naar een bestaand object heeft gekopieerd.

Volg identiteit los van gegevens

const p1 = { x: 1 };
const p2 = p1;
p2.x = 99;
p1.x;       // 99
p1 === p2;  // true

De toewijzing heeft de referentie gekopieerd. Beide namen bereiken dezelfde eigenschap. Toewijzing van primitieve waarden werkt anders: na let a = 5; let b = a; b = 6; blijft a gelijk aan 5.

Objecten worden zowel met === als met == op identiteit vergeleken. Twee literals maken afzonderlijke objecten aan, ook als alle velden overeenkomen: ({ x: 1 } === { x: 1 }) is false. Om hun gegevens te vergelijken, vergelijk je de relevante eigenschappen. Een overeenkomstige weergave is geen controle op identiteit.

Als je een object aan een functie doorgeeft, wordt de referentie ook gekopieerd. Een functie die order.status = "shipped"; uitvoert, wijzigt het object van de aanroeper. Als de functie in plaats daarvan { ...order, status: "shipped" } teruggeeft, maakt ze een nieuw record op het hoogste niveau aan.

Onderscheid const, bevriezen en kopiëren

const cart = { items: 2 }; staat cart.items = 3; toe, maar de hertoewijzing cart = {}; werpt een TypeError op. Object.freeze(cart) blokkeert wijzigingen in de eigen eigenschappen. In strikte modus werpen pogingen om die toe te voegen, te verwijderen of te overschrijven een TypeError op.

Bevriezen is oppervlakkig. Als een bevroren record een ander object bevat, kunnen de velden van dat geneste object nog steeds veranderen. Een bevroren container en een diepgaand onveranderlijke structuur zijn verschillende dingen.

Volg een oppervlakkige kopie

const settings = { theme: "dark", font: { size: 14 } };
const copy = { ...settings };
copy.theme = "light";
copy.font.size = 18;

Spreadsyntaxis maakt een nieuw buitenste object. De waarde van theme wordt gekopieerd, dus als je copy.theme wijzigt, blijft settings.theme gelijk aan "dark". De waarde van font is een referentie die naar beide records wordt gekopieerd. Als je copy.font.size bijwerkt, wordt settings.font.size daarom ook 18.

Object.assign({}, settings) maakt ook een oppervlakkige kopie. Een oppervlakkige kopie maakt een afzonderlijk buitenste record, terwijl de identiteit van geneste objecten en arrays behouden blijft.

Kopieer geneste gegevens wanneer ze onafhankelijk moeten zijn

const deep = structuredClone(settings);
deep.font.size = 22;
settings.font.size; // 18

structuredClone kopieert geneste objecten en arrays, samen met ondersteunde waarden zoals Map, Set en Date. De functie verwerkt ook circulaire referenties. De nieuwe geneste font kan onafhankelijk veranderen. Functies kunnen niet op deze manier worden gekloond: een object met een methode veroorzaakt een DataCloneError.

Een heen-en-terugconversie via JSON, JSON.parse(JSON.stringify(obj)), kopieert alleen gegevens die geschikt zijn voor JSON. Eigenschappen met undefined of functies vallen weg, datums worden strings en sleutel-waardeparen van Map en waarden van Set gaan verloren tenzij je ze converteert. Kies een kloon voor onafhankelijke, ondersteunde JavaScript-gegevens en kies JSON als je een tekstweergave wilt maken.

Geneste gegevens combineren records en lijsten. Lees een pad stap voor stap en controleer of elke stap uitkomt bij een object, een array of een eindwaarde.

Lees en verwerk een lijst binnen een record

const order = {
  id: 1042,
  customer: { name: "Sara", city: "Lisbon" },
  items: [
    { product: "Tea", qty: 2, unitPrice: 4.5 },
    { product: "Mug", qty: 1, unitPrice: 9 }
  ]
};

order.customer.city leest "Lisbon". order.items[1].product selecteert eerst de array met items, dan het tweede record daarvan en vervolgens "Mug". order.items.length is 2.

De arraymethoden die je al kent, werken met eigenschappen van records. map(item => item.product) levert productnamen op. filter(item => item.qty > 1) behoudt de regel met thee. find(item => item.product === "Mug") geeft het bestaande record van de mok terug, dus als je dat teruggegeven record wijzigt, verandert het item in de bestelling.

Om het totaal te berekenen, gebruik je order.items.reduce((sum, item) => sum + item.qty * item.unitPrice, 0). De eerste regel telt 9 erbij op; de tweede telt er nog eens 9 bij op, wat 18 oplevert. Door een totaal te berekenen wanneer het nodig is, voorkom je dat een afzonderlijk opgeslagen totaal veroudert als items veranderen.

Lees optionele gegevens met een terugvaloptie

order.shipping?.date;                 // undefined
order.customer?.city ?? "unknown";    // "Lisbon"

Optionele ketenvorming, ?., stopt wanneer de waarde direct links ervan null of undefined is. Een directe order.shipping.date zou een TypeError opwerpen. Controleer elke optionele schakel in een langer pad. Blokhaaknotatie en aanroepen ondersteunen dit ook: order.items?.[0] en order.print?.().

Optionele ketenvorming is bedoeld voor waarden die mogen ontbreken. Verplichte velden hebben nog steeds controles of fouten nodig die een onjuist record zichtbaar maken. Optionele ketenvorming kan niet links van een toewijzing staan: order.shipping?.date = "2026-05-01" is een syntaxisfout.

De operator ?? voor terugval bij null of undefined gebruikt de rechterkant alleen bij null of undefined. De operator behoudt nul, false en "". Bij const qty = 0; blijft qty ?? 1 nul, terwijl qty || 1 de waarde 1 wordt omdat || elke falsy-waarde vervangt.

Kies een bruikbare structuur

Een array van records is geschikt om gegevens weer te geven, te filteren en te ordenen. Een object met ID's als sleutels maakt rechtstreeks opzoeken mogelijk: usersById["u23"].name. Een Map is nuttig wanneer opzoeksleutels vaak worden toegevoegd en verwijderd.

Nieuwer JavaScript biedt Object.groupBy, dat sinds 2024 breed beschikbaar is:

const tasks = [
  { title: "Book flights", status: "done" },
  { title: "Pack", status: "todo" },
  { title: "Renew passport", status: "done" }
];
const grouped = Object.groupBy(tasks, task => task.status);

grouped.done bevat twee records en grouped.todo bevat er één. Het resultaat heeft geen prototype en dus geen overgeërfde methode toString. Een ouder alternatief bouwt de arrays voor deze statussleutels expliciet op:

const groupedOlder = tasks.reduce((groups, task) => {
  if (!Object.hasOwn(groups, task.status)) {
    groups[task.status] = [];
  }
  groups[task.status].push(task);
  return groups;
}, {});

Het eerste record in elke groep maakt de bijbehorende array aan. Latere records worden aan diezelfde array toegevoegd. Deze accumulator is een gewoon object; het resultaat van de nieuwere methode heeft geen prototype. Gebruik consistente namen en waardetypen in alle records; namen zoals distanceKm en tempC houden ook eenheden zichtbaar.

Een methode is een eigenschap met een functie als waarde, die via een object wordt aangeroepen. Daarmee kan een actie de huidige gegevens van het record gebruiken.

Schrijf een methode met this

const counter = {
  count: 0,
  increment() {
    this.count += 1;
    return this.count;
  }
};
counter.increment(); // 1
counter.increment(); // 2

De verkorte notatie increment() { ... } definieert een eigenschap met een gewone functie als waarde. In counter.increment() wordt het ontvangende object counter de waarde van this. Elke aanroep leest de opgeslagen telling, telt er één bij op en geeft het nieuwe getal terug.

Een losse count selecteert een variabele, niet de eigenschap. Zonder bijbehorende variabele werpt count += 1 een ReferenceError op. Gebruik this.count om het veld van het ontvangende object te bereiken.

Lees een functie of voer die uit

counter.increment leest een waarde van het type "function". De haakjes in counter.increment() voeren de functie uit en geven de retourwaarde. Wanneer je een actie doorgeeft voor later gebruik, heeft de ontvangende code de functie nodig en niet het resultaat van een uitvoering op dat moment.

Ingebouwde methoden gebruiken deze aanroepvorm ook: Math.max(3, 7) geeft 7 terug en "abc".toUpperCase() geeft "ABC" terug.

Hergebruik een actie

function describe() {
  return this.name + " (" + this.year + ")";
}
const film = { name: "Up", year: 2009, describe };
const song = { name: "Hello", year: 2015, describe };

film.describe() geeft "Up (2009)" terug; song.describe() geeft "Hello (2015)" terug. Met this kan dezelfde functie beide ontvangende objecten lezen. Als je film.name vast in de code zou schrijven, zou je de functie aan de variabele film binden.

Geef het ontvangende object terug voor een volgende actie

const playlist = {
  tracks: [],
  add(title) { this.tracks.push(title); return this; },
  count() { return this.tracks.length; }
};
playlist.add("Rain").add("Waves").count(); // 2

Elke aanroep van add geeft de afspeellijst terug, zodat de volgende methode op dat object kan worden opgezocht. Als add een getal zou teruggeven, zou de keten breken omdat de volgende add op dat getal zou worden opgezocht.

Gewone JSON-conversie laat methoden weg: bij het omzetten van { name: "Kit", hi() { return 1; } } naar een string wordt alleen name geschreven. Ontleden kan weggelaten code niet herstellen. Records voor opslag of uitwisseling bevatten vaak gewone gegevens en gebruiken afzonderlijke verwerkingsfuncties.

Bij een gewone functie bepaalt de aanroep this. Een functie in een object opslaan verbindt die niet blijvend aan dat object.

Volg het ontvangende object bij de aanroep

const a = { n: "A", who() { return this.n; } };
const b = { n: "B" };
b.who = a.who;
a.who(); // "A"
b.who(); // "B"

Beide eigenschappen bevatten dezelfde functie. Het ontvangende object vóór de punt verschilt, dus verschillen de resultaten. De oorspronkelijke plaats van de functie bepaalt niet welk object de functie leest.

Bij een gewone aanroep, f(), levert de strikte modus undefined als this. JavaScript-modules worden altijd in strikte modus uitgevoerd; een script of functie kan ook beginnen met "use strict";. Een niet-strikte gewone functie die op deze manier wordt aangeroepen, gebruikt in plaats daarvan het globale object globalThis. In een browser is dat globale object window.

Herken de omringende context van een pijlfunctie

Een pijlfunctie heeft geen eigen this. Ze behoudt de this van de omringende code waar ze is gemaakt. Een objectliteral maakt geen nieuwe this-context aan.

// At the top level of a module:
const user = {
  name: "Ida",
  hi: () => "Hi, " + this.name
};

De aanroep user.hi() werpt een TypeError op: de pijlfunctie heeft de this van het hoogste niveau van de module vastgelegd, en die is undefined. Als je de aanroep op een methodeaanroep laat lijken, krijgt de pijlfunctie geen nieuw ontvangend object. Op het hoogste niveau van een klassiek script is de omringende this in plaats daarvan het globale object.

Gebruik een gewone methode wanneer de actie het aanroepende object nodig heeft. Gebruik een pijlfunctie binnen die methode wanneer een callback de context van de methode moet behouden:

const group = {
  title: "Team",
  members: ["Ana", "Ben"],
  list() {
    return this.members.map(m => this.title + ": " + m);
  }
};
group.list(); // ["Team: Ana", "Team: Ben"]

list krijgt group via de methodeaanroep. De pijlfunctie wordt binnen die uitgevoerde methode gemaakt en behoudt dezelfde this. Een strikte gewone callback zonder opgegeven ontvangend object zou undefined ontvangen, zodat this.title daar zou mislukken.

Gebruik een beslisvolgorde

Als je een aanroep tegenkomt, bepaal dan eerst welke functie wordt aangeroepen:

1. Een pijlfunctie behoudt de omringende this; call, apply en bind kunnen die niet vervangen.
2. Een gebonden gewone functie behoudt de gebonden this, ook bij gebruik van call of apply.
3. Een ongebonden gewone functie die met call of apply wordt aangeroepen, gebruikt de opgegeven this.
4. Een gewone aanroep obj.method() gebruikt obj.
5. Een gewone functieaanroep gebruikt undefined in strikte modus of het globale object in niet-strikte modus.

Callbacks kunnen een ontvangend object krijgen van de code die ze aanroept. Zo krijgt een gewone DOM-eventlistener die met addEventListener is geregistreerd, het element waarop die is geregistreerd als this. Bekijk hoe de ontvangende code een callback aanroept voordat je aanneemt dat het een gewone functieaanroep is.

Als je een methode uit haar object haalt, blijft de functie behouden, maar gaat de oorspronkelijke aanroepexpressie verloren. Een callback moet zo worden aangeroepen dat die het benodigde object krijgt.

Onderzoek een losgekoppelde methode

const counter = {
  count: 0,
  increment() {
    this.count += 1;
    return this.count;
  }
};
const inc = counter.increment;
inc(); // TypeError in strict mode

inc() is een gewone functieaanroep, dus is this gelijk aan undefined. Het lezen van this.count mislukt voordat de telling kan worden verhoogd. In niet-strikte code gebruikt een gewone aanroep het globale object en kan die in plaats daarvan een globale count beschrijven; de aanroep bereikt de teller niet.

Hetzelfde probleem doet zich voor bij arraycallbacks. [1, 2].map(counter.increment) geeft een functie aan map zonder het oorspronkelijke ontvangende object. De arraywaarden die als argumenten worden doorgegeven, leveren geen this.

Omhul de methodeaanroep

const results = [1, 2].map(() => counter.increment());
// results is [1, 2]; counter.count is 2

De callback is een pijlfunctie die een gewone aanroep counter.increment() uitvoert. Die aanroep heeft een ontvangend object. De omhullende functie negeert bewust de waarden die map doorgeeft; elke aanroep verhoogt de teller één keer. Deze vorm is handig wanneer de callback maar op één plaats nodig is.

Bind een herbruikbare functie

Begin met een nieuwe teller op nul:

const boundInc = counter.increment.bind(counter);
const results = [1, 2].map(boundInc);
// results is [1, 2]; counter.count is 2

bind geeft een nieuwe functie terug; de methode wordt nog niet aangeroepen. De nieuwe functie behoudt counter als ontvangend object. Als je de functie opnieuw aan een ander object bindt, kun je dat ontvangende object niet vervangen. Elke aanroep van bind maakt een afzonderlijke functie, dus bewaar het resultaat wanneer code later precies dezelfde callback moet herkennen.

Binden kan ook vooraanstaande argumenten vastleggen. Met function multiply(a, b) { return a * b; } gevolgd door const double = multiply.bind(null, 2); geeft double(21) de waarde 42 terug. null vult de positie voor het ontvangende object omdat deze functie geen this gebruikt; 2 vult de eerste gewone parameter.

Voer één keer uit met call of apply

function describe(unit) {
  return this.value + " " + unit;
}
describe.call({ value: 12 }, "kg");    // "12 kg"
describe.apply({ value: 12 }, ["kg"]); // "12 kg"

Beide vormen worden direct uitgevoerd met het gekozen ontvangende object. call geeft argumenten afzonderlijk door; apply geeft ze door in een array. De context van een pijlfunctie ligt vast door de omgeving, dus kunnen deze methoden de this van een pijlfunctie niet vervangen.

Als je counter.increment() als callback doorgeeft, wordt de methode direct uitgevoerd en het teruggegeven getal doorgegeven. Dat is niet de functie die map nodig heeft. Bij een eventregistratie zoals button.addEventListener("click", counter.increment()) verandert de teller direct en veroorzaakt de numerieke listener een TypeError. Geef een functiewaarde, een omhullende pijlfunctie of een opgeslagen gebonden functie door.

Met objectdestructurering lees je benoemde velden in lokale variabelen. Je selecteert waarden zonder het hele bronrecord te kopiëren.

Koppel en hernoem

const book = { title: "Dune", pages: 412 };
const { pages, title: bookTitle, rating: stars = 0 } = book;

De koppeling gebruikt eigenschapsnamen, niet hun volgorde. Hiermee wordt pages gedeclareerd met de waarde 412, bookTitle met "Dune" en stars met 0. Er wordt geen variabele title of rating gedeclareerd: de naam na een dubbele punt is de lokale doelvariabele.

Een ontbrekend veld levert undefined op. Een standaardwaarde vervangt alleen undefined en behoudt null, nul, false en lege strings. const { a = 5 } = { a: null }; laat a daarom op null staan.

Volg geneste velden

const data = {
  location: { name: "Oslo" },
  current: { tempC: -3, windKph: 18 }
};
const {
  location: { name },
  current: { tempC, windKph: wind }
} = data;

De gedeclareerde variabelen zijn name, tempC en wind, met de waarden "Oslo", -3 en 18. De omhullende namen location en current selecteren paden; ze worden niet ook variabelen.

Als een buitenste object ontbreekt, mislukt het lezen van een geneste waarde. const { shipping: { date } } = {}; werpt een TypeError op. Geef een standaardwaarde voor het buitenste niveau als dat veld undefined kan zijn:

const { shipping: { date } = {} } = {};
// date is undefined

Dit vervangt shipping niet als de waarde null is. Als je null of undefined rechtstreeks destructureert, wordt ook een fout opgeworpen, dus moet de bron bruikbaar zijn voordat het uitpakken begint.

Ontvang benoemde opties

function formatUser({ name, age = "unknown" }) {
  return name + ", " + age;
}

formatUser({ name: "Mo" }) geeft "Mo, unknown" terug. Als je de velden herschikt zoals in { age: 40, name: "Ines" }, krijg je nog steeds "Ines, 40" terug. Een aanroep van formatUser zonder argument mislukt omdat er geen object is om uit te pakken. Een standaardwaarde voor de hele parameter maakt die aanroep mogelijk:

function greet({ name = "guest" } = {}) {
  return "Hi, " + name;
}
greet(); // "Hi, guest"

De buitenste standaardwaarde vangt een weggelaten argument op; de binnenste vangt een ontbrekende naam op. Als je null doorgeeft, mislukt het nog steeds. Om waarden aan bestaande variabelen toe te wijzen, zet je een instructie met een objectpatroon tussen haakjes: let x, y; ({ x, y } = { x: 4, y: 7 });. Anders worden de eerste accolades gelezen als een instructieblok.

Arraydestructurering leest waarden op positie uit een itereerbare waarde. Komma's bepalen welke waarden worden geselecteerd; de variabelenamen kiezen de posities niet.

Selecteer of sla posities over

const medals = ["gold", "silver", "bronze"];
const [first, second] = medals;
const [, , third] = medals;

De variabelen krijgen "gold", "silver" en "bronze". Lege plaatsen nemen waarden in zonder variabelen te declareren. Een naam voorbij de beschikbare waarden krijgt undefined. Standaardwaarden vervangen alleen undefined:

const [p, q = 10] = [1]; // p is 1; q is 10
const [r = 10] = [null]; // r is null

Verzamel de overige waarden

const [head, ...tail] = [1, 2, 3, 4];
// head is 1; tail is [2, 3, 4]

Het laatste rest-element maakt een nieuwe array, die leeg is als er niets overblijft. Het moet als laatste staan. Eventuele objectwaarden in die array behouden hun identiteit; ze worden door het verzamelen niet diep gekloond.

Lees een teruggegeven paar of verwissel variabelen

function minMax(nums) {
  return [Math.min(...nums), Math.max(...nums)];
}
const [lo, hi] = minMax([4, 9, 1]);
// lo is 1; hi is 9

De aanroeper volgt de volgorde die de functie bij het teruggeven gebruikt. Bij veel resultaatvelden voorkomen benoemde objecteigenschappen dat je posities moet onthouden.

Met let x = 1, y = 2; verwisselt [x, y] = [y, x]; de variabelen. De array aan de rechterkant wordt vóór beide toewijzingen geëvalueerd als [2, 1], zodat beide oude waarden behouden blijven zonder tijdelijke variabele.

Pak andere itereerbare waarden uit

Strings en Sets kun je ook uitpakken: const [initial] = "Zoe"; geeft "Z". Sets leveren waarden in invoegvolgorde. Items van een Map zijn geordende paren:

const distances = new Map([["park", 2], ["lake", 5]]);
for (const [place, distanceKm] of distances) {
  console.log(place, distanceKm);
}

De lus ontvangt een paar, waarna het patroon de sleutel en waarde scheidt. Object.entries levert dezelfde paarstructuur.

Een gewoon object is niet itereerbaar, dus werpt const [name] = { name: "Ana" }; een TypeError op. Gebruik accolades om het benoemde veld te selecteren: const { name } = { name: "Ana" };. Blokhaken vereisen een reeks waarden; accolades selecteren eigenschappen op naam.

De drie punten, ..., hebben twee verwante taken. Spreadsyntaxis vouwt bestaande gegevens uit in een waarde of aanroep. Restsyntaxis verzamelt waarden in een variabele waar een patroon of parameter die declareert.

Voeg samen in volgorde van prioriteit

const defaults = { lang: "en", units: "metric", alerts: true };
const user = { lang: "pt", alerts: false };
const options = { ...defaults, ...user };
// { lang: "pt", units: "metric", alerts: false }

Spreadsyntaxis voor objecten kopieert eigen opsombare eigenschappen. Als een sleutel opnieuw voorkomt, krijgt de latere waarde voorrang. Als je user vóór defaults plaatst, worden de instellingen van de gebruiker overschreven. Als je null of undefined met spreadsyntaxis in een object opneemt, wordt niets toegevoegd.

Kopieën met spreadsyntaxis zijn oppervlakkig. Als een genest record verandert, kopieer dan ook dat niveau:

const settings = { theme: "dark", font: { size: 14, family: "serif" } };
const next = {
  ...settings,
  font: { ...settings.font, size: 18 }
};

De buitenste spreadsyntaxis behoudt theme. De binnenste behoudt family en vervangt size. settings.font.size blijft 14 omdat het gewijzigde geneste record nieuw is.

Vervang één record in een lijst

const todos = [{ id: 1, done: false }, { id: 2, done: false }];
const updated = todos.map(t =>
  t.id === 2 ? { ...t, done: true } : t
);

map maakt een nieuwe array. Het overeenkomende item wordt een nieuw object, dus is updated[1].done waar terwijl todos[1].done onwaar blijft. Het ongewijzigde eerste item wordt opnieuw gebruikt: updated[0] === todos[0] is waar. Voor onafhankelijke bijwerkingen hoef je ongewijzigde records niet te kopiëren.

Vouw itereerbare waarden uit

In een arrayliteral of functieaanroep haalt spreadsyntaxis waarden uit een itereerbare waarde. [...a, ...b] voegt de waarden samen in een nieuwe array. Math.max(...[4, 9, 1]) geeft drie argumenten door en geeft 9 terug. Een gewoon object kan niet in een array worden uitgevouwen: [...{ a: 1 }] werpt een TypeError op. Spreadsyntaxis voor objecten en voor itereerbare waarden gebruikt verschillende regels voor wat wordt gelezen.

Verzamel argumenten of resterende eigenschappen

function total(...nums) {
  return nums.reduce((sum, n) => sum + n, 0);
}
total(2, 3, 5); // 10
total();        // 0

Een restparameter ontvangt een echte array, ook als die geen waarden ontvangt. De restparameter moet de laatste parameter zijn en er kan er maar één zijn. Het oudere arguments-object is geen echte array. Pijlfuncties hebben geen eigen arguments, maar kunnen wel de binding van een omringende gewone functie lezen.

Restsyntaxis voor objecten verzamelt eigen opsombare eigenschappen die nog niet zijn geselecteerd:

const userRecord = { id: 8, name: "Rae", password: "x9!k" };
const { password, ...publicUser } = userRecord;
// publicUser is { id: 8, name: "Rae" }

Dit maakt een nieuw record en laat de bron ongewijzigd. De rest-eigenschap moet als laatste staan. Kijk naar de plaats om de taken te onderscheiden: drie punten in een literal of aanroep vouwen waarden uit; drie punten in een parameterlijst of destructureringsdoel verzamelen waarden.

Een Map slaat koppelingen tussen sleutels en waarden op. Anders dan de stringsleutels van een gewoon object kan een sleutel in een Map een getal, een object of een andere waarde zijn zonder in een string te worden omgezet.

Maak en beheer sleutel-waardeparen

const stock = new Map();
stock.set("apples", 12).set("pears", 7);
stock.get("apples"); // 12
stock.has("kiwis");  // false
stock.size;           // 2

set voegt een sleutel-waardepaar toe of vervangt de waarde ervan en geeft de Map terug om aanroepen aaneen te schakelen. get geeft undefined terug voor een ontbrekende sleutel; gebruik has om dat te onderscheiden van een sleutel-waardepaar waarin undefined is opgeslagen. delete(key) geeft terug of een sleutel-waardepaar is verwijderd en clear() maakt de verzameling leeg.

Blokhaaknotatie gebruikt een andere opslagplaats: stock["plums"] = 5; voegt een gewone eigenschap toe aan het Map-object. Er wordt geen sleutel-waardepaar aangemaakt dat zichtbaar is voor get, has of size. Gebruik de Map-methoden voor sleutel-waardeparen.

Behoud sleuteltypen en identiteit

m.set(1, "number"); m.set("1", "text"); maakt twee sleutel-waardeparen aan. In een gewoon object zouden de sleutels 1 en "1" naar één eigenschap verwijzen. Map-sleutels worden vergeleken zoals met ===, behalve dat NaN gelijk is aan zichzelf en positieve en negatieve nul dezelfde sleutel delen.

const person = { id: 1 };
const notes = new Map([[person, "ready"]]);
notes.get(person);      // "ready"
notes.get({ id: 1 });   // undefined

Bij de tweede opzoekactie wordt een nieuw object gemaakt. Overeenkomende velden maken dat niet tot dezelfde sleutel. Bewaar en hergebruik de oorspronkelijke objectreferentie wanneer je een object als sleutel gebruikt.

Doorloop en converteer paren

for (const [name, count] of stock) {
  console.log(name, count);
}

Een Map levert [key, value]-paren in de volgorde waarin de sleutels voor het eerst zijn toegevoegd. Als je een waarde vervangt, verplaatst de sleutel niet. keys(), values() en entries() geven itereerbare weergaven terug die je met een lus kunt doorlopen of met spreadsyntaxis in arrays kunt opnemen. forEach geeft aan zijn callback eerst de waarde en dan de sleutel door.

new Map(Object.entries(obj)) zet de sleutel-waardeparen van een record om in een Map. Object.fromEntries(map) maakt een object; gebruik dit wanneer sleutels strings zijn, omdat objectsleutels niet elk type Map-sleutel kunnen behouden. [...map] maakt een array van paren, handig om de sleutel-waardeparen van een Map als JSON op te slaan.

Tel wisselende sleutels

const words = "the cat saw the dog and the bird".split(" ");
const counts = new Map();
for (const word of words) {
  counts.set(word, (counts.get(word) ?? 0) + 1);
}

De eerste keer begint de telling bij nul en wordt er één opgeteld. Bij latere voorkomens wordt de opgeslagen telling gelezen en verhoogd. counts.get("the") is 3 en counts.size is 6: de grootte telt verschillende woorden, niet alle acht voorkomens.

Kies een gewoon object voor een record met bekende velden, vooral voor gegevens die geschikt zijn voor JSON. Kies een Map voor wisselende sleutels, frequente controles van de grootte of sleutels waarvan het type behouden moet blijven. De nieuwere methode Map.groupBy behoudt de typen groepssleutels:

const owner = { name: "Ari" };
const jobs = [{ owner, done: false }, { owner, done: true }];
const byOwner = Map.groupBy(jobs, job => job.owner);
byOwner.get(owner).length; // 2

Doorloop in oudere code de taken. Gebruik voor elke eigenaar has en set om eenmaal een groepsarray te maken en voeg daarna het record toe met get(owner).push(job). Door de eigenaar als objectsleutel te bewaren, onderscheid je verschillende eigenaars, ook als hun naamvelden overeenkomen. Een WeakMap kan metagegevens aan objecten koppelen zonder sleutelobjecten die verder onbereikbaar zijn in leven te houden. Een WeakMap heeft geen iteratie of grootte. Moderne WeakMaps accepteren ook niet-geregistreerde symbolen als sleutels.

Een Set slaat unieke waarden op. De belangrijkste vragen zijn of een waarde aanwezig is en hoe twee verzamelingen overlappen.

Voeg waarden toe en controleer ze

const tags = new Set(["js", "css", "js"]);
tags.size;       // 2
tags.add("html");
tags.has("css"); // true

Een bestaande waarde toevoegen verandert niets. add geeft de Set terug om aanroepen aaneen te schakelen. delete(value) geeft terug of de waarde is verwijderd, terwijl clear() alle waarden verwijdert. De constructor ontvangt één itereerbare waarde: gebruik new Set([1, 2, 3]). new Set(1, 2, 3) werpt een TypeError op omdat de eerste invoer niet itereerbaar is. Een string is itereerbaar, dus bevat new Set("hello") de waarden "h", "e", "l" en "o".

Een Set heeft geen posities met indexen. tags[0] is undefined. Doorloop de Set met for...of, roep forEach aan of converteer naar een array voor bewerkingen zoals map en filter. Iteratie volgt de invoegvolgorde; als je een waarde verwijdert en opnieuw toevoegt, komt die achteraan te staan.

Verwijder dubbele waarden zonder te sorteren

const unique = [...new Set([3, 1, 3, 2, 1])];
// [3, 1, 2]

De Set behoudt het eerste voorkomen van elke waarde. Met spreadsyntaxis komen die waarden in een array terecht. Array.from(set) voert dezelfde conversie uit.

Waarden worden vergeleken zoals met ===, behalve dat NaN gelijk is aan zichzelf; positieve en negatieve nul tellen als één waarde. Objectwaarden worden op identiteit vergeleken: new Set([{ id: 1 }, { id: 1 }]).size is 2. Om één record per ID te bewaren, bouw je een Map met die ID als sleutel en lees je vervolgens de waarden. Latere records met dezelfde ID vervangen eerdere records, omdat set een bestaand sleutel-waardepaar bijwerkt.

Voor herhaalde aanwezigheidscontroles in grote verzamelingen voorkomt een Set dat includes een array één voor één moet doorzoeken. Gebruik een Set wanneer aanwezigheid belangrijker is dan positie.

Vergelijk twee verzamelingen

Nieuwere Set-methoden zijn vanaf 2024 beschikbaar in de grote browsers. Met a met de waarden 1, 2, 3, 4 en b met de waarden 3, 4, 5:

Deze methoden geven nieuwe Sets terug. isSubsetOf controleert of elke waarde in de andere verzameling zit. isSupersetOf controleert de omgekeerde insluiting. isDisjointFrom controleert of de verzamelingen geen waarden delen. Alle drie geven booleaanse waarden terug. Zo is new Set([3, 4]).isSubsetOf(a) waar. Verschil heeft een richting: waarden in b maar niet in a zouden alleen 5 zijn.

In een oudere omgeving kun je een doorsnede schrijven als new Set([...a].filter(x => b.has(x))).

Het gewone JSON.stringify(set) levert "{}" op, waarbij de opgeslagen waarden verloren gaan. Converteer naar een array voordat je JSON schrijft en gebruik vervolgens new Set(parsedArray) bij het lezen. Een WeakSet kan objecten als verwerkt markeren zonder verder onbereikbare objecten in leven te houden. Een WeakSet kan niet worden doorlopen. Moderne WeakSets accepteren ook niet-geregistreerde symbolen.

JSON, een afkorting van JavaScript Object Notation, is een taalonafhankelijk tekstformaat voor gestructureerde gegevens. Een object is een actieve JavaScript-waarde; JSON is tekst die zo'n waarde kan beschrijven.

Herken de zes soorten waarden

JSON ondersteunt objecten, arrays, strings, getallen, booleaanse waarden en null. Elk daarvan kan de waarde op het hoogste niveau zijn. De tekst 42 is geldige JSON, ook zonder accolades. JSON heeft geen weergave voor functies, undefined, datums als afzonderlijk type, Map, Set, NaN of Infinity.

{
  "name": "Amara",
  "age": 34,
  "languages": ["en", "yo"],
  "address": null,
  "member": true
}

Dezelfde structurele ideeën komen voor in JavaScript-literals, maar de toegestane schrijfwijze is strikter. JSON wordt gebruikt in configuraties en voor gegevensuitwisseling. Uitgewisselde JSON gebruikt UTF-8-codering en het mediatype application/json; JSON-bestanden gebruiken de extensie .json.

Pas de syntaxisregels toe

Elke objectsleutel moet een string tussen dubbele aanhalingstekens zijn. Strings vereisen ook dubbele aanhalingstekens. Komma's scheiden eigenschappen of arrayitems, maar na het laatste item mag geen komma staan. Commentaar is verboden. Witruimte tussen waarden en leestekens is toegestaan.

Getallen gebruiken decimale notatie. 1.5e3, -0.25 en 0 zijn geldig. 07, +1 en 0x1F zijn ongeldig omdat JSON voorloopnullen, een plusteken aan het begin en hexadecimale notatie verbiedt.

Gebruik escapesequenties voor tekens in strings

Gebruik \" voor een dubbel aanhalingsteken, \\ voor een backslash, \n voor een nieuwe regel en \t voor een tab binnen een JSON-string. Een letterlijk regeleinde mag niet binnen een JSON-string voorkomen. Laat JSON.stringify escapesequenties genereren uit werkelijke stringwaarden, zodat aanhalingstekens in de tekst de uitvoer niet ongeldig kunnen maken.

Een Unicode-escapesequentie bestaat uit een backslash, de letter u en vier hexadecimale cijfers voor één UTF-16-code-eenheid. Zo staat \u00e9 voor é. Een teken buiten dat bereik kan twee van zulke escapesequenties nodig hebben; het kan ook rechtstreeks in de string worden geschreven. De aanhalingstekens rond JSON-tekst in JavaScript-broncode vormen een afzonderlijke laag ten opzichte van de aanhalingstekens binnen de JSON zelf.

Behoud identifiers en voorkom dubbele sleutels

JavaScript-getallen behouden elk geheel getal in het veilige bereik van -9.007.199.254.740.991 tot en met 9.007.199.254.740.991. Buiten dat bereik blijven sommige gehele getallen exact en worden andere afgerond. Het ontleden van '{"id":9007199254740993}' geeft een id-waarde van 9007199254740992. Sla lange identifiers op als JSON-strings wanneer de exacte cijfers van belang zijn.

Objectsleutels moeten binnen elk JSON-object uniek zijn. De JavaScript-functie JSON.parse bewaart het laatste voorkomen als een sleutel wordt herhaald: het ontleden van '{"a":1,"a":2}' levert { a: 2 } op. Afzonderlijke eigenschappen zijn niet uit die herhaalde naam te herstellen.

JSON.stringify converteert ondersteunde JavaScript-waarden naar JSON-tekst. Bepaal wat de tekst moet behouden voordat je een record met methoden of verzamelingswaarden converteert.

Schrijf compacte of ingesprongen tekst

const person = { name: "Amara", age: 34, tags: ["admin"] };
const text = JSON.stringify(person);
// '{"name":"Amara","age":34,"tags":["admin"]}'

Het resultaat is een string, dus is typeof text gelijk aan "string". Eigen opsombare eigenschappen met strings als sleutels worden geschreven in de volgorde van Object.keys. JSON.stringify(person, null, 2) voegt regeleinden en twee spaties inspringing per niveau toe. Het tweede argument is null omdat er geen vervangingsargument wordt gebruikt. Numerieke inspringing is begrensd op 10 spaties; van een string voor inspringing worden hoogstens de eerste 10 tekens gebruikt.

Voorspel welke waarden wegvallen en veranderen

const data = {
  a: undefined,
  b: () => 1,
  c: NaN,
  d: [undefined, Infinity]
};
JSON.stringify(data); // '{"c":null,"d":[null,null]}'

Een objecteigenschap met undefined, een functie of een symbool wordt weggelaten. In een array wordt zo'n waarde null, zodat die positie behouden blijft. NaN en Infinity worden op beide plaatsen null. Op het hoogste niveau zorgen niet-ondersteunde waarden zoals undefined of een functie ervoor dat stringify de waarde undefined teruggeeft, geen JSON-tekst.

Een Date schrijft via toJSON zijn ISO-string in UTC. Gewone items van Map en Set worden niet geschreven, dus wordt elk van beide verzamelingen {}. Converteer Set-waarden naar een array en Map-items naar paren of een object met stringsleutels voordat je ze schrijft.

Een circulaire referentie en een gewone BigInt zoals 10n veroorzaken een TypeError. Gedeelde referenties die geen cyclus vormen, kunnen worden geserialiseerd, maar JSON behoudt hun gedeelde identiteit niet.

Kies gegevens met een vervangingsargument

const user = { name: "Rae", email: "rae@example.com", password: "x9!k", age: 31 };
JSON.stringify(user, ["name", "email"]);
// '{"name":"Rae","email":"rae@example.com"}'

Een array als vervangingsargument selecteert eigenschapsnamen. Een functie als vervangingsargument transformeert waarden wanneer ze worden bezocht, te beginnen met de hele invoer onder de sleutel "":

JSON.stringify(user, (key, value) =>
  key === "password" ? undefined : value
);

Als de functie undefined teruggeeft, wordt een objecteigenschap weggelaten, wordt een arraypositie null of is het totale resultaat undefined wanneer de functie dit voor de hoofdwaarde teruggeeft. Geef voor gegevens die je wilt behouden de ongewijzigde waarde terug.

De methode toJSON() van een object kan de weergave ervan kiezen. Voor { celsius: 21, toJSON() { return { c: this.celsius }; } } schrijft omzetting naar een string '{"c":21}'.

Bouw JSON niet zelf op door strings tussen aanhalingstekens samen te voegen: aanhalingstekens of regeleinden in de inhoud kunnen de syntaxis ongeldig maken. Zet ook niet al geserialiseerde tekst om in een string met de verwachting een objectweergave te krijgen. Als je '{"a":1}' omzet in een JSON-string, wordt een string gecodeerd; als je dat resultaat één keer ontleedt, krijg je een string terug en geen object.

JSON.parse leest JSON-tekst en geeft de waarde terug die de tekst beschrijft. Ontleden controleert de syntaxis van de tekst; controleren of het resultaat bij je programma past, is een afzonderlijke taak.

Lees de waarde en bekijk daarna de velden

const data = JSON.parse('{"city":"Lima","tempC":19.5}');
data.tempC + 1; // 20.5

De buitenste enkele aanhalingstekens begrenzen een JavaScript-string. De dubbele aanhalingstekens daarin horen bij JSON. Ontleden maakt een gewoon object met een numerieke eigenschap tempC. Tekst die een array beschrijft, levert een array op; primitieve JSON-teksten leveren de bijbehorende primitieve waarden op.

Gegevens die al een object zijn, hoef je niet te ontleden. JSON.parse({ a: 1 }) zet dat argument eerst om in "[object Object]" en werpt dan een SyntaxError op. JSON.parse(undefined) mislukt ook omdat "undefined" geen geldige JSON-tekst is.

Handel ongeldige tekst af

function safeParse(text, fallback) {
  try {
    return JSON.parse(text);
  } catch (error) {
    return fallback;
  }
}
safeParse("{ok:true}", null); // null

Ongeldige invoer, waaronder een lege string, JSON-strings met enkele aanhalingstekens, sleutels zonder aanhalingstekens en komma's aan het einde, werpt een SyntaxError op. Door die fout op te vangen, geef je het programma een bewuste terugvaloptie in plaats van het te stoppen. Een succesvol ontlede null is ook mogelijk, dus kies hoe de aanroeper een terugvalwaarde van geldige gegevens kan onderscheiden als dat verschil van belang is.

Herstel geselecteerde waarden met een herstelcallback

Een datum die als tekst is opgeslagen, komt terug als string. Een array van sleutel-waardeparen blijft een array totdat new Map(pairs) die omzet in een Map. Functies die bij het schrijven zijn weggelaten, kunnen niet uit de resterende tekst worden hersteld.

const text = '{"title":"Dentist","due":"2026-03-01T09:00:00.000Z"}';
const event = JSON.parse(text, (key, value) =>
  key === "due" ? new Date(value) : value
);

De herstelcallback bezoekt binnenste waarden vóór hun containers en eindigt met het hele resultaat onder sleutel "". Een teruggegeven waarde vervangt de huidige waarde. Als de callback undefined teruggeeft, wordt die eigenschap verwijderd; als de callback dit voor de hoofdwaarde teruggeeft, wordt het hele ontleedresultaat undefined. Als je voor andere sleutels return value vergeet, kun je dus de gegevens wissen die je wilde behouden.

Controleer de structuur en plan een heen-en-terugconversie

Geldige JSON kan nog steeds de verkeerde typen bevatten. Het ontleden van '{"temp":"19"}' laat een string over, dus zou data.temp + 1 samenvoegen tot "191". Controleer verplichte velden en typen, bijvoorbeeld met typeof data?.temp === "number", voordat je gaat rekenen. Converteer alleen met Number wanneer het bedoelde formaat een numerieke string toestaat; optionele ketenvorming en ?? kunnen velden opvangen die mogen ontbreken.

Voor const settings = { theme: "dark", volume: 0.8, recent: ["a.txt"] }; levert omzetting naar een string 48 tekens JSON-tekst op. Ontleden herstelt dezelfde veldgegevens, maar loaded === settings is onwaar omdat ontleden nieuwe objecten maakt. Een Date komt terug als string, een objecteigenschap met undefined verdwijnt en een niet-geconverteerde Set komt terug als {}. Converteer speciale waarden vóór het schrijven en herstel hun bedoelde typen na het lezen.