Shallow vs Deep Copy of Objects in JavaScript

claudioguedes

Claudio Guedes

Posted on October 4, 2024

Shallow vs Deep Copy of Objects in JavaScript

When we need to copy an object to another object, we generally use something like this:

const mainObject = { id: 1 };
const secondaryObject = { ...mainObject };
Enter fullscreen mode Exit fullscreen mode

But this only works for copying the shallow properties of the object. If we have a case like the following code, the scenario changes:

const mainObject = { id: 1, user: { name: 'John Doe', age: 30 } };
const secondaryObject = { ...mainObject };
Enter fullscreen mode Exit fullscreen mode

The property user won't be copied; it will still be related to mainObject. So, if we alter the user property, it will also affect mainObject. To solve this, we can do the following:

const mainObject = { id: 1, user: { name: 'John Doe', age: 30 } };
const deepCopy = JSON.parse(JSON.stringify(mainObject ));
Enter fullscreen mode Exit fullscreen mode

Now, we have a deep copy of mainObject, with two distinct memory addresses.

💖 💪 🙅 🚩
claudioguedes
Claudio Guedes

Posted on October 4, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related