DEV Community

Cover image for What are different between Normal Copy and Shallow Copy, Deep Copy in JavaScript Object
Abdeldjalil Hachimi
Abdeldjalil Hachimi

Posted on

What are different between Normal Copy and Shallow Copy, Deep Copy in JavaScript Object

#javascript #programming #tutorial

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"}
Enter fullscreen mode Exit fullscreen mode

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"}}`
Enter fullscreen mode Exit fullscreen mode

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" }`
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)