Understanding deep copy in JavaScript

JavaScript needs no introduction, it's a robust language with a lot of versatility, but if you've worked with it, you've probably noticed some unusual behaviors. One of them is how JavaScript handles variable copies, particularly when working with objects. In this article, we will explore the concept of deep copy and how it helps us avoid unexpected problems when duplicating data in our programs.

When we make a copy of a variable, JavaScript creates a new memory space and stores the copied value there; then the new variable points to this new memory space. For example:

x = 5;
y = x;

y is pointing to a new memory space, which has the same value as x, i.e. 5 . Visually, it would be something like this:

The above concept applies only to primitive values, for objects it is different. Imagine that we have the following two objects:

let a = {
    name: 'Rick',
    lastName: 'Sanchez',
};

let b = a;

In the example above, b does not have its own memory space as we might expect; instead, a is pointing to the memory space where a is stored.

What problems could this behavior cause? Basically, if you change any field from a or b, both variables will change. Run the following code and verify it yourself.

let a = {
    name: 'Rick',
    lastName: 'Sanchez',
};

let b = a;

b.name = 'Morty';

console.log('a: ', a); // a:  { name: 'Morty', lastName: 'Sanchez' }
console.log('b: ', b); // b:  { name: 'Morty', lastName: 'Sanchez' }

The solution for this? We need to do a deep copy to save the value of a to a new independent memory space that b points to.

const b = JSON.parse(JSON.stringify(a));

In this way, we are forcing JavaScript to create a new memory space by changing the format from Object to JSON. This is done using the stringify method, then the JSON with its own memory space is converted back into an Object with the parse method, so both variables remain totally independent.

Has this strange behavior ever happened to you? Let me know in the comments, I'll be happy to read you!

The above is the detailed content of Understanding deep copy in JavaScript. For more information, please follow other related articles on the PHP Chinese website!