JavaScript Academy · Lesson

structuredClone for Deep Copies

Clone complex objects safely.

structuredClone for Deep Copies is a free JavaScript Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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; structuredClone copies 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.

Frequently asked questions

Is the “structuredClone for Deep Copies” lesson free?

Yes — the full text of “structuredClone for Deep Copies” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

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

← Back to JavaScript Academy