How Does Object.assign Work Anyway?

I'm trying to change the field in the array. I used find function to get the object and then I used Object.assign to overwrite the value from the array. However, in one case it wo

Solution 1:

You have

let item = arr.find((x)=> x.id === 2);

and

let item2 = arr.find((x)=> x.id === 2);

In both cases the variables are a "reference" to the same object, the object contained inside the array arr. That means that if you change any of them, the changes are reflected into the others (even in the array) because they actually refer to exact same object.

Now, you modify the two variables in two different ways. In this case

Object.assign(item2, {id:3, name: "Do"});

You're merging the new values into item2, and because it is a reference, the changes are reflected into the array.

In the second case:

item = Object.assign({}, {id:3, name: "Do"});

You're merging the new values in a brand new object (the first parameter of assign {}) and then you overwrite the variable item with it. Now item is no longer a reference to the object inside the array. It is a new object, and consequently the object inside the array is not touched.

Solution 2:

In the first case, you create a new object and assign it to item. arr[1] does not change because you have not used the reference to it, like

arr[1] = Object.assign({}, { id: 3, name: "Do" });

With the second approach, you take the object and change the properties with the given object.

let arr = [{ id: 1, name: "John" }, { id: 2, name: "Doe" }];
let item = arr.find((x) => x.id === 2);

item = Object.assign({}, { id: 3, name: "Do" });
console.log(arr);                                // the array is not changed!let item2 = arr.find((x) => x.id === 2);
Object.assign(item2, { id: 3, name: "Do" });
console.log(arr);                                // the array is changed!

Solution 3:

Here is what happens. You find item:

let item = arr.find((x)=> x.id === 2);

At this point item is a reference to corresponding array element. When you later do assignment:

item = Object.assign({}, {id:3, name: "Do"});

you overwrite value of the item (previously it was a reference) to a new object, which is not a reference to original array anymore. Hence array is not affected.

Solution 4:

There is a typo/error in your code causing it to not work.

The first time you attempt to change the object you use item = Object.assign({}, {id:3, name: "Do"});. Notice the {} as the first param to Object.assign... that should be item.

let arr = [{id:1, name:"John"}, {id:2, name: "Doe"}];

let item = arr.find((x)=> x.id === 2);
//the array is not changed!Object.assign(item, {id:3, name: "Do"});
console.log(arr);

let item2 = arr.find((x)=> x.id === 3);
//the array is changed!Object.assign(item2,  {id:3, name: "Doa"});
console.log(arr);

Solution 5:

First argument of Object.assign is target.

This is used to append properties and then reference of same object are returned.

So in first case, properties are added to an existing object item2. But if you assign this to a variable to say temp and do temp.id = 10, this will also change in item2

To avoid this, item = Object.assign({}, {id:3, name: "Do"}); is used. This will copy all properties in a blank object and return its reference. So basically you have copied object and not just reference.