Deep Cloning of nested Objects in JavaScript

Say goodbye to the JSON.stringify hack

Photo by Dominik Scythe on Unsplash

Creating deep copies of nested objects has been ugly in JavaScript. There are many libraries out there that take care of it for us (e.g., lodash or rfdc). Regarding deep cloning, these libraries have served their purpose. Say hello to the structuredClone API.

Instead of this:

JSON.parse(JSON.stringify(deepObject));

We can write this now:

structuredClone(deepObject)

This creates a clean copy without any references. However, there’s a second parameter with more options to control this behavior. Read more about it on MDN https://developer.mozilla.org/en-US/docs/Web/API/structuredClone

The Browser adaption is pretty good (Safari might be problematic, but there are Polyfills):

I don’t know about you, but I have got some refactoring to do.

It’s so exciting to see more and more new things landing on the platform that we have longed for for ages. This is one of the most anticipated little helpers that will make the lives of many JavaScript developers so much easier.

That’s all, folks!
Thank you so much for reading.

More content at PlainEnglish.io.

Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.