DevPrep
  • Interview Prep
  • Projects
  • Resources
  • Pricing
  • About Us
Submit Question
DevPrep
  • Pricing
  • About Us
Submit Question
  1. Home
  2. Articles
  3. Frontend Engineering
  4. Structured Clone: Deep Copying Objects in Modern JavaScript
XLinkedInReddit
Frontend Engineering

Structured Clone: Deep Copying Objects in Modern JavaScript

D
DevPrep Team
February 10, 2026·2 min read·0
Table of Contents
  • The Old Way (and its problems)
  • structuredClone (Modern Way)
  • What structuredClone Supports
  • Circular References
  • Performance Comparison
  • When to Use What

structuredClone() is the modern, built-in way to deep copy objects. No more JSON.parse(JSON.stringify()) hacks.

The Old Way (and its problems)

// 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

structuredClone (Modern Way)

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

What structuredClone Supports

  • ✅ Nested objects and arrays
  • ✅ Date, RegExp, Blob, File
  • ✅ Map, Set
  • ✅ ArrayBuffer, TypedArrays
  • ✅ Circular references (!)
  • ❌ Functions (throws error)
  • ❌ DOM elements
  • ❌ Symbol properties (ignored)
  • ❌ Prototype chain (lost)
  • ❌ Property descriptors (getter/setter lost)

Circular References

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)

Performance Comparison

// 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!

When to Use What

  • Shallow copy: spread operator ({ ...obj })
  • Deep copy: structuredClone()
  • Copy with functions: manual implementation or lodash.cloneDeep
  • Immutable updates: Immer library

Related Articles

MediumFrontend Engineering

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

7 min read
MediumFrontend Engineering

Mastering Senior-Level JavaScript Interview Concepts

2 min read
MediumFrontend Engineering

System Design #9: Design a Collaborative Text Editor

9 min read

Comments (0)

Sign in to leave a comment.

No comments yet. Be the first to comment.

Table of Contents

  • The Old Way (and its problems)
  • structuredClone (Modern Way)
  • What structuredClone Supports
  • Circular References
  • Performance Comparison
  • When to Use What

Series

View all Frontend Engineering articles →

Practice

  • JavaScript
  • DSA
  • Machine Coding
  • System Design

Resources

  • Learning Tracks
  • Articles
  • Roadmaps
  • Compare Concepts
  • Glossary
  • Developer Tools
  • All Questions

Company

  • About
  • Pricing

Legal

  • Privacy Policy
  • Terms of Service
DevPrep

© 2026 DevPrep. All rights reserved.