What are different between Normal Copy and Shallow Copy, Deep Copy in JavaScript Object
Tags: javascript, programming, tutorial
Published: 2023-04-17 22:57:51

Hello everyone, I hope you are doing great. 

today I would like to explain the different between 

1. Normal copy in JavaScript Object
2. Shallow copy in JavaScript Object
3. Deep copy in JavaScript Object


> Note : In JavaScript objects  are passed and assigned by reference (more accurately the value of a reference)

let's start first with  Normal copy in JavaScript Object

## Normal copy in JavaScript Object

in short, When you change the original object's properties, the copied object's properties will change too (and vice versa)

let's make an example :

```
// Normal copy  in Js Object

const person = {
  name: "Abdeldjalil",
  country: "Algeria"
};

const newPerson = person;

/*
Now if we make a change in
newPerson object
will directly change 
in preson Object 

*/

newPerson.country = "Canda"; // also updates person.country

console.log(newPerson); // {name: "Abdeldjalil", country: "Canda"}

```

## Shallow copy in JavaScript Object

in short, Top level properties will be unique for the original and the copied object. Nested properties will be shared across both objects though. Use the spread operator `...{}` or `Object.assign()`

let's have an example for more understanding

```
// Shallow copy  in Js Object

const person = {
  name: "Abdeldjalil",
  country: "Algeria",
  job: {
    category: "web developement",
    profession: "Front-End Web Developer"
  }
};

const newPerson = { ...person };

/*

Now if we make a change in
Top level properties in newPerson object
will not  change 
in preson Object 
but if we make change in Nested Properties in this case 
Job property  will change 

*/

// top levele property
newPerson.name = "John Dev"; // will not updates person.name

// Nested  property
newPerson.job.profession = "Backend Devloper"; // also updates person.job.profession

console.log(newPerson); `// {name: "John Dev", country: "Algeria", job: Object} name: "Abdeldjalil" country: "Algeria" job: { category: "web developement" profession: "Backend Devloper"}}`

console.log(person); `// {name: "Abdeldjalil", country: "Algeria", job: Object} name: "Abdeldjalil" country: "Algeria" job: { category: "web developement" profession: "Backend Devloper"}}`


```
 

## Deep copy in JavaScript Object

in short, All properties are unique for the original and the copied object, even nested properties. For a deep copy, serialize the object to JSON and parse it back to a JS object.

let's make an example about it 

```
// Shallow copy  in Js Object

const person = {
  name: "Abdeldjalil",
  country: "Algeria",
  job: {
    category: "web developement",
    profession: "Front-End Web Developer"
  }
};

const newPerson = JSON.parse(JSON.stringify(person));

/*

Now if we make a change in
Top level properties in newPerson object
or even in nested  properties will not change 
in preson Object 

*/

// top levele property
newPerson.name = "Setiv Smith "; // will not updates person.job.profession

// Nested  property
newPerson.job.profession = "Fullstack Devloper"; // will not update  person.job.profession

console.log(newPerson); `// {name: "Setiv Smith ", country: "Algeria", job: Object} name: "Setiv Smith " country: "Algeria" job: { category: "web developement" profession: "Fullstack Devloper" }`

console.log(person); `// {name: "Abdeldjalil ", country: "Algeria", job: Object} name: "Setiv Smith " country: "Algeria" job: { category: "web developement" profession: "Front-End Web Developer" }`


```

Thank you for reading this Article and I am waiting  for your feedbacks