How to change Object inside Object without mutation?

Question

So my question is how to change petNames object inside user Object without mutating it.

const user = { 
        name: 'Harry', 
        age: 50, 
        petNames: { 
         dog: 'Lisie', 
         cat: 'Foxer' 
        } 
    };

First level we can change like

{...user, age: 48 }

It will return

{ 
 name: 'Harry', 
 age: 48, 
 petNames: { 
    dog: 'Lisie', 
    cat: 'Foxer' 
 } 
};

But how can i change petNames ?

For example dog name change to 'Rex'.

And get object like

{ 
 name: 'Harry', 
 age: 50, 
 petNames: { 
    dog: 'Rex', 
    cat: 'Foxer' 
 } 
};

Thank you!

You can't change an object without changing it. You are likely searching for [how to deep clone an object](https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript) — ASDFGerte, Jul 19 '18 at 16:35

score 4 · Accepted Answer · answered Jul 19 '18 at 16:28

You can spread the inner properties as well:

const user = {
  name: 'Harry',
  age: 50,
  petNames: {
    dog: 'Lisie',
    cat: 'Foxer'
  }
};

const newUser = {
  ...user,
  petNames: {
    ...user.petNames,
    dog: 'rex'
  }
};

console.log(user.petNames === newUser.petNames); // false

How to change Object inside Object without mutation?

1 Answers1