Updating an array within a variable created using Object.assign is also updating the original variable

Question

I have created a copy of a variable using Object.assign and I am able to change an array within the copy of the object fine without affecting the original object. However, if I try and update a value within an array on the copied object this is also affecting the original object (i.e. the changes are made to both "job" and "updatedJob").

I have the following code:

  // Create copy of "job" object which has been passed through
  let updatedJob = Object.assign({}, job); 

  // Remove images from updated job object
  updatedJob.Images = null;

  // Remove checklist images from updated job object
  _.each(updatedJob.Checklists, function (checklist) { checklist.Image = null; });

As you can see I have created a copy of the "job" object that has been passed through.

If I then change the "Images" array of the "updateJob" object (to null) this works fine and does not affect the original "job" object (i.e. the original "job" object still has images intact).

However in the last line of the code I am trying to iterate the "Checklists" array witin the "updatedJob" object and change just the "Image" property to "null" for each one but doing this also updates the original "job" object.

How is this possible when the "updatedJob" object should be a copy of the original "job" object therefore any changes I make to it should not affect the original "job" object?

You created a copy of `job`, but you didn't create a copy of `job.Checklists`. You need to make a deep copy, not a shallow copy. — Paul, Aug 15 '19 at 21:31

Jonas Wilms · Answer 1 · 2019-08-15T21:39:10.680

Object.assign does a shallow copy: It copies all the key-value pairs of one object into another, just like this:

 const from = { primitive: "string", complex: { } }, to = {};

 // Object.assign(from, to) basically does
 to.primitive = from.primitive; // primitives are copied
 to.complex = from.complex; // complex values references get copied, not the value itself

However, objects (arrays are objects too) are copied by reference, so in your case, both objects' Checklists properties point to the same array.

You could create a new array by using .map and reassign the property to point to the new array:

 updatedJob.Checklists = updatedJob.Checklists.map(checklist => ({ ...checklist, Image: null }));

The reference thing here applies here again too, setting .Image to null would affect the object referenced in both arrays, therefore we have to copy these objects too.

Thanks Jonas for the explanation, I went with Daniel's solution because I am using lodash in my project. — WebFletch, Aug 16 '19 at 16:46

score 2 · Accepted Answer · answered Aug 15 '19 at 21:38

As stated in comments and other answers, you're doing a shallow copy. Does that _.each() in your code indicate that you're using lodash?

If so, use the deepClone() method so that items are copied recursively:

let updatedJob = _.cloneDeep(job)

Otherwise, there are other questions on SO that deal with this topic that will provide a suitable solution.

Updating an array within a variable created using Object.assign is also updating the original variable

2 Answers2