Deep cloning an object in JavaScript

For a long time, deeply cloning an object in JavaScript was a real headache.

Because as you probably know, in JavaScript objects are always treated as references, which causes a few problems when you need to copy them entirely!

In the past, we used tricks like JSON.parse(JSON.stringify(obj)), or external libraries such as Lodash (_.cloneDeep).

But these solutions had their limits: loss of dates, functions removed, errors with certain data types…

Fortunately, since Node.js 17 and modern browsers, JavaScript finally offers a native method: structuredClone()

What is structuredClone?

It's simply a built-in function that lets you create a deep copy of an object.

Unlike a simple spread operator ({...obj}) or Object.assign(), which only perform a shallow copy, structuredClone traverses the entire structure and also copies nested objects:

const user = {
  name: "Alice",
  settings: {
    theme: "dark",
    language: "fr"
  }
};

const clone = structuredClone(user);

clone.settings.theme = "light";

console.log(user.settings.theme); // "dark"
console.log(clone.settings.theme); // "light"

Check out the official documentation directly on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone

Note that compatibility on caniuse.com is at 93.61%

What data types are supported?

Good news: structuredClone supports most modern data types, such as:

• Simple objects
• Arrays
• Map and Set
• Date
• ArrayBuffer, TypedArray, Blob, File, ImageBitmap…

On the other hand, some things cannot be cloned: functions, DOM references, or symbols. If you try, an error will be thrown.

Conclusion

Thanks to structuredClone(), we finally have a native and performant method for performing a deep clone.

But be careful: not everything is cloneable. In cases where your objects contain functions or DOM references, a bit of cleanup beforehand is necessary.