How to Deep Clone Your JavaScript Objects Like a Pro

Have you ever wanted to make a copy of an object in JavaScript, but you were afraid of messing up the original one? Or maybe you tried to clone an object, but you ended up with a shallow copy that only copied the references, not the values?

If so, you are not alone. Many developers struggle with the problem of deep cloning objects in JavaScript, especially when they have complex types, circular references, or transferable objects. This blog post is certainly for you. We are going to see how to use the structuredClone() function, a lesser-known but incredibly powerful feature of JavaScript in JavaScript that lets you create deep copies of objects without custom cloning functions or any external libraries like _.cloneDeep or hacks like JSON.parse(JSON.stringify(obj)).

What is structuredClone()?

structuredClone() is a built-in function for deep-copying JavaScript values that uses the structured clone algorithm. This algorithm is a powerful and efficient way of serializing and deserializing objects, which was previously only available to browsers and web workers. Now, we can use directly it in our code, thanks to this function.

The structuredClone() function creates a deep copy of an object and its properties, including any child objects and functions, while preserving their type and behaviour. It also allows you to transfer some objects, like ArrayBuffers, instead of cloning them, improving performance and memory usage.

How to use structuredClone()?

structuredClone() is a very simple and easy-to-use function. You just need to pass the object you want to clone as the first argument, and optionally, an options object as the second argument. The function will return a deep copy of the object, with the same type, value, and behavior as the original object.

Here are some examples of how to use structuredClone() to clone different types of values:

// Clone a primitive type
const bool = true;
const boolClone = structuredClone(bool);
console.log(boolClone); // true

// Clone an object type
const obj = { foo: "bar", baz: [1, 2, 3] };
const objClone = structuredClone(obj);
console.log(objClone); // { foo: "bar", baz: [1, 2, 3] }

// Clone a date type
const date = new Date();
const dateClone = structuredClone(date);
console.log(dateClone); // same date as original

What are the benefits of structuredClone()?

There are many benefits to using structuredClone() over other methods of cloning objects, such as:

• It’s native and fast. You don’t need to load external libraries or write your recursive functions to clone objects. structuredClone() is implemented by the JavaScript engine and it’s optimized for performance.
• It’s reliable and consistent. You don’t have to worry about losing data or changing the behaviour of your objects when you clone them. structuredClone() preserves the type, value, and prototype of your objects, as well as their methods and getters/setters.
• It’s flexible and powerful. You can clone any structured-cloneable type, including functions and complex objects. You can also transfer some objects, like ArrayBuffers, to avoid unnecessary copying and improve memory efficiency.

What are the limitations of structuredClone()?

structuredClone() is not a magic bullet that can clone anything. There are some limitations and caveats that we should be aware of, such as:

• It’s not supported by all browsers. structuredClone() is a relatively new feature in JavaScript and it’s not widely supported yet. As of Jan 2024, it’s only available in Chrome 98+, Firefox 94+, and Node.js 17+. You can check the browser compatibility table here.
• It can’t clone non-structured-cloneable types. Some types are not structured-cloneable, such as WeakMap and WeakSet, Promise and Proxy, and DOM elements and Window objects.
• It can’t preserve some type-specific properties/context. Some types have properties that are not enumerable or configurable and therefore cannot be cloned by structuredClone(). For example — the stack property of Error objects or the name and length properties of Function objects or the scope or closure of the function.

Conclusion

Despite its limitations, structuredClone() is a powerful tool in the JavaScript toolbox. It’s like a secret weapon, ready to be unleashed when you need to clone objects without worrying about references.

So, the next time you find yourself needing to clone an object in JavaScript, remember the quirky, magical structuredClone(). It might just save your day! Until next time, happy coding!