How to Deep clone in JavaScript ?

In general, cloning means copying one value to another. In JavaScript, we do cloning i.e. copying one value to another using JavaScript. To be more precise there are two types of cloning in JavaScript. As a programmer, it might be a beginner or veteran he/she should be able to know the differences between Deep clone and shallow clone. As this article is about Deep clones we will study detail about Deep clones.

What is Deep Clone

Deep clone is a technique that is used to duplicate everything whenever we are cloning arrays and objects in JavaScript in order to avoid data loss.

There are three methods to deep clone in JavaScript:

Example: As in this example, the data is becoming corrupted if we change one object value then it is reflected in other objects also that is the reason in order to avoid this problem we use Deep Clone.

Javascript

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);

Output

student 1 name is Rakesh
student 2 name is  Rakesh

Now, let’s see the different methods to Deep Clone in JavaScript

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. 

The syntax of the Spread operator is the same as the Rest parameter but it works completely opposite of it. 

Syntax:

let variablename1 = [...value]; 

Example: In this example, we are using Spread Operator.

Javascript

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);

Output

student 1 name is Rakesh
student 2 name is  Manish

2. Using Object.assign() method to Deep clone

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: In this example, we are using Object.assign().

Javascript

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);

Output

student 1 name is Rakesh
student 2 name is  Manish

3. Using Json.parse() and Json.stringify() to Deep clone

This method leverages the built-in JSON serialization and deserialization functions. It works well for most cases, but there are limitations:

• It loses non-JSON-safe data types (e.g., functions, undefined, Infinity, and circular references).
• Dates are converted to strings during serialization.

Example: In this example, we are using Json.parse and Json.stringify.

Javascript

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);

Output

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.

We can use all of these approaches to make sure that the data is safe and doesn’t get mutate when we change in one object.