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
– CherryDT, Commented Jun 22, 2021 at 6:54
@CherryDT - could you please assist with what you mean about creating a new object? — ArthurJ
– ArthurJ, Commented Jun 22, 2021 at 6: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
– CherryDT, Commented Jun 22, 2021 at 6:56
Maybe this helps to understand: stackoverflow.com/questions/518000/… — CherryDT
– CherryDT, Commented Jun 22, 2021 at 6:57

Vishnu · Accepted Answer · 2021-06-23 08:10:31Z

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, 2021 at 8:10

answered Jun 22, 2021 at 6:59

Vishnu

2,2172 gold badges36 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nitheesh · Accepted Answer · 2021-06-22 06:58:57Z

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, 2021 at 6:58

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

2 Comments

ArthurJ Over a year ago

What happens if I need to push an unknown number of groupdetails, i.e. C, D, etc ?

Nitheesh Over a year ago

@ArthurJ You can either go with this way or can do directly ['A', 'B', 'C'].forEach(node => groupsArray.push({ groupName: node, })};

Vimax · Accepted Answer · 2021-06-22 09:47:04Z

1

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);

answered Jun 22, 2021 at 9:47

Vimax

112 bronze badges

Collectives™ on Stack Overflow

Unexpected result when attempting to add an object to an array

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related