object mutation is not expected from return function

user_775735 0
Viewed 95

Could someone pelase explain the mutation behaviour below:

function test () {
  let data = {}

  const run  = () => {
    console.log(data)
  }

  const update = () => {
    data = {}
  }

  return {
    container: {
      data
    },
    run,
    update
  };
}

const { container, run, update } = test();

update(); // run an update to reset value to {}

container.data.test = { result: 'test' }; // try to mutate the data

run(); // it will still return {} instead { data: {test: {result: 'test'}} }

I would expect to update the object would result mutate the data object inside the function., but looks like it's not the case, as if it created a new object.

oop javascript
2 Answers
const { container, run, update } = test();

This creates a new object which includes the current value of the data variable and assigns it.

update(); // run an update to reset value to {}

This changes the value of the data variable to a new object.

container.data.test = { result: 'test' }; // try to mutate the data

This mutates the object that was originally assigned to data and copied to the new object which was returned from test().

It has no effect on the new object that is now the value of data.

In other words:

  return {
    container: {
      data
    },
    run,
    update
  };

… copies the value of data and does not create a reference to the data variable.

Dorward_190680

When you call the test() function, container.data and data point to the same object:

container.data -----> {} <------ data

but after the following statement:

container.data.test = { result: 'test' };

container.data points to a different object:

container.data -----> { result: 'test' } 
data           -----> {}

but data still points to the empty object and this data variable is logged by the run() function.

Important thing to know here is that re-assigning to container.data doesn't re-assigns to the data variable as well.

user_60943480
Related