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?
CodePudding user response:
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.
CodePudding user response:
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);