Shallow Copy and Deep Copy | Javascript Interview Series

This article will teach shallow and deep copy in java script with code examples.

Introduction :

✅ Shallow copy means copying only the first level of an object or array.
If nested objects are inside, they are still shared between the original and the copy (not fully duplicated).

✅ Deep copy means copying everything, including nested objects and nested arrays.
No references are shared — the original and the copy are completely separate.

In java script, whenever we assign one object to other ,by default it only copy the reference(i.e memory location) , not the data.

Problem Statement –

We want to copy the object, but the main object should not change its value

let obj1 = {
  name: "Jhon",
};

let user = obj1;

user.name = "doe";

console.log(obj1);
console.log(user);

// here both the object data is channge to "doe"

In the above code, ob1 and user is pointing to the same memory location, that’s why “name” is changed in both. This is called as object copy by reference.

So to fix this, we have 2 ways-

Shallow Copy

1st Way (using the assign function)

let obj = {
  name: "Jhon",
};

let user = Object.assign({}, obj);

user.name = "deo";

console.log("obj.. ", obj);
console.log("user.. ", user);

2nd Way(using destructuring)

let obj = {
  name: "Jhon",
};

// let user = Object.assign({}, obj);
let user = { ...obj, job: "SDE" };

user.name = "deo";

console.log("obj.. ", obj);
console.log("user.. ", user);

Limitations of shallow copy

It only copies the data to the first level.

Eg – If we create an object inside another object , it won’t be able to copy that.

const objRaj = {
  name: "raj",
  place: "delhi",
  study: {
    ssc: "fbs",
    college: "IIT",
  },
};

// let objRajesh = { ...objRaj };
let objRajesh = Object.assign({}, objRaj);

objRajesh.place = "Mumbai";  //working
objRajesh.study.college = "NIT"; //not working

console.log("raj.. ", objRaj);
console.log("rajehs.. ", objRajesh);

Limitation – It is able to copy “name” key value , but fails to copy “college” key value .

To fix this, we need Deep Copy

Deep Copy

How to perform deep copy –

• First , convert java script object to json format
• Then , convert it back to java script object

// JSON.stringify - converts java script obj to json text
// parse - converts json back to java script object

const objRaj = {
  name: "raj",
  place: "delhi",
  study: {
    ssc: "fbs",
    college: "IIT",
  },
};

let objRajesh = JSON.parse(JSON.stringify(objRaj));

objRajesh.place = "Mumbai";
objRajesh.study.college = "NIT";

console.log("raj.. ", objRaj);
console.log("rajesh.. ", objRajesh);

Limitations of Deep Copy

<aside> 💡 It is not able to copy the function and time present inside the object

</aside>

// JSON.stringify - converts java script to json text
// parse - converts json back to java script object

const objRaj = {
  name: "raj",
  place: "delhi",
  study: {
    ssc: "fbs",
    college: "IIT",
  },
  showData: function () {
    console.log("display", this.name);
  },
};

let objRajesh = JSON.parse(JSON.stringify(objRaj));

objRajesh.place = "Mumbai";
objRajesh.study.college = "NIT";

console.log("raj.. ", objRaj);
console.log("rajesh.. ", objRajesh);

Fix the above issue using lodash

What is lodash ?

<aside> 💡 Lodash is a utility library provided by java script which holds a lot of helper functions

</aside>

use “_.cloneDeep()” function to resolve the issue.

//<script src="<https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.coregdfggdfg.min.js>" integrity="sha512-ChZ5l881NIBx9sxdDy5gEynup6bC4+E8GPWBylkyRYwwK1fHAlGa7+D9m1o4OEjqYA+nygyMR48vNh5kmZWPLg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

const objRaj = {
  name: "raj",
  place: "delhi",
  study: {
    ssc: "fbs",
    college: "IIT",
  },
  showData: function () {
    console.log("display", this.name);
  },
};

// let objRajesh = JSON.parse(JSON.stringify(objRaj));

let objRajesh = _.cloneDeep(objRaj);

console.log("compare..", objRaj == objRajesh);

objRajesh.name = "Rajesh";
objRajesh.place = "Mumbai";
objRajesh.study.college = "NIT";

console.log("raj.. ", objRaj);
console.log("rajesh.. ", objRajesh);

Using prototype inheritance (i.e “proto”)

const obj1 = {
  name: "himansnhu",
  city: "ranchi",
  getData: function () {
    console.log(this.name + " from " + this.city);
  },
};

const obj2 = {
  name: "shekhar",
  getData: function () {
    console.log(this.name + " from " + this.city);
  },
};

obj2.__proto__ = obj1;

obj2.city = "bengaluru"; 

console.log(obj1.city); //ranchi
console.log(obj2.city); //bengaluru