Cloning Objects in JavaScript Like a Pro

Unraveling the Secrets of Deep Cloning Objects in JS

Given JavaScript’s versatility, object manipulation is a common requirement for developers. One frequent task is deep cloning, which is the process of copying an object with all of its hierarchical structures intact. Up until very recently, there was no straightforward way to do this in vanilla JS.

First of all, let’s check how we used to do this.

Method 1: Using JSON.stringify and JSON.parse

This approach involves using the built-in JSON.stringify and JSON.parse methods. This method is simple and effective for many use cases, but it has limitations. It doesn't handle functions, undefinedsymbols, or circular references.

Method 2: Using a Recursive Function

For a more robust solution that handles a wider range of scenarios, a recursive function can be employed. This method is capable of deep cloning objects, arrays, and nested structures. However, it may still face challenges with circular references. But still, it’s not that good for a highly complex object.

Method 3: Using External Libraries

External libraries like Lodash provide specialized functions for deep cloning. The cloneDeep function from Lodash is a robust solution that handles circular references and various edge cases. There are some other good libraries too but still, for this, you need to install additional libraries.

THE Method: Using structuredClone

Now for the good stuff. JavaScript’s recently releasedstructuredClone method which is a powerful function that allows developers to create deep copies of objects. It’s particularly useful when you need to duplicate objects with complex structures, including circular references, without the risk of modifying the original object.

How does it work?

To clone an object, you simply pass it to the structuredClone function:

And yes it can,

• Deep Copy: Unlike shallow copies, structuredClone creates a deep copy of the object, ensuring that changes to the cloned object do not affect the original.
• Handling Circular References: It can handle circular references within the object, which is something JSON-based cloning methods cannot do.
• Transferable Objects: It allows certain objects to be transferred rather than cloned, which can be useful for performance optimization.

While structuredClone is versatile, but it has some limitations. It cannot clone functions or certain DOM nodes, and if any part of the input value is not serializable, it will throw a DataCloneError1.

Conclusion

The structuredClone method in JavaScript is a significant addition, simplifying deep-copying of objects, particularly good at handling complex structures and transferable objects. When choosing a deep cloning method, developers must consider project-specific requirements. While JSON.stringify and JSON.parse are concise, they come with limitations. Recursive functions offer flexibility but may struggle with circular references. External libraries like Lodash strike a balance between simplicity and reliability, suitable for various scenarios.

For more detailed information and examples, you can refer to the MDN Web Docs and other resources like web.dev that discuss deep-copying in JavaScript using structuredClone.

Hope you learned something new today. See you in the next article!