Use 'this' keyword while spreading an object

Question

I have an unusuall problem. What I try to achive is to modify an object's property while spreading via method. Example

const obj1 = {
    prop1: "value1",
    prop2: function() {
        this.prop1 = 10
        return "value2"
    }
}
const obj2 = {
    ...obj1,
    prop2: obj1.prop2()
}

And now, I would like obj2 to look like this:

{
    prop1: 10,
    prop2: "value2"
}

But beacause of this's scoping only prop1 in obj1 gets changed and obj2 looks like this:

{
    prop1: "value1",
    prop2: "value2"
}

I know that I could change obj1.prop1 directly afterwards, but the thing is that second part of the code (obj2 initialization) is in one of the packages my project use, and do not want to modify it. The only thing I control is the obj1 that I pass further. Is there any way to do that without modifing source code of a package?

Answer 1

You can achieve it by changing the obj2 initialization to this:

const obj2 = {
    prop2: obj1.prop2(),
    ...obj1,
    prop2: obj1.prop2(),
}

But like others mentioned in the comments - this is very smelly...

In this snippet:

const obj1 = {
    prop1: "value1",
    prop2: function() {
        this.prop1 = 10
        return "value2"
    }
}

modifying prop1 in the prop2 getter function is a side effect, and is considered to be code smell .

Answer 2

I dont know you're use case, but maybe you could do the following. obj3 would contain your needed result

 const obj1 = { prop1: "value1", prop2: function () { this.prop1 = 10; return "value2"; } }; const obj2 = {...obj1, prop2: obj1.prop2() }; const prop2 = obj1.prop2; const prop2Value = obj1.prop2(); const obj3 = {...obj1, ...prop2, prop2: prop2Value}; console.log(obj1); console.log(obj2); console.log(obj3);