JavaScript Structured Clone: Het Beheersen van Diepe Objectkopieën

In JavaScript is het maken van kopieën van objecten en arrays een veelvoorkomende taak. Hoewel een eenvoudige toewijzing (`=`) werkt voor primitieve waarden, creëert het alleen een referentie voor objecten. Dit betekent dat wijzigingen in het gekopieerde object ook het origineel beïnvloeden. Om onafhankelijke kopieën te maken, hebben we een mechanisme voor diep kopiëren nodig. Het 'structured clone'-algoritme biedt een krachtige en veelzijdige manier om dit te bereiken, vooral bij het omgaan met complexe datastructuren.

Wat is Structured Clone?

Het 'structured clone'-algoritme is een ingebouwd mechanisme in JavaScript waarmee u diepe kopieën van JavaScript-waarden kunt maken. In tegenstelling tot eenvoudige toewijzing of methoden voor oppervlakkig kopiëren (zoals `Object.assign()` of de spread-syntax `...`), creëert 'structured cloning' volledig nieuwe objecten en arrays, waarbij alle geneste eigenschappen recursief worden gekopieerd. Dit zorgt ervoor dat het gekopieerde object volledig onafhankelijk is van het origineel.

Dit algoritme wordt ook achter de schermen gebruikt voor communicatie tussen web workers en bij het opslaan van gegevens met de History API. Begrijpen hoe het werkt, kan u helpen uw code te optimaliseren en onverwacht gedrag te vermijden.

Hoe Structured Clone Werkt

Het 'structured clone'-algoritme werkt door de objectgraaf te doorlopen en nieuwe instanties te creëren van elk object en elke array die het tegenkomt. Het kan verschillende datatypen verwerken, waaronder:

• Primitieve typen (getallen, strings, booleans, null, undefined) - gekopieerd op waarde.
• Objecten en Arrays - recursief gekloond.
• Datums - gekloond als nieuwe Date-objecten met dezelfde tijdstempel.
• Reguliere Expressies - gekloond als nieuwe RegExp-objecten met hetzelfde patroon en vlaggen.
• Blobs en File-objecten - gekloond (maar kan het lezen van de volledige bestandsdata inhouden).
• ArrayBuffers en TypedArrays - gekloond door de onderliggende binaire data te kopiëren.
• Maps en Sets - recursief gekloond, waarbij nieuwe Maps en Sets worden gemaakt met gekloonde sleutels en waarden.

Het algoritme kan ook omgaan met circulaire verwijzingen, waardoor oneindige recursie wordt voorkomen.

Structured Clone Gebruiken

Hoewel er niet in alle JavaScript-omgevingen een directe `structuredClone()`-functie is (oudere browsers missen mogelijk native ondersteuning), wordt het onderliggende mechanisme in verschillende contexten gebruikt. Een veelgebruikte manier om er toegang toe te krijgen is via de `postMessage` API, die wordt gebruikt voor communicatie tussen web workers of iframes.

Methode 1: `postMessage` gebruiken (Aanbevolen voor brede compatibiliteit)

Deze aanpak maakt gebruik van de `postMessage` API, die intern het 'structured clone'-algoritme gebruikt. We creëren een tijdelijke iframe, sturen het object ernaartoe met `postMessage` en ontvangen het vervolgens terug.

            function structuredClone(obj) {
  return new Promise(resolve => {
    const { port1, port2 } = new MessageChannel();
    port1.onmessage = ev => resolve(ev.data);
    port2.postMessage(obj);
  });
}

// Voorbeeldgebruik
const originalObject = { 
  name: "John Doe",
  age: 30, 
  address: { city: "New York", country: "USA" }
};

async function deepCopyExample() {
  const clonedObject = await structuredClone(originalObject);

  console.log("Origineel Object:", originalObject);
  console.log("Gekloond Object:", clonedObject);

  // Wijzig het gekloonde object
  clonedObject.address.city = "Los Angeles";

  console.log("Origineel Object (na wijziging):", originalObject); // Onveranderd
  console.log("Gekloond Object (na wijziging):", clonedObject); // Gewijzigd
}

deepCopyExample();

            

              
                Copy
              
            
          

Deze methode is breed compatibel met verschillende browsers en omgevingen.

Methode 2: Native `structuredClone` (Moderne Omgevingen)

