javascript - Object.assign query - Stack Overflow

admin管理员组

文章数量:1023744

let user = { name: "Nasir", age: 25 };
let employee = Object.assign( {}, user, { add: "dhaka", age: 35 } );

console.log( user ); //{ name: 'Nasir', age: 25 }
console.log( employee ); // { name: 'Nasir', age: 35, add: 'dhaka' }

//------------------------------------------//

let user1 = { name: "ahmed" };
let employee1 = Object.assign( user1, { permission: "can edit" } );

console.log( user1 ); // { name: 'ahmed', permission: 'can edit' }
console.log( employee1 ); //{ name: 'ahmed', permission: 'can edit' }

Why user1 object gets the property: permission?

I copied user1 objects properties to employee1 and add additional property permission, so permission should be found on only the employee1 object, not in user1.

Please guide me, what did I miss?

let user = { name: "Nasir", age: 25 };
let employee = Object.assign( {}, user, { add: "dhaka", age: 35 } );

console.log( user ); //{ name: 'Nasir', age: 25 }
console.log( employee ); // { name: 'Nasir', age: 35, add: 'dhaka' }

//------------------------------------------//

let user1 = { name: "ahmed" };
let employee1 = Object.assign( user1, { permission: "can edit" } );

console.log( user1 ); // { name: 'ahmed', permission: 'can edit' }
console.log( employee1 ); //{ name: 'ahmed', permission: 'can edit' }

Why user1 object gets the property: permission?

I copied user1 objects properties to employee1 and add additional property permission, so permission should be found on only the employee1 object, not in user1.

Please guide me, what did I miss?

• javascript

Share Improve this question Follow edited Apr 13, 2021 at 6:43 Nguyễn Văn Phong 14.2k1919 gold badges4646 silver badges6363 bronze badges asked Apr 13, 2021 at 6:14 NasirNasir 27544 silver badges1515 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Since, the Object.assign() has syntax Object.assign(target, source) so you are using user1 as a target. Thus, use an empty object {} as a target so that the objects are merged in that target and the user1 object is not changed.

let user1 = {
  name: "ahmed"
};
let employee1 = Object.assign({}, user1, {
  permission: "can edit"
});
console.log(user1); // { name: 'ahmed' }
console.log(employee1); //{ name: 'ahmed', permission: 'can edit' }

You can even use the spread syntax to achieve this:

let user1 = {
  name: "ahmed"
};
let employee1 = {
  ...user1,
  ...{ permission: "can edit" }
}
console.log(user1); // { name: 'ahmed' }
console.log(employee1); //{ name: 'ahmed', permission: 'can edit' }

According to MDN's docs says that

Properties in the target object are overwritten by properties in the sources if they have the same key. Later sources' properties overwrite earlier ones

And, the syntax is

Object.assign(target, ...sources)

So that's the reason why user1 has been changed.

---

Solution, There are 2 options:

1. Create a dummy target object by adding {} at first param.

Please take a closer the second param ...sources, and specs say that

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object

so from the second params that act as source.

let user1 = { name: "ahmed" };
let employee1 = Object.assign({}, user1, { permission: "can edit" } );

console.log(user1); // { name: 'ahmed' }
console.log(employee1); //{ name: 'ahmed', permission: 'can edit' }

2. Using Spread in object literals

let user1 = { name: "ahmed" };
let employee1 = {...user1, ...{permission: 'can edit'}}

console.log(user1); // { name: 'ahmed' }
console.log(employee1); //{ name: 'ahmed', permission: 'can edit' }

let user1 = { name: "ahmed" };
let employee1 = {...user1,...{ permission: "can edit" }};
console.log( user1 ); // { name: 'ahmed', permission: 'can edit' }
console.log( employee1 );

Object.assign(obj1,obj2 ,....) Here assign method will add all property or object to left side object or the object you have in first Param (i.e obj1) that is why its return in both. so try {} in first left side or use above shorthand.

The reason this happens is that Object.assign() alters the first parameter object given to it. In the first care you are altering an empty object {} and in the second case you are altering user1 object.

