javascriptecmascript-6

Object.assign—override nested property


I have an Object a like that:

const a = {
  user: {
   …
   groups: […]
   …
  }
}

whereby there are a lot more properties in a.user

And I would like to change only the a.user.groups value. If I do this:

const b = Object.assign({}, a, {
  user: {
    groups: {}
  }
});

b doesn't have any other Property except b.user.groups, all others are deleted. Is there any ES6 way to only change the nested property, without loosing all the other, with Object.assign?


Solution

  • After some trying I could find a solution that looks pretty nice like that:

    const b = Object.assign({}, a, {
      user: {
        ...a.user,
        groups: 'some changed value'
      }
    });
    

    To make that answer more complete here a tiny note:

    const b = Object.assign({}, a)
    

    is essentially the same as:

    const b = { ...a }
    

    since it just copies all the properties of a (...a) to a new Object. So the above can written as:

     const b = {
       ...a,          //copy everything from a
       user: {        //override the user property
          ...a.user,  //same sane: copy the everything from a.user
          groups: 'some changes value'  //override a.user.group
       }
     }