Nested object changes not reflected in parent object after shallow copy using Object.assign()

Question

const mainObj = {
};
const valueChanger = (obj) => {
  if (!obj.data) {
    obj.data = {};
  }

  return (value) => {
    obj.data = { value };
  };
};

let current = valueChanger(mainObj);

mainObj.next = {};
let next = valueChanger(mainObj.next);

current(10);
next(20);
console.log('step:1 ', mainObj);

const nextReference = mainObj.next;

_.each(mainObj, (value, key) => delete mainObj[key]);
Object.assign(mainObj, nextReference);
current = next;
current(21);

console.log('step:2 ', mainObj);

.as-console-wrapper { max-height: 100% !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

After setting data in mainObj, Shallow copying next reference into mainObj by using Object.assign(). After that changes of nested object is not reflecting into mainObj.

Actual Result:

{ data: { value: 20 } }

Expected Result:

{ data: { value: 21 } }

Answer 1

Change your valueChanger to

return (value) {
  obj.data.value = value;
};

and it will do what you expect.

Assigning a new object to obj.data breaks the previous reference whereas assigning a new value to the .value property maintains the same obj.data reference which is shared with the parent object.