let user = { name: "Nasir", age: 25 };
let employee = Object.assign( {}, user, { add: "dhaka", age: 35 } );

console.log( user ); //{ name: 'Nasir', age: 25 }
console.log( employee ); // { name: 'Nasir', age: 35, add: 'dhaka' }

//------------------------------------------//

let user1 = { name: "ahmed" };
let employee1 = Object.assign( user1, { permission: "can edit" } );

console.log( user1 ); // { name: 'ahmed', permission: 'can edit' }
console.log( employee1 ); //{ name: 'ahmed', permission: 'can edit' }

Why user1 object gets the property: permission?

I copied user1 objects properties to employee1 and add additional property permission, so permission should be found on only the employee1 object, not in user1.

Please guide me, what did I miss?

let user = { name: "Nasir", age: 25 };
let employee = Object.assign( {}, user, { add: "dhaka", age: 35 } );

console.log( user ); //{ name: 'Nasir', age: 25 }
console.log( employee ); // { name: 'Nasir', age: 35, add: 'dhaka' }

//------------------------------------------//

let user1 = { name: "ahmed" };
let employee1 = Object.assign( user1, { permission: "can edit" } );

console.log( user1 ); // { name: 'ahmed', permission: 'can edit' }
console.log( employee1 ); //{ name: 'ahmed', permission: 'can edit' }

Why user1 object gets the property: permission?

I copied user1 objects properties to employee1 and add additional property permission, so permission should be found on only the employee1 object, not in user1.

Please guide me, what did I miss?

• javascript

Share Improve this question Follow edited Apr 13, 2021 at 6:43 Nguyễn Văn Phong 14.2k1919 gold badges4646 silver badges6363 bronze badges asked Apr 13, 2021 at 6:14 NasirNasir 27544 silver badges1515 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Since, the Object.assign() has syntax Object.assign(target, source) so you are using user1 as a target. Thus, use an empty object {} as a target so that the objects are merged in that target and the user1 object is not changed.

let user1 = {
  name: "ahmed"
};
let employee1 = Object.assign({}, user1, {
  permission: "can edit"
});
console.log(user1); // { name: 'ahmed' }
console.log(employee1); //{ name: 'ahmed', permission: 'can edit' }

You can even use the spread syntax to achieve this:

let user1 = {
  name: "ahmed"
};
let employee1 = {
  ...user1,
  ...{ permission: "can edit" }
}
console.log(user1); // { name: 'ahmed' }
console.log(employee1); //{ name: 'ahmed', permission: 'can edit' }

According to MDN's docs says that

Properties in the target object are overwritten by properties in the sources if they have the same key. Later sources' properties overwrite earlier ones

And, the syntax is

Object.assign(target, ...sources)

So that's the reason why user1 has been changed.

---

Solution, There are 2 options:

1. Create a dummy target object by adding {} at first param.

Please take a closer the second param ...sources, and specs say that

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object

so from the second params that act as source.

let user1 = { name: "ahmed" };
let employee1 = Object.assign({}, user1, { permission: "can edit" } );

console.log(user1); // { name: 'ahmed' }
console.log(employee1); //{ name: 'ahmed', permission: 'can edit' }

2. Using Spread in object literals

let user1 = { name: "ahmed" };
let employee1 = {...user1, ...{permission: 'can edit'}}

console.log(user1); // { name: 'ahmed' }
console.log(employee1); //{ name: 'ahmed', permission: 'can edit' }

let user1 = { name: "ahmed" };
let employee1 = {...user1,...{ permission: "can edit" }};
console.log( user1 ); // { name: 'ahmed', permission: 'can edit' }
console.log( employee1 );

Object.assign(obj1,obj2 ,....) Here assign method will add all property or object to left side object or the object you have in first Param (i.e obj1) that is why its return in both. so try {} in first left side or use above shorthand.

The reason this happens is that Object.assign() alters the first parameter object given to it. In the first care you are altering an empty object {} and in the second case you are altering user1 object.

本文标签： javascriptObjectassign queryStack Overflow