Structured Clone: Deep Copying Objects in Modern JavaScript

Structured Clone: Deep Copying Objects in Modern JavaScript | DevPrep

// JSON round-trip — the classic hack
const copy = JSON.parse(JSON.stringify(original));

// Problems:
// ❌ Drops undefined values
// ❌ Drops functions
// ❌ Drops Symbol properties
// ❌ Converts Date to string
// ❌ Converts Map/Set to empty object
// ❌ Throws on circular references
// ❌ Loses prototype chain

const original = {
  name: "Rahul",
  date: new Date(),
  nested: { deep: { value: 42 } },
  set: new Set([1, 2, 3]),
  map: new Map([["key", "value"]]),
  array: [1, [2, [3]]],
  regex: /hello/gi,
  blob: new Blob(["data"]),
};

const clone = structuredClone(original);

// ✅ Deep copy — no shared references
clone.nested.deep.value = 99;
console.log(original.nested.deep.value); // Still 42

// ✅ Preserves types
clone.date instanceof Date;  // true
clone.set instanceof Set;    // true
clone.map instanceof Map;    // true
clone.regex instanceof RegExp; // true

const obj = { name: "circular" };
obj.self = obj; // Circular reference!

// JSON.stringify throws!
JSON.parse(JSON.stringify(obj)); // TypeError!

// structuredClone handles it
const clone = structuredClone(obj); // Works!
clone.self === clone; // true (circular preserved)

// For 10,000 copies of a medium object:
// structuredClone:  ~150ms
// JSON round-trip:  ~200ms
// lodash.cloneDeep: ~250ms
// Spread (shallow): ~5ms

// structuredClone is fastest for deep copies!

Structured Clone: Deep Copying Objects in Modern JavaScript

Related Articles

System Design #12: Design a Multi-Step Form Wizard

Mastering Senior-Level JavaScript Interview Concepts

System Design #9: Design a Collaborative Text Editor

Comments (0)

The Old Way (and its problems)

structuredClone (Modern Way)

What structuredClone Supports

Circular References

Performance Comparison

When to Use What