Veel moderne JavaScript-omgevingen bieden nu direct een ingebouwde `structuredClone()`-functie. Dit is de meest efficiënte en eenvoudige manier om een diepe kopie uit te voeren wanneer deze beschikbaar is.

            // Controleer of structuredClone wordt ondersteund
if (typeof structuredClone === 'function') {
  const originalObject = { 
    name: "Alice Smith",
    age: 25, 
    address: { city: "London", country: "UK" }
  };

  const clonedObject = structuredClone(originalObject);

  console.log("Origineel Object:", originalObject);
  console.log("Gekloond Object:", clonedObject);

  // Wijzig het gekloonde object
  clonedObject.address.city = "Paris";

  console.log("Origineel Object (na wijziging):", originalObject); // Onveranderd
  console.log("Gekloond Object (na wijziging):", clonedObject); // Gewijzigd
}
else {
  console.log("structuredClone wordt niet ondersteund in deze omgeving. Gebruik de postMessage polyfill.");
}

            

              
                Copy
              
            
          

Voordat u `structuredClone` gebruikt, is het belangrijk te controleren of het wordt ondersteund in de doelomgeving. Zo niet, val dan terug op de `postMessage` polyfill of een ander alternatief voor diep kopiëren.

Beperkingen van Structured Clone

Hoewel krachtig, heeft 'structured clone' enkele beperkingen:

• Functies: Functies kunnen niet worden gekloond. Als een object een functie bevat, gaat deze verloren tijdens het kloonproces. De eigenschap wordt ingesteld op `undefined` in het gekloonde object.
• DOM Nodes: DOM-nodes (zoals elementen op een webpagina) kunnen niet worden gekloond. Een poging om ze te klonen resulteert in een fout.
• Fouten: Bepaalde foutobjecten kunnen ook niet worden gekloond, en het 'structured clone'-algoritme kan een fout geven als het ze tegenkomt.
• Prototypeketens: De prototypeketen van objecten wordt niet behouden. Gekloonde objecten hebben `Object.prototype` als hun prototype.
• Prestaties: Diep kopiëren kan rekenkundig duur zijn, vooral voor grote en complexe objecten. Overweeg de prestatie-implicaties bij het gebruik van 'structured clone', met name in prestatie-kritische applicaties.

Wanneer Structured Clone te Gebruiken

Structured clone is waardevol in verschillende scenario's:

• Web Workers: Bij het doorgeven van data tussen de hoofdthread en web workers is 'structured clone' het primaire mechanisme.
• History API: De `history.pushState()`- en `history.replaceState()`-methoden gebruiken 'structured clone' om gegevens op te slaan in de browsergeschiedenis.
• Diep Kopiëren van Objecten: Wanneer u een volledig onafhankelijke kopie van een object moet maken, biedt 'structured clone' een betrouwbare oplossing. Dit is vooral handig als u de kopie wilt wijzigen zonder het origineel te beïnvloeden.
• Serialisatie en Deserialisatie: Hoewel dit niet het primaire doel is, kan 'structured clone' worden gebruikt als een basisvorm van serialisatie en deserialisatie (hoewel JSON meestal de voorkeur heeft voor persistentie).

Alternatieven voor Structured Clone

Als 'structured clone' niet geschikt is voor uw behoeften (bijv. vanwege de beperkingen of prestatie-overwegingen), overweeg dan deze alternatieven:

• JSON.parse(JSON.stringify(obj)): Dit is een veelgebruikte aanpak voor diep kopiëren, maar het heeft beperkingen. Het werkt alleen voor objecten die naar JSON geserialiseerd kunnen worden (geen functies, Datums worden omgezet in strings, etc.) en kan langzamer zijn dan 'structured clone' voor complexe objecten.
• Lodash's `_.cloneDeep()`: Lodash biedt een robuuste `cloneDeep()`-functie die veel randgevallen afhandelt en goede prestaties biedt. Het is een goede optie als u Lodash al in uw project gebruikt.
• Aangepaste Functie voor Diep Kopiëren: U kunt uw eigen functie voor diep kopiëren schrijven met behulp van recursie. Dit geeft u volledige controle over het kloonproces, maar het vergt meer inspanning en kan foutgevoelig zijn. Zorg ervoor dat u circulaire verwijzingen correct afhandelt.

Praktische Voorbeelden en Gebruiksscenario's

Voorbeeld 1: Gebruikersgegevens Kopiëren vóór Wijziging

