Hello everyone, I hope you are doing great.
today I would like to explain the different between
- Normal copy in JavaScript Object
- Shallow copy in JavaScript Object
- 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
Top comments (0)