Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 17, 2023 10:57 pm GMT

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

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 Objectconst person = {  name: "Abdeldjalil",  country: "Algeria"};const newPerson = person;/*Now if we make a change innewPerson objectwill directly change in preson Object */newPerson.country = "Canda"; // also updates person.countryconsole.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 Objectconst person = {  name: "Abdeldjalil",  country: "Algeria",  job: {    category: "web developement",    profession: "Front-End Web Developer"  }};const newPerson = { ...person };/*Now if we make a change inTop level properties in newPerson objectwill not  change in preson Object but if we make change in Nested Properties in this case Job property  will change */// top levele propertynewPerson.name = "John Dev"; // will not updates person.name// Nested  propertynewPerson.job.profession = "Backend Devloper"; // also updates person.job.professionconsole.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 Objectconst 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 inTop level properties in newPerson objector even in nested  properties will not change in preson Object */// top levele propertynewPerson.name = "Setiv Smith "; // will not updates person.job.profession// Nested  propertynewPerson.job.profession = "Fullstack Devloper"; // will not update  person.job.professionconsole.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


Original Link: https://dev.to/abdeldjalilhachimi/what-are-different-between-normal-copy-and-shallow-copy-deep-copy-in-javascript-object-1k45

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To