Shallow Copy vs. Deep Copy in JavaScript

JavaScript führt Kopieroperationen auf zwei Arten aus, abhängig vom Datentyp.

Primitive Werte (Kopieren nach Wert)

Zu den primitiven Typen gehören Strings, Numbers, Booleans, Symbols, BigInt und null. Wenn Sie einen primitiven Wert kopieren, erstellt JavaScript eine neue, unabhängige Version im Speicher.

Beispiel: let a = 10; let b = a; b = 20; Ergebnis: a bleibt 10.

Nicht-primitive Werte (Kopieren nach Referenz)

Objekte und Arrays funktionieren anders. Sie verwenden Referenzen. Wenn Sie ein Objekt kopieren, kopieren Sie nur den Zeiger auf dessen Speicherort.

Beispiel: let original = { name: "YOO" }; let copy = original; copy.name = "NEW"; Ergebnis: original.name ist jetzt "NEW".

Der Unterschied: Shallow vs. Deep

Eine Shallow Copy kopiert die oberste Ebene eines Objekts. Wenn das Objekt verschachtelte Objekte enthält, verweist sie weiterhin auf die ursprünglichen verschachtelten Referenzen. Eine Deep Copy erstellt ein völlig neues Objekt mit allen neuen Werten.

Stellen Sie es sich wie eine Pizza vor:

• Shallow Copy: Sie und ein Freund teilen sich eine Pizza. Wenn Ihr Freund ein Stück isst, wird die Pizza auch für Sie kleiner.
• Deep Copy: Sie beide haben Ihre eigenen, getrennten Pizzas. Wenn Ihr Freund ein Stück isst, bleibt Ihre Pizza unverändert.

Shallow-Copy-Methode

Sie können den Spread-Operator (...) verwenden, um eine Shallow Copy zu erstellen.

let original = { name: "YOO", details: { age: 22 } }; let copy = { ...original };

Warnung: Wenn Sie original.details.age ändern, ändert sich auch copy.details.age. Das ist die Shallow-Copy-Falle.

Deep-Copy-Methoden

1. structuredClone()

Dies ist eine integrierte Funktion in modernen Browsern und Node.js. Sie verarbeitet verschachtelte Strukturen perfekt.

Vorteile:

• Schnell und nativ.
• Verarbeitet Dates, RegExp und Maps.

Nachteile:

• Schlägt fehl, wenn das Objekt Funktionen oder DOM-Knoten enthält.

2. JSON.parse(JSON.stringify())

Dies ist ein alter Trick, bei dem Sie ein Objekt in einen String und wieder zurück in ein Objekt umwandeln.

Warum man es vermeiden sollte:

• Es verliert Daten wie undefined, Map, Set oder Infinity.
• Es kann bestimmte Werte beschädigen.

Quelle: https://dev.to/yogesh_992/shallow-copy-vs-deep-copy-in-java-script-explained-in-easiest-way-3dg5