Tiefe Kopien in JavaScript mit structuredClone
Ein Spread `{...obj}` kopiert nur die oberste Ebene – verschachtelte Objekte teilen sich weiter denselben Speicher. structuredClone macht eine echte tiefe Kopie, eingebaut und ohne JSON-Umweg.
Ein häufiger, tückischer Bug: Du kopierst ein Objekt mit {...obj}, änderst die Kopie – und plötzlich ändert sich auch das Original. Der Grund: Spread kopiert nur eine Ebene tief. Verschachtelte Objekte und Arrays sind in beiden weiterhin dieselben.
Das Problem
const original = { name: 'Kel', adresse: { stadt: 'Berlin' } };
const kopie = { ...original };
kopie.adresse.stadt = 'Hamburg';
original.adresse.stadt; // "Hamburg" – aua, Original mitverändert!Die Lösung: structuredClone
structuredClone ist eingebaut (moderne Browser + Node ≥ 17) und kopiert rekursiv – jede Ebene bekommt eigene Objekte:
const kopie = structuredClone(original);
kopie.adresse.stadt = 'Hamburg';
original.adresse.stadt; // "Berlin" – Original bleibt unberührtAnders als der alte Trick JSON.parse(JSON.stringify(obj)) kann structuredClone auch Date, Map, Set und ArrayBuffer – und es verkraftet sogar zyklische Referenzen (ein Objekt, das auf sich selbst zeigt), an denen JSON scheitert.
Eine Grenze gibt es: Funktionen und Klassen-Instanzen (Prototyp-Ketten) lassen sich nicht klonen – dann wirft es einen DataCloneError. Für reine Daten – Formularzustände, API-Antworten, Konfigurationen – ist es aber die sauberste Wahl.
Faustregel: Willst du einen Zustand kopieren, um ihn gefahrlos zu verändern (etwa in React/Vuex), ist structuredClone das ehrlichste Werkzeug dafür.
Solche Fallstricke früh zu kennen spart später Stunden Fehlersuche. Wenn du eine solide gebaute Website brauchst: bymw.de.
Quellen
Du brauchst mehr als ein Snippet?
Ich entwickle Android-Apps in Kotlin und moderne Websites für Selbstständige und kleine Unternehmen — von der ersten Idee bis zum Release.
Projekt anfragen →Verwandte Snippets
Web Worker – rechnen, ohne die Oberfläche einzufrieren
JavaScript hat im Browser genau einen Faden für alles: Klicks, Animationen, Layout – und deine Rechenschleife. Dauert die zwei Sekunden, ist die Seite zwei Sekunden lang tot. Ein Worker nimmt die Arbeit auf einen eigenen Faden.
Formulare ohne Neuladen abschicken – FormData und fetch
Ein Formular per JavaScript abzuschicken heißt nicht, jedes Feld einzeln auszulesen. FormData nimmt das ganze Formular, fetch schickt es weg – inklusive Dateien, und mit einer Fehlermeldung, die der Besucher versteht.
CustomEvent – Bausteine, die sich gegenseitig Bescheid sagen, ohne sich zu kennen
Sobald zwei Teile einer Seite aufeinander reagieren sollen, landet man schnell bei globalen Variablen oder Funktionsaufrufen quer durchs Projekt. Eigene Events entkoppeln das – mit denselben Mitteln, die der Browser selbst benutzt.