Stel u voor dat u een applicatie voor gebruikersbeheer bouwt. Voordat u een gebruiker toestaat zijn profiel te bewerken, wilt u misschien een diepe kopie van zijn huidige gegevens maken. Dit stelt u in staat om terug te keren naar de oorspronkelijke gegevens als de gebruiker de bewerking annuleert of als er een fout optreedt tijdens het updateproces.

            let userData = {
  id: 12345,
  name: "Carlos Rodriguez",
  email: "carlos.rodriguez@example.com",
  preferences: {
    language: "es",
    theme: "dark"
  }
};

async function editUser(newPreferences) {
  // Maak een diepe kopie van de originele data
  const originalUserData = await structuredClone(userData);

  try {
    // Werk de gebruikersgegevens bij met de nieuwe voorkeuren
    userData.preferences = newPreferences;

    // ... Sla de bijgewerkte gegevens op de server op ...

    console.log("Gebruikersgegevens succesvol bijgewerkt!");
  } catch (error) {
    console.error("Fout bij het bijwerken van gebruikersgegevens. Terugkeren naar originele data.", error);
    // Terugkeren naar de originele data
    userData = originalUserData;
  }
}

// Voorbeeldgebruik
editUser({ language: "en", theme: "light" });

            

              
                Copy
              
            
          

Voorbeeld 2: Gegevens naar een Web Worker Sturen

Web workers stellen u in staat om rekenintensieve taken in een aparte thread uit te voeren, waardoor de hoofdthread niet vastloopt. Bij het verzenden van gegevens naar een web worker moet u 'structured clone' gebruiken om ervoor te zorgen dat de gegevens correct worden overgedragen.

            // Hoofdthread
const worker = new Worker('worker.js');

let dataToSend = {
  numbers: [1, 2, 3, 4, 5],
  text: "Verwerk deze data in de worker."
};

worker.postMessage(dataToSend);

worker.onmessage = (event) => {
  console.log("Ontvangen van worker:", event.data);
};

// worker.js (Web Worker)
self.onmessage = (event) => {
  const data = event.data;
  console.log("Worker heeft data ontvangen:", data);

  // ... Voer enige verwerking uit op de data ...
  const processedData = data.numbers.map(n => n * 2);

  self.postMessage(processedData);
};

            

              
                Copy
              
            
          

Best Practices voor het Gebruik van Structured Clone

• Begrijp de Beperkingen: Wees u bewust van de datatypen die niet kunnen worden gekloond (functies, DOM-nodes, etc.) en ga hier op de juiste manier mee om.
• Houd Rekening met Prestaties: Voor grote en complexe objecten kan 'structured clone' traag zijn. Evalueer of dit de meest efficiënte oplossing is voor uw behoeften.
• Controleer op Ondersteuning: Als u de native `structuredClone()`-functie gebruikt, controleer dan of deze wordt ondersteund in de doelomgeving. Gebruik indien nodig een polyfill.
• Ga om met Circulaire Verwijzingen: Het 'structured clone'-algoritme kan omgaan met circulaire verwijzingen, maar wees u ervan bewust in uw datastructuren.
• Vermijd het Klonen van Onnodige Gegevens: Kloon alleen de gegevens die u daadwerkelijk moet kopiëren. Vermijd het klonen van grote objecten of arrays als slechts een klein deel ervan moet worden gewijzigd.

Conclusie

Het JavaScript 'structured clone'-algoritme is een krachtig hulpmiddel voor het maken van diepe kopieën van objecten en arrays. Door de mogelijkheden en beperkingen ervan te begrijpen, kunt u het effectief gebruiken in verschillende scenario's, van communicatie met web workers tot het diep kopiëren van objecten. Door de alternatieven te overwegen en best practices te volgen, kunt u ervoor zorgen dat u de meest geschikte methode voor uw specifieke behoeften gebruikt.

Onthoud dat u altijd rekening moet houden met de prestatie-implicaties en de juiste aanpak moet kiezen op basis van de complexiteit en grootte van uw gegevens. Door 'structured clone' en andere technieken voor diep kopiëren te beheersen, kunt u robuustere en efficiëntere JavaScript-code schrijven.

Verder Leren

• MDN Web Docs: Structured clone algorithm
• MDN Web Docs: structuredClone
• MDN Web Docs: Worker.postMessage()