DEV Community

Deep Cloning Objects in JavaScript, the Modern Way

Steve Sewell on January 18, 2023

Did you know, there's now a native way in JavaScript to do deep copies of objects? That's right, this structuredClone function is built into the J...

Read full post

Peter Vivo • Jan 19 '23

Good to know!

The whole support for workers is narrower: mdn: structuredClone

Kris Walker • Jan 23 '23

Sixteen years in JavaScript and I never knew this existed! Nice.

So, you mentioned that JSON.parse(JSON.stringify()) is surprisingly performant; and it is on most web browsers. But on single or dual core CPUs, which are common in embedded devices like smart TVs, set-top boxes, kiosks, and gaming consoles, the JSON parsing and stringification blocks the runtime enough that it can dramatically hit performance.

Rasmus Schultz • Jan 22 '23

There's a polyfill at just 1K (min+gzip) so this is quite a bit smaller than underscore, just note the limitations listed in the README.

fruntend • Jan 23 '23

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Sahibjadatalib Ansari • Jan 21 '23 • Edited

super

Rahul Jindal • Jan 20 '23

Thanks for sharing this. I got to know something completely new and it seems very powerful also.

webduvet • Jan 21 '23

Perhaps you could have mentioned also where it does not work - if object contains function or on DOM elements. It also does not work on instances and does work differently on instances of native js objects. I've never used it that way and never looked it up, but here is some food for thoughts.

d1 = new Date();
d2 = structuredClone(d1);

d1.__proto__ === d2.__proto__
// true

function Test() {}
Test.prototype.fn = function() {}

t1 = new Test()
t2 = structuredClone(t1);

t1.__proto__ === t2.__proto__
// false