Javascript assigning an array object to another array

Question

Today I have faced a new issue while coding in NodeJS I was fetching a record from DB which is an object which will contain an object array as well and I have assigned object array to a new variable lets call arr and I pushed a string into arr. And for some strange reasons, my original record also affected not sure why it has happened. I know about changing/reassigning an object will affect the original object but in this case am not sure why it has happened.

let original = {
  a: 1,
  branchIds: [ {
    _id: "abc",
    name: "abc"
   }]
};
let arr = original.branchIds;
arr.push("sa");
console.log(original);

JsFiddle Link http://jsfiddle.net/jdqmLzbv/4/

Your setting the variable arr to original.branchIds, so by calling .push on arr it's pushing another item into the array of variable original. What is unclear about this? — Ryan Wilson
– Ryan Wilson, Commented Jul 18, 2018 at 18:25
@RyanWilson am pushing a new item on arr not to the original that is what am unclear about — Kannan T
– Kannan T, Commented Jul 18, 2018 at 18:29
But it is the original. Just assigning it to the variable does nothing. The value of an object is its reference, so you're pushing to the same array. — Andrew Li
– Andrew Li, Commented Jul 18, 2018 at 18:31
@Kannan By setting arr = original.branchIds you are giving it a reference to the array held by original so any changes made affect the original, Zohaib's answer explains it along with a solution. — Ryan Wilson
– Ryan Wilson, Commented Jul 18, 2018 at 18:32

Zohaib Ijaz · Accepted Answer · 2018-07-18 18:26:10Z

3

You are using same reference and actually pushing into same array. Make a copy of it and orignal will not get updated

let original = {
  a: 1,
  branchIds: [ {
    _id: "abc",
    name: "abc"
   }]
};
let arr = original.branchIds.map(obj => ({...obj}));
arr.push("sa");
console.log(original);
console.log(arr);

answered Jul 18, 2018 at 18:26

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

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

8 Comments

Zohaib Ijaz Over a year ago

No, simple slice will use same objects inside and if one updates those objects, orignal array will get changed

Andrew Li Over a year ago

I see, I overlooked that.

Zohaib Ijaz Over a year ago

@Li357 it happens :)

Kannan T Over a year ago

What does the spread operator will do here? How it will solve this issue can you please explain?

Zohaib Ijaz Over a year ago

You need to make a copy of contained objects, so either you can make a copy using spread operator or use Object.assign({}, obj) . I hope it answers your question

|

Xiaoy312 · Accepted Answer · 2018-07-18 18:25:58Z

3

You need to a copy of the array before modifying it:

let arr = original.branchIds.slice();

answered Jul 18, 2018 at 18:25

Xiaoy312

14.5k1 gold badge35 silver badges45 bronze badges

4 Comments

Zohaib Ijaz Over a year ago

Updating the already exiting items will update in orignal array as well

Xiaoy312 Over a year ago

Indeed, as the new array still holds references to the very same object. If you need a deep copy, take a look here: stackoverflow.com/questions/6089058/…

Kannan T Over a year ago

So what is the difference if i assign with .slice() method?. Could you please explain?

Xiaoy312 Over a year ago

Try arr[0].name = "qqq" with both method and you will see the difference. This is because they references the same object: Shallow copy VS Deep copy

Collectives™ on Stack Overflow

Javascript assigning an array object to another array

2 Answers 2

8 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related