structuredClone() is a built-in, engine-level deep-copy function available in every modern JavaScript runtime. It correctly handles types the old JSON round-trip trick could not, and closes out this section's coverage of copying strategies.
1structuredClone() | JavaScript Tutorial - In-Depth Guide Part 1
structuredClone() is a global function that performs a true, native deep copy of most JavaScript values, no library required.
const original = { user: { name: 'Al', tags: ['a', 'b'] } };
const clone = structuredClone(original);
clone.user.name = 'Bo';
original.user.name; // still 'Al'Native Deep Clone
2structuredClone() | JavaScript Tutorial - In-Depth Guide Part 2
Unlike the JSON round-trip trick, structuredClone() correctly preserves Dates, Maps, Sets, RegExps, and typed arrays as their proper types.
const clone = structuredClone({ when: new Date(), tags: new Set(['a']) });
clone.when instanceof Date; // true
clone.tags instanceof Set; // truePreserves Real Types
3structuredClone() | JavaScript Tutorial - In-Depth Guide Part 3
structuredClone() correctly handles circular references without throwing, unlike JSON.stringify which errors immediately.
const a = { name: 'a' };
a.self = a; // circular reference
const clone = structuredClone(a); // works fine
clone.self === clone; // trueHandles Circular Refs
4structuredClone() | JavaScript Tutorial - In-Depth Guide Part 4
structuredClone() cannot clone functions, DOM nodes, or Error objects with full fidelity, and it throws a DataCloneError if you try.
structuredClone({ fn: () => {} }); // throws DataCloneErrorWhat It Can't Clone
5structuredClone() | JavaScript Tutorial - In-Depth Guide Part 5
structuredClone() also does not preserve custom class prototypes — a cloned class instance becomes a plain object with the same own properties.
class Point { distance() {} }
const p = new Point();
const clone = structuredClone(p);
clone instanceof Point; // falseLoses Class Prototypes
6Step-by-Step Breakdown
structuredClone() is a global function that performs a true, native deep copy of most JavaScript values, no library required.
Unlike the JSON round-trip trick, structuredClone() correctly preserves Dates, Maps, Sets, RegExps, and typed arrays as their proper types.
Checkpoint: Does structuredClone() preserve a cloned Date as an actual Date instance?
- →Yes, unlike the JSON round-trip trick
- →No, it converts it to a string like JSON.stringify does
structuredClone() correctly handles circular references without throwing, unlike JSON.stringify which errors immediately.
structuredClone() cannot clone functions, DOM nodes, or Error objects with full fidelity, and it throws a DataCloneError if you try.
Checkpoint: What happens if you call structuredClone() on an object containing a function?
- →It throws a DataCloneError
- →It silently omits the function, like JSON.stringify
structuredClone() also does not preserve custom class prototypes — a cloned class instance becomes a plain object with the same own properties.
Next, we'll explore 'Array.prototype.reduce() Deep Dive'.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Use structuredClone() for Reliable Undo Snapshots in Accessible Editors
Because structuredClone() correctly preserves Dates and other structured data used in document metadata, it produces more reliable undo/redo snapshots for accessible editing tools than the lossy JSON round-trip trick would.
SEO Implications
- 1
No Direct SEO Effect
structuredClone() is a runtime data utility; its SEO relevance is limited to preventing data-corruption bugs in server-side data processing.
Best Practices
Prefer structuredClone() Over the JSON Round-Trip Trick
It is native, correctly typed, handles circular references, and is available in all modern JS runtimes without needing a library — there is rarely a reason to still use JSON.parse(JSON.stringify(x)) for deep cloning.
Fall Back to Object.assign() or a Manual Clone When Class Identity Must Survive
If cloned data needs to remain an instance of its original class (with working methods), structuredClone() alone is not enough since it discards prototypes.
Frequent Bugs
Calling structuredClone() on a Redux/state object that happens to contain a function (like a memoized selector cached on the object) and getting an unexpected DataCloneError crash.
Ensure the data passed to structuredClone() contains only clonable types — strip out functions before cloning, or avoid storing functions inside state objects in the first place.
Cloning a class instance with structuredClone() and then calling one of its methods, only to get a TypeError because the clone is a plain object without the prototype.
Use Object.assign(new MyClass(), structuredClone(instance)) or a custom clone method on the class if the copy needs to remain a real instance.
Real-World Examples
Passing Complex Data to a Web Worker
An app needed to send a large, deeply nested dataset (including Dates and Maps) to a Web Worker for background processing.
worker.postMessage(structuredClone(largeDataset));
// postMessage uses the same structured clone algorithm internally