{
    "slug": "js_structuredclone",
    "term": "structuredClone & Deep Copying",
    "category": "javascript",
    "difficulty": "intermediate",
    "short": "structuredClone() is the modern native way to deep clone JavaScript objects — replacing JSON.parse(JSON.stringify()) and lodash cloneDeep for most use cases.",
    "long": "Deep copying creates an independent copy of a nested object — mutations to the copy don't affect the original. Before structuredClone (2022): JSON roundtrip (loses undefined, functions, Dates become strings, no circular refs), Object.assign/spread (shallow only), lodash cloneDeep (dependency). structuredClone handles: Date, Map, Set, ArrayBuffer, RegExp, circular references. Does not handle: functions, DOM nodes, class instances (loses prototype). Available in all modern browsers and Node 17+.",
    "aliases": [
        "deep clone",
        "deep copy",
        "structuredClone",
        "JSON.parse JSON.stringify"
    ],
    "tags": [
        "javascript",
        "programming",
        "patterns"
    ],
    "misconception": "JSON.parse(JSON.stringify(obj)) is a reliable deep clone — it silently drops undefined values, converts Date to string, loses Map/Set, and throws on circular references.",
    "why_it_matters": "Accidental mutation of shared objects is a common JavaScript bug — shallow copies with spread operator look like deep copies but nested objects are still shared references.",
    "common_mistakes": [
        "Spread operator for nested objects: {...obj} — only shallow; nested objects are still shared.",
        "JSON roundtrip losing Date objects — Date becomes string, never comes back as Date.",
        "Not using structuredClone for state management — accidentally mutating shared state causes hard-to-trace bugs.",
        "structuredClone on objects with functions — functions are not cloneable; they are silently dropped."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "js_map_set",
        "js_proxy_reflect",
        "immutability"
    ],
    "prerequisites": [
        "js_closures",
        "js_array_methods",
        "js_spread_rest"
    ],
    "refs": [
        "https://developer.mozilla.org/en-US/docs/Web/API/structuredClone"
    ],
    "bad_code": "// JSON roundtrip — lossy:\nconst original = { date: new Date(), value: undefined, map: new Map() };\nconst clone = JSON.parse(JSON.stringify(original));\n// clone.date is a string, not Date\n// clone.value is gone (undefined dropped)\n// clone.map is {} (Map not supported)\n\n// Shallow copy mutation bug:\nconst state = { user: { name: 'Alice' } };\nconst copy = { ...state };\ncopy.user.name = 'Bob'; // ALSO mutates state.user.name!",
    "good_code": "// structuredClone — handles most types correctly:\nconst original = { date: new Date(), set: new Set([1,2,3]), arr: [1,[2,3]] };\nconst clone = structuredClone(original);\nclone.date; // Still a Date object ✓\nclone.set;  // Still a Set ✓\nclone.arr[1].push(4); // Does NOT affect original.arr ✓\n\n// For class instances, implement a clone method:\nclass Order {\n    clone(): Order {\n        return Object.assign(new Order(), structuredClone({ ...this }));\n    }\n}",
    "quick_fix": "Use structuredClone() for deep copying objects and arrays instead of JSON.parse(JSON.stringify()) — it handles Dates, RegExps, Maps, Sets, and circular references that JSON round-trips break",
    "severity": "low",
    "effort": "low",
    "created": "2026-03-15",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/js_structuredclone",
        "html_url": "https://codeclaritylab.com/glossary/js_structuredclone",
        "json_url": "https://codeclaritylab.com/glossary/js_structuredclone.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[structuredClone & Deep Copying](https://codeclaritylab.com/glossary/js_structuredclone) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/js_structuredclone"
            }
        }
    }
}