Hello Fellow Readers, Hope you all are doing good. Many a times, we are asked this question in the interviews, specially the output based questions. Lets try to understand these terms.

Shallow Copy

A shallow copy of an object is a copy whose properties share the same references (point to the same underlying values) as those of the source object. Thats why, when you change the values in source object or copied object, values in both the objects change.

const srcObj = {
name: "Roma",
hobby: "Reading"
};

const copiedObj = srcObj;

copiedObj.hobby = "Singing";

console.log(srcObj );
console.log(copiedObj);

Output

So, here as both the object References are pointing to the same memory location, changing one object will change the other one as well.

Now let's see another example

const srcObj = {
name: "Roma",
hobby: "Reading"
};

let copiedObj = srcObj;

copiedObj = {
name: "Roma",
hobby: "Singing"
};

console.log(srcObj );
console.log(copiedObj);

Output

So what's happening here? Why not value of hobby changed for both the objects?🤯

Here, we are not selectively changing the value of specific property. Instead, we are assigning the whole new Object to copiedObj.

Deep Copy

A deep copy of an object is a copy whose properties do not share the same references as those of the source object. Thats why when you change the value of property of any one object, the other object wont be affected.

There are multiple ways to get the Deep Copy of object.

• Spread Operator

const srcObj = {
name: "Roma",
hobby: "Reading"
};

const copiedObj = {...srcObj};

copiedObj.hobby = "Singing";

console.log(srcObj );
console.log(copiedObj);

Output

Technically it doesn’t provide a complete deep copy. It only provides deep copy if the objcts are not nested. In other words, it provides a deep copy to the first instance of the values and all the nested objects are shallow copies. To understand this better, lets look an example.

const srcObj = {
name: "Roma",
hobby: "Reading",
citizen: {
            country: "India",
            city: "Mumbai"
}
};

const copiedObj = {...srcObj};

copiedObj.citizen.city= "Bangalore";

console.log(srcObj );
console.log(copiedObj);

Output

As citizen is the nested object, its the shallow copy. So, the value of city is changed for both the objects.

• JSON Parse and Stringify method

The best way to do complete deep copy is by using JSON methods. Lets see the example.

const srcObj = {
name: "Roma",
hobby: "Reading",
citizen: {
            country: "India",
            city: "Mumbai"
}
};

const copiedObj = JSON.parse(JSON.stringify(srcObj));

copiedObj.citizen.city= "Bangalore";

console.log(srcObj );
console.log(copiedObj);

Output

That's it!! 😍 Hope this article was useful and you got the basic understanding regarding shallow and deep copy.

References:

https://developer.mozilla.org/en-US/docs/Glossary/Deep_copy https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy https://www.javascripttutorial.net/object/3-ways-to-copy-objects-in-javascript/