Object.assign query

user_14951261 0
Viewed 189
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
4 Answers

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' }

user_77938610

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' }

  1. 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' }

user_90719430 
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.

user_114923780

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.

user_120234020
Related