Original object is changed after cloning it

Question

I want to clone an object and then change it, however when I do that the original object is changed also:

let items = result.Project.ItemGroup[1].Build;
let newItem = { ...items[0] };
newItem.$.Include = `test`;

After I make an assignment on newItem object, the items[0] value is changed also.

Answer 1

Spread only makes a shallow copy. You're not changing what you copied, you're changing the object on its $ property, which you didn't copy. items[0].$ and newItem.$ both refer to the same object:

const items = [
  {
    $: {
      Include: "test"
    }
  }
];
let newItem = {...items[0]};
console.log(items[0].$ === newItem.$); // true

You'd need something like this to also clone the $ object:

let newItem = {...items[0], $: {...items[0].$}};

const items = [
  {
    $: {
      Include: "test"
    }
  }
];
let newItem = {...items[0], $: {...items[0].$}};
console.log(items[0].$ === newItem.$); // false
newItem.$.Include = "updated";
console.log(items[0].$.Include);       // "test"
console.log(newItem.$.Include);        // "updated"

(Or a general deep-clone function.)