Object.assign query

Question

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?

Answer 1

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

Answer 2

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