How can i add a property to an inner Object in Typescript with spread operator?

Question

I have following Object

let car = { year: 2004, type: {name: "BMW"} }

Now i want to add a property to inner object "type". I want to to this with the spread operator, since i need a new object, because the existing is an immuteable state object. The result should be:

{ year: 2004, type: {name: "BMW", modell: "3er"}}

How can i do this?

score 5 · Accepted Answer · answered Jun 13 '19 at 11:18

5

const car = { year: 2004, type: {name: "BMW"} };
const modifiedCar = {...car, type: {...car.type, modell: "3er"}};

answered Jun 13 '19 at 11:18

chelmertz

20,399
5
40
46

score 1 · Answer 2 · answered Jun 13 '19 at 11:31

Try this :

(Not Immutable)

let car = { year: 2004, type: {name: "BMW"} } // changed
Object.assign(car.type, {modell: "3er"});

console.log(car)

(Immutable)

let car = { year: 2004, type: {name: "BMW"} } // still the same
const result = Object.assign({}, car, {type:{...car.type, modell: "3er"}});

console.log(result)

score 0 · Answer 3 · answered Aug 01 '22 at 09:30

I wanted to add another variable to this object which as you can see is deeply nested.

const functionParams = {
    handler,
    runtime,
    environment: {
        variables: {
            restrictedActions: config.restrictedActions
        }
    }
}

I achieved it like so:

const newFunctionParams = {...functionParams, environment: {
    ...functionParams.environment, variables: {
        ...functionParams.environment.variables,
            APIAllowEndpoint: `https://severless....`,
            APIDenyEndpoint: `https://severless....`,
            TOPIC: topicArn
    }
}}

The result:

{
    handler,
    runtime,
    environment: {
        variables: {
            restrictedActions: config.restrictedActions,
            APIAllowEndpoint: `https://severless....`,
            APIDenyEndpoint: `https://severless....`,
            TOPIC: topicArn
        }
    }
}

Credit to @chelmertz

How can i add a property to an inner Object in Typescript with spread operator?

3 Answers3