How to change nested property of an object using spread operator?

Question

This is a clean version of the my situation:

const person1 = { name: "Person1 Name", hairColor: "Brown", backpack: { color: "Army-Green", content: [ "item1", "item2", "..." ] } }

And I'm trying to change only the backpack color

I already tried this code below but not success:

person = {...person1, backpack.color: "New backpack color"}}; person = {...person1, backpack: {...backpack, color: "New backpack color"}}; person = {...person1, backpack: {color: "New backpack color"}}; person = {...person1, backpack = {...backpack, color: "New backpack color"}};

@SebastianKaczmarek Because that would also change person1 — Raul Rene
– Raul Rene, Commented Nov 22, 2019 at 13:38
Ahh I see, you need a new object but with changed property. Then answers below show examples of how to do it properly. However, keep in mind that the spread operator is just a shallow copy of an object which means that nested objects are not deeply copied. Instead, only references to them are copied so there may be a situation where you change this nested object in the parent object copy and both person1 and person will be affected by this change. — Sebastian Kaczmarek
– Sebastian Kaczmarek, Commented Nov 22, 2019 at 13:42

Raul Rene · Accepted Answer · 2019-11-22 13:36:08Z

24

const person2 = {...person1, backpack: {...person1.backpack, color: 'Red' }}

answered Nov 22, 2019 at 13:36

Raul Rene

10.3k9 gold badges56 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Maxime Girou · Accepted Answer · 2019-11-22 13:35:42Z

You must spread the property first liek this below

const person1 = { name: "Person1 Name", hairColor: "Brown", backpack: { color: "Army-Green", content: [ "item1", "item2", "..." ] } } const person = {...person1, backpack : {...person1.backpack, color : "Red"}} console.log(person)

Amir · Accepted Answer · 2024-05-17 08:49:27Z

You can do like the following code:

// Clone person = { ...person1 }; // Change properties person.backpack.color: "New backpack color";

Collectives™ on Stack Overflow

How to change nested property of an object using spread operator?

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related