structuredClone for Deep Copies
Clone complex objects safely.
structuredClone for Deep Copies is a free JavaScript Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 4 lessons in total.
The Deep Copy Problem
Spread and Object.assign make shallow copies: nested objects are shared by reference. To fully duplicate a nested structure you need a deep copy.
structuredClone is the built-in answer.
Why Spread Is Not Enough
A spread copy shares nested objects. Mutating the nested part of the copy also affects the original.
const original = { user: { name: 'Ada' } };
const shallow = { ...original };
shallow.user.name = 'Grace';
console.log(original.user.name);structuredClone to the Rescue
structuredClone recursively copies the entire structure. Changes to the clone never touch the original.
const original = { user: { name: 'Ada' } };
const deep = structuredClone(original);
deep.user.name = 'Grace';
console.log(original.user.name);
console.log(deep.user.name);Independent Nested Objects
After cloning, each nested object is a distinct reference, so identity comparison is false at every level.
const original = { a: { b: { c: 1 } } };
const clone = structuredClone(original);
console.log(original === clone);
console.log(original.a === clone.a);
console.log(original.a.b === clone.a.b);Cloning Arrays
Arrays, including nested ones, clone deeply too. Pushing into a nested array of the clone leaves the source unchanged.
const original = { tags: ['a', 'b'], meta: { nested: [1] } };
const clone = structuredClone(original);
clone.meta.nested.push(2);
console.log(original.meta.nested);
console.log(clone.meta.nested);Handles Maps and Sets
Unlike JSON.parse(JSON.stringify(...)), structuredClone supports many built-in types including Map, Set, and Date.
const original = { items: new Set([1, 2, 3]), when: new Date(0) };
const clone = structuredClone(original);
clone.items.add(4);
console.log([...original.items]);
console.log([...clone.items]);
console.log(clone.when instanceof Date);Handles Circular References
A self-referencing object breaks the JSON trick but clones fine with structuredClone.
const node = { name: 'root' };
node.self = node;
const clone = structuredClone(node);
console.log(clone.name);
console.log(clone.self === clone);What It Cannot Clone
structuredClone cannot copy functions or DOM nodes; it throws a DataCloneError. It also drops prototype chains, returning plain objects.
try {
structuredClone({ fn: () => 1 });
} catch (e) {
console.log(e.name);
}Prototypes Are Not Preserved
A cloned class instance becomes a plain object: data is copied, but methods and the prototype are lost.
class Point {
constructor(x) { this.x = x; }
show() { return this.x; }
}
const p = new Point(5);
const clone = structuredClone(p);
console.log(clone.x);
console.log(clone instanceof Point);structuredClone vs JSON Trick
The old JSON.parse(JSON.stringify(x)) loses undefined, dates become strings, and it fails on cycles. structuredClone avoids these issues for serializable data.
const data = { when: new Date(0), missing: undefined, n: 5 };
const viaJson = JSON.parse(JSON.stringify(data));
const viaClone = structuredClone(data);
console.log(typeof viaJson.when);
console.log(viaClone.when instanceof Date);Why It Matters
structuredClone gives a reliable, built-in deep copy for plain data, replacing fragile hand-rolled clones. Use it when you need a fully independent copy of nested state, and remember it strips functions and prototypes.
const state = { list: [{ id: 1 }], settings: { theme: 'dark' } };
const snapshot = structuredClone(state);
snapshot.list[0].id = 99;
console.log(state.list[0].id);
console.log(snapshot.list[0].id);Quick Check
Why use structuredClone instead of the spread operator for nested data?
Recap: structuredClone
You learned reliable deep copying:
- Spread is shallow;
structuredClonecopies deeply. - It supports
Map,Set,Date, and circular references. - It cannot clone functions or DOM nodes and drops prototypes.
- It is a safer replacement for the
JSON.parse(JSON.stringify())trick.
Learn JavaScript with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 59
- Lessons
- 200
Frequently Asked Questions
Is the “structuredClone for Deep Copies” lesson free?
Yes — any 3 lessons of the JavaScript Academy learning path, including “structuredClone for Deep Copies”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 4 lessons in total.
What will I learn in “structuredClone for Deep Copies”?
Clone complex objects safely. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start JavaScript Academy?
No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.
How long does the “structuredClone for Deep Copies” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this JavaScript Academy lesson?
Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Object.freeze and seal
- Shallow vs Deep Freezing
- Immutable Update Patterns
- structuredClone for Deep Copies