No Login Data Private Local Save

structuredClone() Playground - Online Deep Copy Tester

Developer Tools Educational deep copy JavaScript playground structuredClone
54
0
0
0

structuredClone() Playground

Interactive deep copy tester — write any JavaScript object, clone it, and verify true deep cloning in real time.

Supported in all modern browsers
or press Ctrl+Enter
Original Object before clone 
// Run structuredClone() to see the original object here
Cloned Object deep copy 
// Run structuredClone() to see the cloned object here
Mutation Verification Test — We modify the cloned object to prove the original is untouched
Run the clone operation to see verification results
Fully Supported Types
TypeSupportNotes
Primitives (string, number, boolean, null, undefined, bigint)Fully preserved
Plain Objects & ArraysDeeply cloned
DatePreserved as Date instance
RegExpPreserved as RegExp instance
Map & SetDeeply cloned with entries
ArrayBuffer & TypedArraysBinary data preserved
Blob & FilePreserved
ImageDataPixel data cloned
Circular ReferencesHandled natively
NaN, Infinity, -InfinityPreserved (unlike JSON)
Not Supported / Limitations
TypeSupportNotes
FunctionsThrows DataCloneError
SymbolsThrows DataCloneError
DOM NodesThrows DataCloneError
WeakMap & WeakSetThrows DataCloneError
Prototype ChainNot preserved; plain Object only
Error.stackError objects clone but lose stack
Class InstancesLose prototype, become plain objects
structuredClone() vs JSON.parse(JSON.stringify()) vs Shallow Copy
Feature structuredClone() JSON methods Spread / Object.assign
Deep Copy Shallow only
Circular References Throws error
Date objects Becomes string Shared ref
RegExp Becomes {} Shared ref
Map / Set Not supported Shared ref
undefined values Preserved Removed Preserved
NaN / Infinity Preserved → null Preserved
ArrayBuffer Shared ref
Blob / File Shared ref
Frequently Asked Questions
What is structuredClone() and when should I use it?
structuredClone() is a built-in browser API that creates a deep copy of a JavaScript value — including nested objects, arrays, and many special types like Date, Map, Set, RegExp, ArrayBuffer, and more. It handles circular references gracefully. Use it whenever you need a true independent copy of complex data structures, such as cloning state in state management, duplicating data before mutation, or transferring data between workers. It's more robust than JSON.parse(JSON.stringify()) and safer than manual shallow copying with spread operators.
How does structuredClone() handle circular references?
structuredClone() natively supports circular references. When an object references itself (directly or indirectly), the algorithm tracks visited nodes and correctly recreates the circular structure in the cloned object. This is a major advantage over JSON.parse(JSON.stringify()), which throws a TypeError: Converting circular structure to JSON error. Try the "Circular Reference" preset above to see it in action.
What types CANNOT be cloned by structuredClone()?
structuredClone() cannot clone: Functions, Symbols, DOM nodes, WeakMap, WeakSet, and certain Web API objects like Window or MutationObserver. If your object graph contains any of these, a DataCloneError will be thrown. Additionally, prototype chains are not preserved — cloned class instances become plain objects. Error objects clone but lose their stack property.
structuredClone() vs JSON.parse(JSON.stringify()) — which is better?
structuredClone() is superior for most use cases. It supports more types (Date, RegExp, Map, Set, ArrayBuffer, Blob), preserves undefined and NaN values, handles circular references, and is generally faster for complex objects. JSON methods are still useful when you need cross-environment serialization (e.g., sending data over HTTP) or when you intentionally want to strip functions and prototypes. For pure in-memory deep cloning in the browser, structuredClone() is the recommended approach.
What is the browser compatibility of structuredClone()?
structuredClone() is supported in all modern browsers: Chrome 98+, Firefox 94+, Safari 15.4+, Edge 98+, and Opera 84+. It's also available in Deno and Node.js 17+. For older browsers, you can use a polyfill like @ungap/structured-clone. Check caniuse.com/structured-clone for the latest compatibility data.
Does structuredClone() preserve the prototype chain of my objects?
No. structuredClone() uses the structured clone algorithm, which creates plain objects and arrays. The prototype chain is not preserved — the cloned object's prototype will be Object.prototype. If you clone an instance of a custom class, the clone will be a plain object without the class's methods. If you need prototype preservation, consider a custom deep clone implementation or a library like Lodash's _.cloneDeep().
What is the 'transfer' option in structuredClone()?
The second parameter of structuredClone(value, { transfer: [...] }) allows you to transfer ownership of ArrayBuffer objects (and similar transferable types) to the clone. After transfer, the original buffer becomes detached (length 0) and unusable. This is useful for zero-copy data transfer between workers. For basic deep cloning, you typically don't need this option — just call structuredClone(yourObject).
Is structuredClone() a synchronous or asynchronous operation?
structuredClone() is synchronous. It performs the entire deep copy operation immediately and returns the cloned value. There's no promise or callback involved. For very large objects, this may block the main thread briefly; in such cases, consider offloading the work to a Web Worker or using the transfer option to reduce copying overhead.
🔧 Related Tools