How to Use JavaScript&#s structuredClone() for Deep Object Cloning

Table of Content

• Introduction
• Understanding and using structuredClone
• Conclusion

Introduction

Have you ever tried copying an object in Javascript using the spread operator (...), only to realize that changes to the original still affect the copy? It can be frustrating when you expect a copy independent from the original but end up having one linked to the original. This is a common issue when dealing with deep objects, and it can lead to unexpected bugs. Thankfully, Javascript has the structuredClone() method to solve this problem

Understanding and using structuredClone()

To start with, the structuredClone() method in Javascript is used to make deep copies of objects, including those with nested structures like arrays, objects and other complex data types.

You might be wondering: what exactly is a copy, and how many types of copying do we have in JavaScript? Well, we have the shallow and deep copies. While we know that structuredClone() creates the latter, using the spread operator creates the former.

A shallow copy copies only the top-level properties of an object, meaning nested objects or arrays are still referenced from the original. On the other hand, a deep copy duplicates everything, including nested structures, ensuring that the clone is fully independent of and from the original.

Let's see some examples of the Shallow and Deep copies in javascript

Shallow Copy Example

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

const personClone = {...person}; // shallow copy

// Modify the languages array in the cloned object
personClone.languages.push("Spanish");

// Check the original and the cloned object
console.log(person.languages);  // Output: ["English", "German", "Spanish"]
console.log(personClone.languages);  // Output: ["English", "German", "Spanish"]
console.log(person.languages === personClone.languages) // true

// However, changing a primitive value won't affect the original
personClone.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(personClone.name);  // Output: "Jane Doe"
console.log(person.name === personClone.name) // false

From the code above, we can say the following:

• The name property is a primitive value, so changing it in the shallow copy(personClone.name = "Jane Doe";) does not affect the original (person.name)
• The languages array is non-primitive, so both the original(person) and the clone(personClone) share the same reference. Modifying the personClone array affects the original person array

Deep Copy Example

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

// Create a deep copy using structuredClone
const deepClonedPerson = structuredClone(person);

// Modify the deep cloned object
deepClonedPerson.languages.push("Spanish");

// Check if the original and the deep clone are equal
console.log(person === deepClonedPerson);  // Output: false
console.log(person.languages) // ['English', 'German']
console.log(deepClonedPerson.languages) // ['English', 'German', 'Spanish']
console.log(person.languages === deepClonedPerson.languages);  // Output: false

// Check if the properties are equal
console.log(person.name === deepClonedPerson.name);  // Output: false

// Changes in the deep cloned object don't affect the original
deepClonedPerson.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(deepClonedPerson.name);  // Output: "Jane Doe"

From the code above, we can conclude the following:

• person === deepClonedPerson confirms that structuredClone() creates a new, independent object.
• person.languages === deepClonedPerson.languages shows that the nested array is also independently copied.
• Checking person.name === deepClonedPerson.name verifies that changes to the deep clone do not affect the original object.
• Values of languages demonstrate that modifications to the deep clone (deepClonedPerson) are not reflected in the original(person)

Conclusion

In this article, we explored how the structuredClone() method provides a reliable way to create deep copies of objects, ensuring that nested structures are fully independent of the original.

Thank you for reading through this article. If you found this article helpful, please like and share it with others who might benefit from learning about deep copying in Javascript

What are your thoughts on this topic? Have you encountered other techniques for copying objects in Javascript? Feel free to share your insights in the comments section below.

P.S. I'm currently looking for frontend developer opportunities. If you have any leads or are hiring, feel free to check out my resume or connect with me on LinkedIn. I'd love to hear from you!

The above is the detailed content of How to Use JavaScript&#s structuredClone() for Deep Object Cloning. For more information, please follow other related articles on the PHP Chinese website!