Deep copy vs shallow copy

Written byPhuoc Nguyen

Created

30 Aug, 2023

#Shallow copy

A shallow copy creates a new object that references the original object's properties. In other words, the new object points to the same memory location as the original object. This means that if you make changes to the new object, those changes will also be reflected in the original object.

Here's an example of how a shallow copy works:

let person1 = {
    address: {
        country: 'US',
        city: 'New York',
    },
    name: 'John',
    age: 42,
};
let person2 = Object.assign({}, person1);

person2.address.country = 'France';
person2.address.city = 'Paris';

console.log(person1);
// { address: {country: 'France', city: 'Paris'}, ... }

console.log(person2);
// { address: {country: 'France', city: 'Paris'}, ... }

In this example, we create a new object called `person2` by using `Object.assign()` to copy the properties of `person1`.

Then, we change the values of `address.country` and `address.city` properties of `person2`. However, as you can see from the output of the `console.log()` statements, those changes are also reflected in `person1`. The same thing happens in reverse. If you change the properties of the original object, it will also update the new object.

So, be careful when copying objects because the changes you make can affect both the original object and the new one.

person1.address.country = 'England';
person1.address.city = 'London';

console.log(person1);
// { address: {country: 'England', city: 'London'}, ... }

console.log(person2);
// { address: {country: 'England', city: 'London'}, ... }

Good to know

It's important to keep in mind that when a property is an `object` or `array`, a shallow copy only creates a new reference to the nested object or array.

Let's test this out by attempting to modify the `age` property from the objects we created earlier. You'll notice that the property in the original object remains unchanged.
js
person2.age = 24;

console.log(person1.age);     // 42
console.log(person2.age);     // 24

#Deep copy

When you make a deep copy, a whole new object is created with fresh memory locations for all of its properties. This means that any changes you make to the new object won't affect the original object.

Let me show you an example of a deep copy:

let person1 = {
    address: {
        country: 'United State',
        city: 'New York',
    },
    name: 'John',
    age: 42,
};
let person2 = JSON.parse(JSON.stringify(person1));

person2.address.country = 'Italia';
person2.address.city = 'Rome';

// { address: {country: 'United State', city: 'New York'}, ... }
console.log(person1);

// { address: {country: 'Italia', city: 'Rome'}, ... }
console.log(person2);

To create a deep copy of `person1`, we use `JSON.parse(JSON.stringify())`. This creates a new object with fresh memory locations for all of its properties. Then, we change the values of `address.country` and `address.city` to something else.

But even though we made changes to `person2`, `person1` remains unchanged. Check out the `console.log()` statements to see for yourself.

It's important to mention that the sample code above is only meant to demonstrate the concept of deep copy, using `JSON.parse(JSON.stringify())`. This method may not be appropriate for large or complex objects.

#Conclusion

When copying objects in JavaScript, it's essential to know the difference between shallow copy and deep copy. Shallow copy makes a new object that still refers to the original object's properties, whereas deep copy creates a new object with fresh memory locations for all of its properties. Depending on what you're trying to do, one type of copy may be more useful than the other.

#See also

Deep compare vs shallow compare

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn