Deep Copy in JavaScript: Die 5 besten Methoden für 2024

Einleitung: Warum funktioniert normales Kopieren nicht?

Stell dir vor: Du entwickelst eine App, die eine komplexe Benutzerkonfiguration verarbeitet. Du schreibst const newConfig = oldConfig, änderst ein paar Felder – und plötzlich ändert sich auch das Originalobjekt. Kommt dir bekannt vor? 👋

In JavaScript werden Objekte als Referenz übergeben. Das bedeutet, dass eine einfache Zuweisung kein neues Objekt erstellt, sondern nur einen Zeiger auf das alte kopiert. Daher die Frage, die tausende Entwickler auf Stack Overflow quält: "What is the most efficient way to deep clone an object in JavaScript?".

In diesem Artikel zeigen wir dir alle gängigen Methoden für Deep Copy, ihre Vor- und Nachteile sowie ihre Performance. Du erfährst, welche Methode du 2024 wählen solltest und wie du deinen eigenen zuverlässigen Deep Clone schreibst.

Warum sprechen wir überhaupt über Deep Copy?

Deep Copy (tiefes Kopieren) erstellt eine vollständig unabhängige Kopie eines Objekts mit allen verschachtelten Strukturen. Im Gegensatz zu Shallow Copy (flaches Kopieren), bei dem verschachtelte Objekte gemeinsam genutzt werden.

Hier sind typische Szenarien, in denen du Deep Copy brauchst:

\n
• Arbeit mit Redux / Zustand: Der State darf nicht mutiert werden, du musst Kopien erstellen.
\n
• Datenserialisierung für den Versand an einen Server.
\n
• Arbeit mit Caches oder Konfigurationen, die nicht verändert werden dürfen.
\n
• Unit-Tests: Um die Originaldaten nicht zu beeinflussen.
\n

Aber so einfach ist es nicht. Wenn du versuchst, ein Objekt mit Funktionen, undefined, Symbol oder zirkulären Referenzen zu kopieren – viele Methoden scheitern oder verlieren Daten. Lass uns jede Methode im Detail durchgehen.

Methode 1: JSON.parse(JSON.stringify(obj)) – alt, aber bewährt

Dies ist die beliebteste Methode unter Anfängern. Sie ist einfach und schnell geschrieben:

const original = {\n    name: "Anna",\n    age: 25,\n    address: { city: "Berlin", zip: 10115 },\n    hobbies: ["Lesen", "Laufen"]\n};\n\nconst clone = JSON.parse(JSON.stringify(original));\n\nclone.address.city = "München";\nconsole.log(original.address.city); // "Berlin" – ✅ Kopie ist unabhängig!\n

Vorteile:

\n
• 🔥 Sehr einfache Syntax.
\n
• 🔥 Funktioniert für die meisten einfachen Fälle.
\n

Nachteile (kritisch!):

\n
• ❌ Verliert Funktionen – sie werden zu undefined.
\n
• ❌ Verliert undefined – Felder mit dem Wert undefined verschwinden.
\n
• ❌ Verliert Symbol – Symbol-Schlüssel gehen verloren.
\n
• ❌ Funktioniert nicht mit zirkulären Referenzen – wirft einen TypeError.
\n
• ❌ Probleme mit Datum – Date wird zu einem String.
\n
• ❌ Probleme mit Map, Set, RegExp – sie werden zu leeren Objekten.
\n

Fazit: Nur geeignet für Daten, die garantiert in JSON serialisierbar sind (Strings, Zahlen, Arrays, einfache Objekte).

Methode 2: Structured Clone API – moderner Standard (2024)

Seit 2022 gibt es in JavaScript eine native Methode für Deep Copy – structuredClone. Sie ist in allen modernen Browsern und Node.js 17+ verfügbar.

const clone = structuredClone(original);\n\nclone.address.city = "Köln";\nconsole.log(original.address.city); // "Berlin" – ✅\n

Was structuredClone kann:

\n
• ✅ Zirkuläre Referenzen – funktioniert!
\n
• ✅ Datum – behält den Typ Date.
\n
• ✅ Map und Set – werden korrekt kopiert.
\n
• ✅ RegExp – funktioniert ebenfalls.
\n
• ✅ ArrayBuffer und Ty