Geschrieben von

Quick Tipp: Objekte in JS ohne Referenz kopieren

WebDev

Wenn man in JavaScript ein vorhandenes Objekt mit einer neuer Variable deklariert und damit eine Kopie erstellen möchte, dann wird das Objekt im Grunde nur referenziert. Ein Beispiel:

var a = {
  "name": "Demir",
  "clothes": "T-Shirt"
};

Erstellt man nun eine neue Variable und weist dieser das Objekt “a” zu, dann hat man eine Referenz erstellt:

var b = a;

Beide Variablen würden nun folgendes zurückgeben:

{
  "name": "Demir",
  "clothes": "T-Shirt"
}

Wenn ich nun für das Objekt “b” den Wert einer Property ändere…

b.clothes = 'Jeans';

…bekomme ich als Ergebnis in Objekt “b”:

{
  "name": "Demir",
  "clothes": "Jeans"
}

Und in Objekt “a” ebenfalls das selbe Ergebnis:

{
  "name": "Demir",
  "clothes": "Jeans"
}

Der Grund ist, dass “var b = a;” eine Referenz darstellt und keine Kopie. Wie also das eigentliche Objekt kopieren und nicht nur eine Referenz erstellen?

Es gibt verschiedene Möglichkeiten. Die erste besteht darin den Spread-Operator zu nutzen:

var a = {
  "name": "Demir",
  "clothes": "T-Shirt"
};
 
var b = {...a};

Wenn ich nun eine Property von “b” ändere, hat das keine Auswirkungen auf das Objekt “a”:

b.clothes = 'Jeans';
 
// a gibt aus:
{
  "name": "Demir",
  "clothes": "T-Shirt"
}
 
// b gibt aus:
{
  "name": "Demir",
  "clothes": "Jeans"
}

Die andere Möglichkeit ist der Einsatz von JSON.parse(JSON.stringify(obj)). Damit wird das Objekt zunächst in einen String umgewandelt und dann wieder zurück in ein Objekt, wodurch die Referenzierungen verloren gehen. Die Syntax wäre wie folgt:

var a = {
  "name": "Demir",
  "clothes": "T-Shirt"
};
 
var b = JSON.parse(JSON.stringify(a));