In javascript, we should not modify the original data or mutate the original data, so to avoid this, we need to know how to make a deep copy of the original data, so by doing a deep copy we get the new data without modifying to original data.

Let's understand first deep copy and shallow copy.

A Deep copy is a new copy of an original copy that has a different memory address means pointing to a new memory address whereas a shallow copy is a new copy of an original copy, but the same memory address means pointing to the same memory address.

Let's do some examples for better understanding.

//object
const language = { a:"javascript",  b:"java", c:"python" };

const language2 = language;

language2.a = "c++";

console.log(language); // { a:"c++",  b:"java", c:"python" };

console.log(language2); // { a:"c++",  b:"java", c:"python" };

So as you can see in the above example it is a shallow copy, not only does it creates a new variable by coping with the original one, but it modified it as well. Now let's make the deep copy.

//object

const language = { a:"javascript",  b:"java", c:"python" };

const language2 = {...language};

language2.a = "c++";

console.log(language); // { a:"javascript",  b:"java", c:"python" };

console.log(language2); // { a:"c++",  b:"java", c:"python" };

So in the above example, first we destructured the original language object, both object has different memory addresses. By doing this, we are able to change values.

Now let's take an array example

const techStack = ["React", "Angular", "Vue"];

const techStack2 = techStack;

techStack2[0] = "Javascript"

console.log(techStack); // ["React", "Angular", "Vue"]

console.log(techStack2); //["React", "Angular", "Vue"]

const techStack = ["React", "Angular", "Vue"];

const techStack2 = [...techStack, "NextJs"];

techStack2[0] = "Javascript"

console.log(techStack); // ["React", "Angular", "Vue"]

console.log(techStack2); //["Javascript", "Angular", "Vue", "NextJs"]

But wait!

What if you have nested object and want to make deep copy? Is the above method work? Lets check.

const obj1 = {
  country: "India",
  state: {
    name: "Gujarat",
    id: 8,
     user: {
      name: "mahendra"
    }
  }
};

const obj2 = {...obj1};
obj2.state.name = "Rajasthan"

console.log(obj1)

It makes mutates the previous obj. for this kind of situation, we can use JSON.parse and JSON.stringify Lets see how.

const obj3 = JSON.parse(JSON.stringify(obj1));
obj3.state.name = "MP"
console.log(obj1)

This method works for nested obj at any level. It will not mutate your original previous obj.

So as you can see above this is how you can make a deep of an object and an array. There are other methods as well to make a deep copy by using array methods like map, slice.

You can use _.cloneDeep() from the Lodash library. It will generate the same results.

Here is my codesandbox for your experiments.

I hope I'm able to make you clear about how to make a deep copy in javascript, if you have any queries, do comment. I will be happy to answer. Until then Keep coding 🧑‍💻