How to Deep clone in JavaScript?

Deep clone in JavaScript refers to creating a complete copy of an object, including all nested objects, ensuring that changes to the cloned object do not affect the original. Unlike shallow cloning, deep cloning requires copying all levels of the object’s structure.

1. Using Spread Operator to Deep Clone

The Spread operator allows an iterable to expand in places where 0+ arguments are expected. It is mostly used in the variable array where there is more than 1 value is expected. It allows us the privilege to obtain a list of parameters from an array. 

Syntax

let variablename1 = [...value]; 

Example: We have created a shallow copy of student1 into student2. This means student2 has the same properties as student1, but changes to student1 won't affect student2.

let student1 = {
    name: "Manish",
    company: "Gfg"
}

let student2 = { ...student1 };

student1.name = "Rakesh"

console.log("student 1 name is", student1.name)
console.log("student 2 name is ", student2.name);

student 1 name is Rakesh
student 2 name is  Manish

2. Using Object.assign() Method

The Object.assign() method is used to copy the values and properties from one or more source objects to a target object. It invokes getters and setters since it uses both [[Get]] on the source and [[Set]] on the target.

Syntax

Object.assign(target, ...sources);

Example: The Object.assign() method copies properties from student1 to student2, creating a shallow copy. When student1.name is changed, it doesn't affect student2, as they are independent objects with different memory references.

let student1 = {
    name: "Manish",
    company: "Gfg"
}
let student2 = Object.assign({}, student1);

student1.name = "Rakesh"

console.log("student 1 name is", student1.name)
console.log("student 2 name is ", student2.name);

student 1 name is Rakesh
student 2 name is  Manish

3. Using Json.parse() and Json.stringify() Methods

In this approach, we have used Json.parse() and Json.stringify() Methods. the Json.parse() is used to parse the given object as an JSON object then we have called Json.stringify() method to stribgify and deep clone.

Example: Using JSON.parse(JSON.stringify(student1)), a deep copy of student1 is created in student2. Changes to student1.name don’t affect student2, as they are completely separate objects with no shared references.

let student1 = {
    name: "Manish",
    company: "Gfg"

}
let student2 = JSON.parse(JSON.stringify(student1))

student1.name = "Rakesh"

console.log("student 1 name is", student1.name)
console.log("student 2 name is ", student2.name);

student 1 name is Rakesh
student 2 name is  Manish

Note: Both Object.assign() and the spread operator (...) will create shallow copy while dealing with nested objects or arrays, they only clone the immediate level of properties.