Objekte in JavaScript klonen: Wie man den Code nicht kaputt macht

Einleitung: Warum einfache Zuweisung eine Falle ist?

Stellen Sie sich vor, Sie schreiben eine Notizen-App. Der Benutzer erstellt eine Karte mit Titel und Text und möchte dann eine Kopie davon erstellen, um sie ein wenig zu ändern. Sie schreiben:

const original = { title: 'Mein Plan', text: 'Milch kaufen' };\nconst copy = original;\ncopy.title = 'Neuer Plan';\nconsole.log(original.title); // 'Neuer Plan' — oh!

Kommt Ihnen die Situation bekannt vor? Wenn ja, dann sind Sie auf die Haupteigenschaft von Objekten in JavaScript gestoßen: Sie werden als Referenz übergeben. Die Zuweisung copy = original erzeugt kein neues Objekt, sondern kopiert nur die Referenz auf denselben Speicherbereich. Jede Änderung an copy wirkt sich auf original aus.

Auf Stack Overflow hat die Frage "How do I correctly clone a JavaScript object?" Tausende von Aufrufen und Dutzende von Antworten gesammelt. Dies ist eines der häufigsten Probleme bei Anfängern und sogar erfahrenen Entwicklern. In diesem Artikel werden wir alle Methoden zum Klonen von Objekten in JavaScript durchgehen, von einfach bis fortgeschritten, und herausfinden, welcher Ansatz in welcher Situation am besten geeignet ist.

Flache Kopie (Shallow copy): Schnell und einfach

Eine flache Kopie erstellt ein neues Objekt, kopiert aber für verschachtelte Objekte (Arrays, andere Objekte) nur die Referenzen. Dies ist ideal für flache Strukturen, aber gefährlich für tiefe.

Methode 1: Spread-Operator (…)

Die modernste und lesbarste Methode:

const original = { name: 'Anna', age: 25 };\nconst clone = { ...original };\nclone.age = 30;\nconsole.log(original.age); // 25 — alles in Ordnung!

Vorteile: Kurze Schreibweise, funktioniert mit Arrays und Objekten. Nachteile: Kopiert keine Methoden (Funktionen) und Symbol-Eigenschaften.

Methode 2: Object.assign()

Die klassische Methode zum Kopieren eines Objekts ohne Referenzen auf der obersten Ebene:

const source = { a: 1, b: { c: 2 } };\nconst target = Object.assign({}, source);\ntarget.a = 100; // source.a ändert sich nicht\ntarget.b.c = 999; // source.b.c ändert sich ebenfalls — shallow!

Diese Methode ist besonders nützlich, wenn Sie mehrere Objekte zusammenführen müssen: Object.assign({}, obj1, obj2).

Methode 3: for…in-Schleife

Eine alte, aber immer noch funktionierende Methode. Nützlich zum Verständnis der Mechanik:

function shallowClone(obj) {\n  const clone = {};\n  for (let key in obj) {\n    if (obj.hasOwnProperty(key)) {\n      clone[key] = obj[key];\n    }\n  }\n  return clone;\n}

Heute wird sie selten verwendet, aber sie zeigt hervorragend, wie das manuelle Klonen von Objekten funktioniert.

Tiefe Kopie (Deep copy): Wenn alles nötig ist

Wenn Ihr Objekt verschachtelte Objekte, Arrays oder Daten enthält, reicht eine flache Kopie nicht aus. Sie benötigen tiefes Klonen js.

Methode 4: JSON.parse + JSON.stringify

Der beliebteste „Workaround":

const original = { \n  name: 'Peter', \n  address: { city: 'Moskau', street: 'Twerskaja' },\n  date: new Date()\n};\nconst clone = JSON.parse(JSON.stringify(original));\nclone.address.city = 'SPb';\nconsole.log(original.address.city); // 'Moskau' — hurra!

Es gibt jedoch Nuancen: Diese Methode verliert Funktionen, undefined, Symbol, und Date wird in einen String umgewandelt. Für einfache Daten okay, für komplexe nicht.

Methode 5: structuredClone() — der neue Standard

Seit 2022 gibt es in JavaScript die eingebaute Methode structuredClone:

const original = { \n  scores: [10, 20, 30], \n  meta: { level: 'easy' },\n  date: new Date()\n};\nconst clone = structuredClone(original);\nclone.meta.level = 'hard';\nconsole.log(original.meta.level); // 'easy'

Vorteile: Unterstützt Date, Map, Set, ArrayBuffer, rekursive Referenzen. Nachteile: Unterstützt keine Funktionen, DOM-Elemente, Error. Funktioniert