JavaScript structuredClone()

The Problem: Shallow Copy Shares References

The spread operator and Object.assign create shallow copies. Nested objects are still shared by reference:

const original = { name: "Alice", address: { city: "Karachi" } };
const copy = { ...original };

copy.address.city = "Lahore";

console.log(original.address.city); // "Lahore" 😱 — original mutated!

The top-level name is independent. But address points to the same object in memory — mutating it in the copy mutates the original.

The Old Workaround (and Why It's Broken)

For years, developers used JSON round-tripping as a deep-copy hack:

const copy = JSON.parse(JSON.stringify(original));

It works for plain objects and arrays. But it silently breaks on:

• Dates — become strings, lose Date methods.
• Functions — silently dropped.
• undefined — removed from objects and converted to null in arrays.
• Map, Set, RegExp — lost entirely.
• Circular references — throws TypeError: Converting circular structure to JSON.

Worse: the brokenness is silent. No error is thrown. The data just quietly changes shape.

The Solution: structuredClone()

const original = {
    name: "Alice",
    createdAt: new Date(),
    address: { city: "Karachi" },
    tags: ["admin", "user"]
};

const copy = structuredClone(original);

copy.address.city = "Lahore";

console.log(original.address.city); // "Karachi" ✅
console.log(copy.createdAt instanceof Date); // true ✅

One function call. True deep copy. No dependencies. No silent data corruption.

What structuredClone Can and Cannot Copy

Class instances are trickier: structuredClone copies the own properties but drops the prototype — the result is a plain object, not a class instance.

Real-World Use Case: State Snapshots

A common pattern — take a snapshot of state before mutating:

// State management pattern
const state = {
    user: { name: "Alice", prefs: { theme: "dark" } },
    cart: [{ id: 1, qty: 2 }]
};

// Before an undo-able action, take a snapshot
const snapshot = structuredClone(state);

// Mutate state
state.user.prefs.theme = "light";
state.cart.push({ id: 2, qty: 1 });

// Later, restore
state = structuredClone(snapshot);

This is cleaner and safer than spreading deeply nested objects, and it handles circular references (which many state shapes contain).