Javascript Objekt wird immer überschrieben

[dedlfix]

Tach!

const objTableHeadings = {
  Title: '',
  Genre: '',
  Tags: ''
};

Dieses Objekt füge ich als Element einem Array zu arrData.push(objTableHeadings);

Anschließend füge ich dem Key 'Genre' einen Wert zu.

Genauer gesagt: Der hat schon einen Wert, du änderst ihn nur. Hinzufügen wäre, wenn der alte Wert erhalten bliebe, was nicht der Fall ist.

Ich füge dem Array ein weiteres Objekt als Element zu: arrData.push(objTableHeadings);

Wie bereits gesagt, du fügt das Objekt ein weiteres mal hinzu. Wenn du ein neues haben möchtest, musst du ein neues anlegen. Es kommt dabei darauf an, bis in welcher Tiefe es eine Kopie sein muss.

arrData.push({...objTableHeadings});

Das ist der einfachste Weg, eine Shallow Copy anzulegen. In deinem Beispiel sind die Eigenschaften alles Strings, also primitive Werte, die werden kopiert. Wenn es aber Objekte wären, würde lediglich eine weitere Referenz erstellt, die weiterhin auf das Original verweist.

Warum?

Das erklärt sich, wenn man die Hintergründe kennt, wie mit Variablen umgegangen wird. Eine Variable ist ein Container, in dem das System die Dinge verwaltet, die es dazu wissen muss. Primitive Werte steht direkt in diesem Container. Sie benötigen nur ein bis wenige Byte Speicherplatz und sind damit klein genug, direkt dort abgelegt zu werden. String können zwar länger sein, werden aber auch wie primitive Werte behandelt.

Objekte und Arrays sind keine primitiven Werte. Die eigentlichen Inhalte werden üblicherweise irgendwo in einem anderen Speicherbereich abgelegt. Im Variablencontainer kommt dann nur eine Referenz auf diese andere Speicherstelle zu liegen. Damit nicht unnötig Speicher verbraucht wird, ist es in den meisten Systemen so, dass lediglich die Referenzen weitergegeben werden, wenn man mit der Variable etwas anstellt. Sie zeigen ohne weitere Handlung also immer auf denselben Speicherbereich. Änderst du daran etwas, bekommst du diese Änderung natürlich auch über alle anderen Referenzen mit, die auf denselben Speicherbereich zeigen.

dedlfix.