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

7

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)

answered Nov 22, 2019 at 13:35

Maxime Girou

1,5703 gold badges18 silver badges35 bronze badges

Comments

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

-2

You can do like the following code:

// Clone
person = { ...person1 };

// Change properties
person.backpack.color: "New backpack color";

answered May 17, 2024 at 8:49

Amir

13.9k22 gold badges102 silver badges145 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related