Why does Cloning list using slice effects the original list

Question

Below is my code to change an object inside an array into a string. Can't figure out why it effects the original array. slice is supposed to clone array, if I am right?

var cloned = $scope.selected.items.slice(0);
cloned.forEach(function (cluster) {
  cluster.status = cluster.status.name;
})
ObjToPost.MO = cloned;
console.log("consoling the cluster list", ObjToPost.MO);
console.log("consoling the original cluster list", $scope.selected.items);

After consoling both the arrays are same

I don't see you cloning anything! The cloned is a direct reference for the original list. — Fals, Oct 02 '15 at 12:43

score 7 · Answer 1 · edited May 23 '17 at 11:58

7

Quoting MDN on Array.prototype.slice,

The slice() method returns a shallow copy of a portion of an array into a new array object.

The important words here are "shallow copy". It creates a new Array and makes the elements of the array point to the same object.

In your case, even after slicing, each of the array elements in both the original and cloned arrays refer the same cluster objects in memory.

Original                        Cloned
+-----+                        +-----+
|  0  |--> Cluster Object 1 <--|  0  |
+-----+                        +-----+
|  1  |--> Cluster Object 2 <--|  1  |
+-----+                        +-----+
|  2  |--> Cluster Object 3 <--|  2  |
+-----+                        +-----+

Since all the corresponding elements are referring to the same objects, changing it through one array will be reflected in the other as well.

Note: If you are looking for a way to do deep copy, then you might want to check this question.

edited May 23 '17 at 11:58

Community

1
1

answered Oct 02 '15 at 12:47

thefourtheye

233,700
52
457
497

Is there a way around to copy the array – Tushar Oct 02 '15 at 12:49
What I want is that original array should remain unaffected, and I should get a temporary copy of same array, which by the way I need to POST after modifying it – Saurabh Tiwari Oct 02 '15 at 13:19
I tried using $.extend, but it seems it can clone only objects and not array, whereas arrays are also objects – Saurabh Tiwari Oct 02 '15 at 13:21
@SaurabhTiwari The best way is to write a function which clones the clusterObjects and then invoke it like this `var clonedArray = original.map(cloneCluster)` – thefourtheye Oct 02 '15 at 13:28

score 0 · Answer 2 · answered Oct 02 '15 at 12:56

As @thefourtheye explained, you are creating a shallow copy of the array. To deep copy the array items, and modify the status, you can use Array.prototype.map with angular.merge():

ObjToPost.MO = $scope.selected.items.map(function(cluster) {
    return angular.merge({}, cluster, { status: cluster.status.name }); // create a deep copy of each item, and override status with status.name
});

Why does Cloning list using slice effects the original list

2 Answers2

Linked

Related