[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"article-structuredclone-deep-clone":32,"code:js:true:1fhyfvl":225,"code:js:true:j5ee5t":226,"code:js:true:181xsbl":227,"code:js:true:tpojax":228},[4,20],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Build. Learn. Ship.","Practical courses, engineering-grade articles and open-source tools for people who ship.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Structured paths, listening drills and spaced repetition that actually sticks.","amber-400","⌘",[13,15,29],"es",{"courses":17,"paths":17,"articles":18,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":17},2,{"id":33,"slug":34,"title":35,"subtitle":36,"excerpt":37,"coverUrl":38,"locale":13,"readingMinutes":39,"publishedAt":40,"viewCount":41,"likeCount":19,"commentCount":19,"author":42,"vertical":47,"topic":48,"tags":51,"_count":63,"playground":65,"body":67,"bodyMd":208,"seo":209,"translationGroupId":212,"thread":213,"assessments":215,"translations":221,"quiz":223},"019fe660-0596-7433-9dc2-0fc620be2d0f","structuredclone-deep-clone","You've been deep-cloning objects with a JSON hack. `structuredClone` does it right.",null,"JSON.parse(JSON.stringify(obj)) silently corrupts Dates, Maps, Sets, and undefined values. structuredClone is the native replacement — no library, no import, no surprises.","\u002Fmedia\u002Fcovers\u002Fstructuredclone-deep-clone.png",4,"2026-07-10T09:43:33.966Z",13,{"id":43,"name":44,"username":45,"avatarUrl":36,"headline":46},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":49,"name":50},"javascript","JavaScript",[52,54,57,60],{"slug":49,"name":53,"color":36},"Javascript",{"slug":55,"name":56,"color":36},"webdev","Webdev",{"slug":58,"name":59,"color":36},"frontend","Frontend",{"slug":61,"name":62,"color":36},"node","Node",{"assessments":64},1,{"slug":34,"title":66},"structuredClone vs spread vs JSON — deep clone playground",{"blocks":68,"version":64},[69,73,76,80,83,86,92,95,98,102,105,109,112,115,118,121,124,127,130,133,137,140,144,147,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193,196,199],{"id":70,"html":71,"type":72},"b1","\u003Cp>The \u003Ccode>JSON.parse(JSON.stringify(obj))\u003C\u002Fcode> incantation is in almost every codebase. It works often enough that most developers have reached for it without a second thought. No imports, no library, a deep clone in one line — memorable and good enough for a decade.\u003C\u002Fp>","paragraph",{"id":74,"html":75,"type":72},"b2","\u003Cp>"Good enough" is doing a lot of work in that sentence.\u003C\u002Fp>",{"id":77,"html":78,"text":78,"type":79,"level":31},"b3","What JSON serialization actually does to your data","heading",{"id":81,"html":82,"type":72},"b4","\u003Cp>\u003Ccode>JSON.stringify\u003C\u002Fcode> serializes a value to a text string. JSON has a limited type vocabulary: strings, numbers, booleans, null, arrays, and plain objects. Anything outside that set either gets transformed silently or dropped entirely.\u003C\u002Fp>",{"id":84,"html":85,"type":72},"b5","\u003Cp>Here's what happens when you round-trip a realistic object through JSON:\u003C\u002Fp>",{"id":87,"code":88,"type":89,"language":90,"highlight":91},"b6","const original = {\n  createdAt: new Date('2024-01-15'),\n  config: new Map([['theme', 'dark']]),\n  count: undefined,\n  tags: new Set(['css', 'js']),\n};\n\nconst cloned = JSON.parse(JSON.stringify(original));\n\nconsole.log(typeof cloned.createdAt);   \u002F\u002F \"string\" — not a Date\nconsole.log(cloned.config);             \u002F\u002F {} — not a Map\nconsole.log('count' in cloned);         \u002F\u002F false — undefined is dropped\nconsole.log(cloned.tags);              \u002F\u002F {} — not a Set","code","js",[],{"id":93,"html":94,"type":72},"b7","\u003Cp>The clone exists, but it's not the same shape as the original. A \u003Ccode>Date\u003C\u002Fcode> became a string — so \u003Ccode>cloned.createdAt.getMonth()\u003C\u002Fcode> throws a \u003Ccode>TypeError\u003C\u002Fcode>. A \u003Ccode>Map\u003C\u002Fcode> became an empty object, stripping away \u003Ccode>.get()\u003C\u002Fcode>, \u003Ccode>.has()\u003C\u002Fcode>, and iteration. Undefined properties disappear entirely, which can quietly break code that checks for key presence. \u003Ccode>Set\u003C\u002Fcode> instances collapse to \u003Ccode>{}\u003C\u002Fcode>.\u003C\u002Fp>",{"id":96,"html":97,"type":72},"b8","\u003Cp>Circular references throw outright: \u003Ccode>JSON.stringify\u003C\u002Fcode> raises \u003Ccode>TypeError: cyclic object value\u003C\u002Fcode> rather than attempting to handle them.\u003C\u002Fp>",{"id":99,"html":100,"text":101,"type":79,"level":31},"b9","\u003Ccode>structuredClone\u003C\u002Fcode> — the built-in that handles all of it","structuredClone — the built-in that handles all of it",{"id":103,"html":104,"type":72},"b10","\u003Cp>\u003Ccode>structuredClone\u003C\u002Fcode> is a global function that deep-clones a value using the \u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FWeb_Workers_API\u002FStructured_clone_algorithm\">Structured Clone Algorithm\u003C\u002Fa> — the same algorithm the browser uses internally to pass data across web workers, \u003Ccode>postMessage\u003C\u002Fcode>, and IndexedDB. It's been available since it was designed for exactly this purpose.\u003C\u002Fp>",{"id":106,"code":107,"type":89,"language":90,"highlight":108},"b11","const original = {\n  createdAt: new Date('2024-01-15'),\n  config: new Map([['theme', 'dark']]),\n  count: undefined,\n  tags: new Set(['css', 'js']),\n};\n\nconst cloned = structuredClone(original);\n\nconsole.log(cloned.createdAt instanceof Date);    \u002F\u002F true\nconsole.log(cloned.createdAt.getMonth());        \u002F\u002F 0 (January)\nconsole.log(cloned.config instanceof Map);        \u002F\u002F true\nconsole.log(cloned.config.get('theme'));         \u002F\u002F 'dark'\nconsole.log('count' in cloned);                  \u002F\u002F true — undefined is preserved\nconsole.log(cloned.tags instanceof Set);          \u002F\u002F true\nconsole.log(cloned.tags.has('css'));             \u002F\u002F true",[],{"id":110,"html":111,"type":72},"b12","\u003Cp>No import. No library. The types survive the clone.\u003C\u002Fp>",{"id":113,"html":114,"type":72},"b13","\u003C!-- playground:start -->",{"id":116,"html":117,"text":117,"type":79,"level":31},"b14","🎮 Try it yourself",{"id":119,"html":120,"type":72},"b15","\u003Cp>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-10-structuredclone-deep-clone\u002Fplayground\u002F\">▶️ Open the interactive playground →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":122,"html":123,"type":72},"b16","\u003Cp>\u003Cem>Runs right in your browser — poke at it and watch the concept react live.\u003C\u002Fem>\u003C\u002Fp>",{"id":125,"html":126,"type":72},"b17","\u003C!-- playground:end -->",{"id":128,"html":129,"text":129,"type":79,"level":31},"b18","Circular references — handled",{"id":131,"html":132,"type":72},"b19","\u003Cp>The thing that makes \u003Ccode>JSON.parse(JSON.stringify())\u003C\u002Fcode> throw, \u003Ccode>structuredClone\u003C\u002Fcode> handles correctly:\u003C\u002Fp>",{"id":134,"code":135,"type":89,"language":90,"highlight":136},"b20","const a = { name: 'a' };\na.self = a; \u002F\u002F circular reference\n\nconst cloned = structuredClone(a);\nconsole.log(cloned.self === cloned); \u002F\u002F true — the graph structure is preserved\nconsole.log(cloned === a);           \u002F\u002F false — it's a distinct object",[],{"id":138,"html":139,"type":72},"b21","\u003Cp>The algorithm preserves the object graph: shared references inside the original are shared in the clone too. Circular structures don't cause infinite loops or errors — they produce a correctly-structured clone.\u003C\u002Fp>",{"id":141,"html":142,"text":143,"type":79,"level":31},"b22","The one thing it won't clone","The one thing it won't clone",{"id":145,"html":146,"type":72},"b23","\u003Cp>\u003Ccode>structuredClone\u003C\u002Fcode> follows the same constraints as \u003Ccode>postMessage\u003C\u002Fcode>. It clones \u003Cem>data\u003C\u002Fem>, not \u003Cem>behavior\u003C\u002Fem>. Functions are not transferable, so they throw:\u003C\u002Fp>",{"id":148,"code":149,"type":89,"language":90,"highlight":150},"b24","structuredClone({ fn: () => {} }); \u002F\u002F TypeError: fn could not be cloned",[],{"id":152,"html":153,"type":72},"b25","\u003Cp>The same applies to DOM nodes and class instances where the prototype chain matters — the data transfers, but the prototype doesn't, so the clone is a plain object. Error objects, however, \u003Cem>are\u003C\u002Fem> supported and clone correctly.\u003C\u002Fp>",{"id":155,"html":156,"type":72},"b26","\u003Cp>This isn't a bug. The algorithm is intentionally scoped to values, not objects with identity. For the vast majority of real use cases — API response data, form state, configuration objects, anything you'd pass through \u003Ccode>postMessage\u003C\u002Fcode> — it's exactly the right scope. If you need to clone class instances and preserve their prototype, a library like \u003Ccode>lodash.cloneDeep\u003C\u002Fcode> covers that case.\u003C\u002Fp>",{"id":158,"html":159,"text":159,"type":79,"level":31},"b27","Browser support",{"id":161,"html":162,"type":72},"b28","\u003Cp>\u003Ccode>structuredClone\u003C\u002Fcode> landed in Chrome 98, Firefox 94, and Safari 15.4. Baseline 2022 — every browser released in the last three years. Node.js added it in version 17.0.\u003C\u002Fp>",{"id":164,"html":165,"type":72},"b29","\u003Cp>No \u003Ccode>typeof structuredClone !== 'undefined'\u003C\u002Fcode> guard needed unless you're targeting something very old. If you're on a current browser or a current Node, it's there.\u003C\u002Fp>",{"id":167,"html":168,"type":72},"b30","\u003C!-- quiz:start -->",{"id":170,"html":171,"text":171,"type":79,"level":31},"b31","🧠 Test yourself",{"id":173,"html":174,"type":72},"b32","\u003Cp>Think it clicked? \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-10-structuredclone-deep-clone\">Take the 6-question quiz →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":176,"html":177,"type":72},"b33","\u003Cp>\u003Cem>Instant feedback, a hint on every question, and an explanation for each answer — right or wrong.\u003C\u002Fem>\u003C\u002Fp>",{"id":179,"html":180,"type":72},"b34","\u003C!-- quiz:end -->",{"id":182,"html":183,"text":183,"type":79,"level":31},"b35","What to do now",{"id":185,"html":186,"type":72},"b36","\u003Cp>Search your codebase for \u003Ccode>JSON.parse(JSON.stringify\u003C\u002Fcode>. For every match, ask: does this object ever contain a \u003Ccode>Date\u003C\u002Fcode>, \u003Ccode>Map\u003C\u002Fcode>, \u003Ccode>Set\u003C\u002Fcode>, \u003Ccode>undefined\u003C\u002Fcode> value, or circular reference? If yes, the clone is silently dropping or corrupting data and you should replace it with \u003Ccode>structuredClone\u003C\u002Fcode>.\u003C\u002Fp>",{"id":188,"html":189,"type":72},"b37","\u003Cp>If the object is genuinely just nested strings, numbers, and arrays — the JSON round-trip technically works — \u003Ccode>structuredClone\u003C\u002Fcode> is still clearer about intent, faster in modern engines, and safe when the object shape grows to include a \u003Ccode>Date\u003C\u002Fcode> field six months from now.\u003C\u002Fp>",{"id":191,"html":192,"type":72},"b38","\u003Cp>The JSON hack was the available tool for a decade. The built-in is better in every dimension that matters for data cloning, and it's been in every major runtime for three years. Time to use the right primitive.\u003C\u002Fp>",{"id":194,"type":195},"b39","divider",{"id":197,"html":198,"type":72},"b40","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":200,"type":201,"items":202,"ordered":18},"b41","list",[203,204,205,206,207],"⭐ \u003Cstrong>GitHub\u003C\u002Fstrong> — follow me and star the projects: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fparsajiravand\">github.com\u002Fparsajiravand\u003C\u002Fa>","💬 \u003Cstrong>Discord\u003C\u002Fstrong> — join the frontend best-practices community: \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ\">discord.gg\u002Fd9KRhuAwQ\u003C\u002Fa>","📸 \u003Cstrong>Instagram\u003C\u002Fstrong> — frontend best practices, daily: \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F\">@bestpractice___\u003C\u002Fa>","💼 \u003Cstrong>LinkedIn\u003C\u002Fstrong> — \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F\">linkedin.com\u002Fin\u002Fparsa-jiravand\u003C\u002Fa>","✉️ \u003Cstrong>Email\u003C\u002Fstrong> (work & contract inquiries): \u003Ca href=\"mailto:bestpractice2026@gmail.com\">bestpractice2026@gmail.com\u003C\u002Fa>","The `JSON.parse(JSON.stringify(obj))` incantation is in almost every codebase. It works often enough that most developers have reached for it without a second thought. No imports, no library, a deep clone in one line — memorable and good enough for a decade.\n\n\"Good enough\" is doing a lot of work in that sentence.\n\n## What JSON serialization actually does to your data\n\n`JSON.stringify` serializes a value to a text string. JSON has a limited type vocabulary: strings, numbers, booleans, null, arrays, and plain objects. Anything outside that set either gets transformed silently or dropped entirely.\n\nHere's what happens when you round-trip a realistic object through JSON:\n\n```js\nconst original = {\n  createdAt: new Date('2024-01-15'),\n  config: new Map([['theme', 'dark']]),\n  count: undefined,\n  tags: new Set(['css', 'js']),\n};\n\nconst cloned = JSON.parse(JSON.stringify(original));\n\nconsole.log(typeof cloned.createdAt);   \u002F\u002F \"string\" — not a Date\nconsole.log(cloned.config);             \u002F\u002F {} — not a Map\nconsole.log('count' in cloned);         \u002F\u002F false — undefined is dropped\nconsole.log(cloned.tags);              \u002F\u002F {} — not a Set\n```\n\nThe clone exists, but it's not the same shape as the original. A `Date` became a string — so `cloned.createdAt.getMonth()` throws a `TypeError`. A `Map` became an empty object, stripping away `.get()`, `.has()`, and iteration. Undefined properties disappear entirely, which can quietly break code that checks for key presence. `Set` instances collapse to `{}`.\n\nCircular references throw outright: `JSON.stringify` raises `TypeError: cyclic object value` rather than attempting to handle them.\n\n## `structuredClone` — the built-in that handles all of it\n\n`structuredClone` is a global function that deep-clones a value using the [Structured Clone Algorithm](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FWeb_Workers_API\u002FStructured_clone_algorithm) — the same algorithm the browser uses internally to pass data across web workers, `postMessage`, and IndexedDB. It's been available since it was designed for exactly this purpose.\n\n```js\nconst original = {\n  createdAt: new Date('2024-01-15'),\n  config: new Map([['theme', 'dark']]),\n  count: undefined,\n  tags: new Set(['css', 'js']),\n};\n\nconst cloned = structuredClone(original);\n\nconsole.log(cloned.createdAt instanceof Date);    \u002F\u002F true\nconsole.log(cloned.createdAt.getMonth());        \u002F\u002F 0 (January)\nconsole.log(cloned.config instanceof Map);        \u002F\u002F true\nconsole.log(cloned.config.get('theme'));         \u002F\u002F 'dark'\nconsole.log('count' in cloned);                  \u002F\u002F true — undefined is preserved\nconsole.log(cloned.tags instanceof Set);          \u002F\u002F true\nconsole.log(cloned.tags.has('css'));             \u002F\u002F true\n```\n\nNo import. No library. The types survive the clone.\n\n\u003C!-- playground:start -->\n\n## 🎮 Try it yourself\n\n**[▶️ Open the interactive playground →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-10-structuredclone-deep-clone\u002Fplayground\u002F)**\n\n_Runs right in your browser — poke at it and watch the concept react live._\n\n\u003C!-- playground:end -->\n\n## Circular references — handled\n\nThe thing that makes `JSON.parse(JSON.stringify())` throw, `structuredClone` handles correctly:\n\n```js\nconst a = { name: 'a' };\na.self = a; \u002F\u002F circular reference\n\nconst cloned = structuredClone(a);\nconsole.log(cloned.self === cloned); \u002F\u002F true — the graph structure is preserved\nconsole.log(cloned === a);           \u002F\u002F false — it's a distinct object\n```\n\nThe algorithm preserves the object graph: shared references inside the original are shared in the clone too. Circular structures don't cause infinite loops or errors — they produce a correctly-structured clone.\n\n## The one thing it won't clone\n\n`structuredClone` follows the same constraints as `postMessage`. It clones *data*, not *behavior*. Functions are not transferable, so they throw:\n\n```js\nstructuredClone({ fn: () => {} }); \u002F\u002F TypeError: fn could not be cloned\n```\n\nThe same applies to DOM nodes and class instances where the prototype chain matters — the data transfers, but the prototype doesn't, so the clone is a plain object. Error objects, however, *are* supported and clone correctly.\n\nThis isn't a bug. The algorithm is intentionally scoped to values, not objects with identity. For the vast majority of real use cases — API response data, form state, configuration objects, anything you'd pass through `postMessage` — it's exactly the right scope. If you need to clone class instances and preserve their prototype, a library like `lodash.cloneDeep` covers that case.\n\n## Browser support\n\n`structuredClone` landed in Chrome 98, Firefox 94, and Safari 15.4. Baseline 2022 — every browser released in the last three years. Node.js added it in version 17.0.\n\nNo `typeof structuredClone !== 'undefined'` guard needed unless you're targeting something very old. If you're on a current browser or a current Node, it's there.\n\n\u003C!-- quiz:start -->\n\n## 🧠 Test yourself\n\nThink it clicked? **[Take the 6-question quiz →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-10-structuredclone-deep-clone)**\n\n_Instant feedback, a hint on every question, and an explanation for each answer — right or wrong._\n\n\u003C!-- quiz:end -->\n\n## What to do now\n\nSearch your codebase for `JSON.parse(JSON.stringify`. For every match, ask: does this object ever contain a `Date`, `Map`, `Set`, `undefined` value, or circular reference? If yes, the clone is silently dropping or corrupting data and you should replace it with `structuredClone`.\n\nIf the object is genuinely just nested strings, numbers, and arrays — the JSON round-trip technically works — `structuredClone` is still clearer about intent, faster in modern engines, and safe when the object shape grows to include a `Date` field six months from now.\n\nThe JSON hack was the available tool for a decade. The built-in is better in every dimension that matters for data cloning, and it's been in every major runtime for three years. Time to use the right primitive.\n\n---\n\n*Thanks for reading! Let's stay connected:*\n\n- ⭐ **GitHub** — follow me and star the projects: [github.com\u002Fparsajiravand](https:\u002F\u002Fgithub.com\u002Fparsajiravand)\n- 💬 **Discord** — join the frontend best-practices community: [discord.gg\u002Fd9KRhuAwQ](https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ)\n- 📸 **Instagram** — frontend best practices, daily: [@bestpractice___](https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F)\n- 💼 **LinkedIn** — [linkedin.com\u002Fin\u002Fparsa-jiravand](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F)\n- ✉️ **Email** (work & contract inquiries): [bestpractice2026@gmail.com](mailto:bestpractice2026@gmail.com)",{"title":210,"canonical":211,"description":37},"You've been deep-cloning objects with a JSON hack. `structuredClone` d","https:\u002F\u002Fbestpractic.org\u002Fblog\u002Fstructuredclone-deep-clone","019fe660-0596-7433-9dc2-12f3abecaf83",{"id":214,"locked":18},"019fe660-0c9c-740b-8e84-399525d22f2d",[216],{"id":217,"slug":34,"title":218,"_count":219},"019fe776-323b-7314-a58d-8c3fbb81c12f","structuredClone vs the JSON hack",{"questions":220},6,[222],{"locale":13,"slug":34},{"id":217,"slug":34,"title":218,"_count":224,"questionCount":220},{"questions":220},"\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003Cdiv>11\u003C\u002Fdiv>\u003Cdiv>12\u003C\u002Fdiv>\u003Cdiv>13\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> original \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  createdAt\u003Cspan class=\"shj-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">new\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Date\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-str\">'2024-01-15'\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n  config\u003Cspan class=\"shj-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">new\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Map\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>\u003Cspan class=\"shj-str\">'theme'\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-str\">'dark'\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n  count\u003Cspan class=\"shj-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-num\">undefined\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n  tags\u003Cspan class=\"shj-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">new\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Set\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>\u003Cspan class=\"shj-str\">'css'\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-str\">'js'\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>;\n\n\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> cloned \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-num\">JSON\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">parse\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">JSON\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">stringify\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>original\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\nconsole\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">log\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">typeof\u003C\u002Fspan> cloned\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>createdAt\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;   \u003Cspan class=\"shj-cmnt\">\u002F\u002F \"string\" — not a Date\n\u003C\u002Fspan>console\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">log\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>cloned\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>config\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;             \u003Cspan class=\"shj-cmnt\">\u002F\u002F {} — not a Map\n\u003C\u002Fspan>console\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">log\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-str\">'count'\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">in\u003C\u002Fspan> cloned\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;         \u003Cspan class=\"shj-cmnt\">\u002F\u002F false — undefined is dropped\n\u003C\u002Fspan>console\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">log\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>cloned\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>tags\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;              \u003Cspan class=\"shj-cmnt\">\u002F\u002F {} — not a Set\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003Cdiv>11\u003C\u002Fdiv>\u003Cdiv>12\u003C\u002Fdiv>\u003Cdiv>13\u003C\u002Fdiv>\u003Cdiv>14\u003C\u002Fdiv>\u003Cdiv>15\u003C\u002Fdiv>\u003Cdiv>16\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> original \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  createdAt\u003Cspan class=\"shj-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">new\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Date\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-str\">'2024-01-15'\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n  config\u003Cspan class=\"shj-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">new\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Map\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>\u003Cspan class=\"shj-str\">'theme'\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-str\">'dark'\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n  count\u003Cspan class=\"shj-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-num\">undefined\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n  tags\u003Cspan class=\"shj-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">new\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Set\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>\u003Cspan class=\"shj-str\">'css'\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-str\">'js'\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>;\n\n\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> cloned \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-func\">structuredClone\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>original\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\nconsole\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">log\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>cloned\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>createdAt \u003Cspan class=\"shj-kwd\">instanceof\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Date\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;    \u003Cspan class=\"shj-cmnt\">\u002F\u002F true\n\u003C\u002Fspan>console\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">log\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>cloned\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>createdAt\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">getMonth\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;        \u003Cspan class=\"shj-cmnt\">\u002F\u002F 0 (January)\n\u003C\u002Fspan>console\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">log\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>cloned\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>config \u003Cspan class=\"shj-kwd\">instanceof\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Map\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;        \u003Cspan class=\"shj-cmnt\">\u002F\u002F true\n\u003C\u002Fspan>console\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">log\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>cloned\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>config\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">get\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-str\">'theme'\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;         \u003Cspan class=\"shj-cmnt\">\u002F\u002F 'dark'\n\u003C\u002Fspan>console\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">log\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-str\">'count'\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">in\u003C\u002Fspan> cloned\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;                  \u003Cspan class=\"shj-cmnt\">\u002F\u002F true — undefined is preserved\n\u003C\u002Fspan>console\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">log\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>cloned\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>tags \u003Cspan class=\"shj-kwd\">instanceof\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Set\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;          \u003Cspan class=\"shj-cmnt\">\u002F\u002F true\n\u003C\u002Fspan>console\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">log\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>cloned\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>tags\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">has\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-str\">'css'\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;             \u003Cspan class=\"shj-cmnt\">\u002F\u002F true\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> a \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> name\u003Cspan class=\"shj-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-str\">'a'\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>;\na\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>self \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> a; \u003Cspan class=\"shj-cmnt\">\u002F\u002F circular reference\n\u003C\u002Fspan>\n\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> cloned \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-func\">structuredClone\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>a\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\nconsole\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">log\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>cloned\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>self \u003Cspan class=\"shj-oper\">===\u003C\u002Fspan> cloned\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>; \u003Cspan class=\"shj-cmnt\">\u002F\u002F true — the graph structure is preserved\n\u003C\u002Fspan>console\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">log\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>cloned \u003Cspan class=\"shj-oper\">===\u003C\u002Fspan> a\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;           \u003Cspan class=\"shj-cmnt\">\u002F\u002F false — it's a distinct object\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-oneline\" data-lang=\"js\">\u003Cspan class=\"shj-func\">structuredClone\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> fn\u003Cspan class=\"shj-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>; \u003Cspan class=\"shj-cmnt\">\u002F\u002F TypeError: fn could not be cloned\u003C\u002Fspan>\u003C\u002Fdiv>"]