Unexpected result when attempting to add an object to an array

Question

Just a bit confused as to why the following is occurring:

let groupdetails = {
      groupName: "",
};    
const groupsArray = [];

groupdetails.groupName = 'A'
groupsArray.push(groupdetails)
groupdetails.groupName = 'B'
groupsArray.push(groupdetails)
console.log(groupsArray)

The result I am getting is:

[ { groupName: "B" }, { "groupName": "B" } ]

The result I was expecting was:

[ { groupName: "A" }, { "groupName": "B" } ]

Unsure what I am doing wrong?

You are pushing _the same_ object to the array twice. `groupsArray[0] === groupsArray[1]`. Create a new object in the middle and you'll get what you want. — CherryDT, Jun 22 '21 at 06:54
@CherryDT - could you please assist with what you mean about creating a new object? — ArthurJ, Jun 22 '21 at 06:56
`groupdetails = { groupName: 'B' }` instead of `groupdetails.groupName = 'B'`; or adding `groupdetails = { ...groupdetails }` before the `groupdetails.groupName = 'B'` - otherwise you are accessing the same `groupdetails` that you just pushed and change it (and push the same thing a second time afterwards) - pushing the object won't create a copy, the element in the array points to the same object that your variable also points to at that point — CherryDT, Jun 22 '21 at 06:56
Maybe this helps to understand: https://stackoverflow.com/questions/518000/is-javascript-a-pass-by-reference-or-pass-by-value-language — CherryDT, Jun 22 '21 at 06:57

score 1 · Answer 1 · answered Jun 22 '21 at 06:58

1

You are facing issue with Shallow Copy and Deep Copy..

In your case eventhough you were updating the value groupdetails.groupName = 'B', this referes to the same node as the one you pushed initially. You have to creat a new node with spread operater or some thing and update its value and push it again.

In order to achieve your requirement you have to follow something like below mentioned.

let groupdetails = {
  groupName: "",
};
const groupsArray = [];

groupdetails.groupName = 'A'
groupsArray.push(groupdetails);
const newNode = { ...groupdetails };
newNode.groupName = 'B';
groupsArray.push(newNode);
console.log(groupsArray);

answered Jun 22 '21 at 06:58

Nitheesh

19,238
3
22
49

What happens if I need to push an unknown number of groupdetails, i.e. C, D, etc ? – ArthurJ Jun 22 '21 at 07:00
@ArthurJ You can either go with this way or can do directly ['A', 'B', 'C'].forEach(node => groupsArray.push({ groupName: node, })}; – Nitheesh Jun 22 '21 at 07:08

Vishnu · Accepted Answer · 2021-06-23T08:10:31.683

1

You should create a different reference each time you push an element

let groupdetails = {
      groupName: "",
};    
const groupsArray = [];

groupdetails.groupName = 'A'
groupsArray.push(groupdetails)
groupdetails = {...groupdetails}
groupdetails.groupName = 'B'
groupsArray.push(groupdetails)
console.log(groupsArray)

edited Jun 23 '21 at 08:10

answered Jun 22 '21 at 06:59

Vishnu

2,135
2
30
51

score 1 · Answer 3 · answered Jun 22 '21 at 09:47

Remember Arrays, Objects are copied by references, not just by values

a = 'John';
b = a;
console.log(a === b);

Here values are copied to another variable.

obj = {name: 'John'};
newObj = obj;
newObj.name = 'Kate';
console.log(newObj);  // {name: 'Kate'}
console.log(obj)      // {name: 'Kate'}

Here the reference is passed to the other object. So once an object is modified it will be reflected on the other object.

In your case, this will work,

const groupsArray = [];

function addNew(value) {
    return { groupName: value}
}

groupsArray.push(addNew('A'));
groupsArray.push(addNew('B'));
console.log(groupsArray);

Unexpected result when attempting to add an object to an array

3 Answers3