替换对象值而不替换引用

Question

How can you update an entire object, say:

var x = {a:1}
function modify(obj) {
  obj = {b:2}
}
modify(x)
console.log(x) // {a:1}

But maintain the reference? I want the object to be modified outside the function.

My specific case is using lodash.pick inside my function:

if (whitelist) {
  obj = _.pick(obj, whitelist)
}

I can't seem to find a pick function that modifies the object. Is there a way to do this or do I need to start returning copies of the object?

Answer 1

delete everything from the old object, and then add new properties, key-by-key:

 function modify(obj, newObj) { Object.keys(obj).forEach(function(key) { delete obj[key]; }); Object.keys(newObj).forEach(function(key) { obj[key] = newObj[key]; }); } var x = {a:1} modify(x, {b:42}) document.write(JSON.stringify(x));

If you're wondering whether it's a good idea in general, the answer is no. Construct a new object, return it from the function and assign - this is a much preferred way.

Answer 2

You can achieve this (not exactly what you want) if you wrap your object and change the modify function like this,

var wrapper = {};
wrapper.x = {a:1};
function modify(obj, key) {
    obj[key] = {b:2};
}
modify(wrapper, 'x');
console.log(wrapper.x); // {b:2}

Answer 3

/**
 * Method to deep update the values of the source object from new object without changing source  object reference
 *
 * @export
 * @param {*} sourceObj
 * @param {*} newObj
 */
export function updateObjKeepingRef(sourceObj: any, newObj: any): void {
  Object.keys(newObj).forEach(key => {
    // if value is object and instance is not Date
    if (newObj[key] && typeof newObj[key] === 'object' && sourceObj[key] && !(newObj[key] instanceof Date)) {
      updateObjKeepingRef(sourceObj[key], newObj[key]);
    } else {
      // updating properties
      sourceObj[key] = newObj[key];
    }
  });
}

Answer 4

I was having this issue. After some research, I opted to convert objectTwo to a JSON string, and then replace objectOne with the parsed version. In other words:

var mObjectOne = { ExampleProperty: 10 };
var mObjectTwo = { ExampleProperty: 15 };

// I wanted mObjectOne to hold the same data as mObjectTwo, but keep a separate reference
var mObjectTwoAsJSON = JSON.stringify(mObjectTwo);
mObjectOne = JSON.parse(mObjectTwoAsJSON);

// Now the references are still different, as desired, but the object data has been updated.

Thanks,

Answer 5

obj = JSON.parse(JSON.stringify(newObj))

Answer 6

Why does modify not edit the object referred to by obj?

Because inside modify when you write:

obj = {b:2}

Note that obj is a local variable to the function call of modify . A new object {b:2} is created, and the local variable obj now refers to this new object. Recall that the variable x still refers to the {a:1} object.

If x is a global variable AND if there is no local variable inside the function by the name, then you can do:

var x = {a:1};
function modify() {
  x = {b:2}
}
modify();
console.log(x) // {b:2}

---

Why does the above code work?

When you call modify() , it tries to see if it has a local variable x, since it could not find one, it looks up in the scope chain. The next scope to look for this function call is the global scope, and sure enough, there we have a x variable. Hence this global variable x 's value is set now.