In Javascript, how to conditionally update a property of an object?

Question

I've seen this post and was wondering if there was a way of using javascript to write a function that could conditionally update all properties of an object by using another object with the new values?

Say I have this object:

let oldObj = {test1: 'valueTest1',test2: 'valueTest2',test3: 'valueTest3' };

And I want to update its values using the properties passed by another object like this:

let newObj = {test2: 'newValue2'}

In this case I just want to update property "test2". If I know the properties I want to update and I know the original properties beforehand, I'll use:

oldObj = {
  ...(newObj.test1) && {test1: newObj.test1} || {test1: oldObj.test1},
  ...(newObj.test2) && {test2: newObj.test2} || {test2: oldObj.test2},
  ...(newObj.test3) && {test3: newObj.test3} || {test3: oldObj.test3},
};

Meaning I will only update the value if the property comes in the new object, but of course I would have to add as many conditions as there are properties in the object.

This approach is fine, but it's not generalised so if the object has 10 properties, I would have to write 10 conditions.

Is there a way of writing a function that could conditionally update the properties so that I don't have to write the 10 (or more) conditions?

Answer 1

In a comment you've said:

I will only update properties that exist in the old object, new properties that don't exist in the old object will not be added.

That means we have to leave spread syntax and Object.assign out of the picture, as both of them would copy all properties from newObj over to oldObj.

Instead, we can use a simple loop (and if this comes up a lot, you can create a function, perhaps updateObject):

for (const key of Object.keys(newObj)) {
  if (key in oldObj) {
    oldObj[key] = newObj[key];
  }
}

let oldObj = {test1: 'valueTest1',test2: 'valueTest2',test3: 'valueTest3' };
let newObj = {test2: 'newValue2', xyz: "don't copy me"};

for (const key of Object.keys(newObj)) {
  if (key in oldObj) {
    oldObj[key] = newObj[key];
  }
}
console.log(oldObj);

(You may prefer oldObj.hasOwnProperty(key) instead of key in oldObj, depending on your rules for updating.)

Or using the relatively-new Object.entries and some destructuring:

for (const [key, value] of Object.entries(newObj)) {
  if (key in oldObj) {
    oldObj[key] = value;
  }
}

let oldObj = {test1: 'valueTest1',test2: 'valueTest2',test3: 'valueTest3' };
let newObj = {test2: 'newValue2', xyz: "don't copy me"};

for (const [key, value] of Object.entries(newObj)) {
  if (key in oldObj) {
    oldObj[key] = value;
  }
}
console.log(oldObj);

---

Before the clarification quoted above, I'd posted the following about spread and Object.assign. Just for completeness, but they don't apply to your case where you want to skip properties that oldObj doesn't have:

You don't have to be anything like that complicated with the spread syntax, just:

oldObj = {...oldObj, ...newObj};

let oldObj = {test1: 'valueTest1',test2: 'valueTest2',test3: 'valueTest3' };
let newObj = {test2: 'newValue2', xyz: "I get copied too"};

oldObj = {...oldObj, ...newObj};
console.log(oldObj);

That will create a new object with all of oldObj's and newObj's properties, with newObj's properties winning if both have the same name.

Note that property spread is brand-new, just approved to Stage 4 (will be in the ES2018 spec). If you don't want to use a Stage 4 proposal, use Object.assign:

oldObj = Object.assign({}, oldObj, newObj);

let oldObj = {test1: 'valueTest1',test2: 'valueTest2',test3: 'valueTest3' };
let newObj = {test2: 'newValue2', xyz: "I get copied too"};

oldObj = Object.assign({}, oldObj, newObj);
console.log(oldObj);

You'd also use Object.assign if you want to update oldObj in-place instead of creating a new object:

Object.assign(oldObj, newObj);

let oldObj = {test1: 'valueTest1',test2: 'valueTest2',test3: 'valueTest3' };
let newObj = {test2: 'newValue2', xyz: "I get copied too"};

Object.assign(oldObj, newObj);
console.log(oldObj);

---