After duplicating an array list object, does it copy modified original array list automatically?

Question

I have an array list like this

private options: Array<any> = [];
private optionsListDuplicate: Array<any> = [];

let data=[{id:"id",name :"name"},{id:"id2",name:"name"}];

for(let i=0;i<data.length;i++){
    this.options.push({
        label:data[i].name,
        value:data[i].id
    });
    this.optionsListDuplicate.push({
        label:data[i].name,
        value:data[i].id
    });
}

but when i modify the options array object, it modifies optionsListDuplicate object as well. Please help me understand why that happens.

I am adding a new list to the existing options object like this

this.options.push({
            label:"somelabel",
            value:"someid"
        });

I have the requirement that I need to retain the original object. So i did this

this.options=this.optionsListDuplicate;

but this.optionsListDuplicate is having the modified array object

Thats should not happen. NOTE: I supouse is label:data[i].id — Eliseo, Mar 27 '18 at 09:28
This should not have happened. How are you modifying **options**? — Naman Kheterpal, Mar 27 '18 at 09:29
How you modify the option array is the **optionsListDuplicate** in the **same loop** ? — Swoox, Mar 27 '18 at 09:29
How are you modifying `options` in a way that `optionsListDuplicate` is modified as well? — Oscar Paz, Mar 27 '18 at 09:33
what is `data[i].value`, the `data` array you have provided doesn't have that property — cyberpirate92, Mar 27 '18 at 09:46

score 1 · Answer 1 · answered Mar 27 '18 at 11:16

1

Maybe use myCopiedArray = Array.from(originalArray);

answered Mar 27 '18 at 11:16

Guntram

961
14
19

score 0 · Answer 2 · answered Mar 27 '18 at 10:11

There are 2 types of copies

Shallow copy
Deep Copy

When you perform a shallow copy, (i,e) something like x = y, x and y refer to the same memory location, so when you change either x or y, the change will be reflected in both the variables.

Example

let x = [1, 2, 3]
let y = x;
let z = x.slice(); // or JSON.parse(JSON.stringify(x));

x.push(4);

console.log(y); // prints [1, 2, 3, 4]
console.log(z); // prints [1, 2, 3]

To perform a deep copy, you can use the splice method in case of an array or JSON.parse(JSON.stringify(x)) in the case of objects.

When a deep copy is performed, the changes in one variable will NOT affect the others.

but when i modify options array object, it is modifying optionsListDuplicate object as well

In your case, you might be using the following somewhere

this.optionsListDuplicate = this.options;

Change it to

this.optionsListDuplicate = this.options.slice();
// or..
this.optionsListDuplicate = JSON.parse(JSON.stringify(this.options));

Stackblitz

tried slice and second method, still its not working – user3660375 Mar 28 '18 at 05:55 — user3660375, Mar 28 '18 at 05:55

score 0 · Answer 3 · answered Mar 27 '18 at 11:41

Well, if your assigning one array to the other, then of course when you modify one, you modify the other.

When you do

this.options = this.optionsListDuplicate;

You aren't copying the array, just creating a new variable that points to it. In fact, by doing this, the old array pointed to by this.optionsListDuplicate is lost. I suggest you to read about reference and value types in JavaScript: Primitive value vs Reference value

If you want to keep the original array, then you must do:

this.optionsListDuplicate = this.options.slice();

As, by your code (you are adding elements to this.options) I understand that you want this.optionsListDuplicate to be the 'original' array.

Of course, now you don't need to initialise both arrays in the for statement. In fact, you don't need for for anything, it's better if you use map:

private options: Array<any>;
private optionsListDuplicate;

let data=[{id:"id",name :"name"},{id:"id2",name:"name"}];

this.options = data.map(item => { label: item.name, value: item.id });
this.optionsListDuplicate = this.options.slice();

After duplicating an array list object, does it copy modified original array list automatically?

3 Answers3

Stackblitz