What is the reason for the original list being affected when the cloning list is created using a

Question

What is the reason for the original list being affected when the cloning list is created using a

I am trying to convert an object inside an array into a string using the code below. However, I can't seem to understand why it's affecting the original array. I thought that 'slice' was supposed to clone the array?

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

Upon checking both arrays, they seem to be identical.

javascript arrays

Answer 1

Answer №1

According to MDN's documentation on the Array.prototype.slice method,

The slice() function creates a shallow copy of part of an array in a new array object.

The key concept here is "shallow copy", where a new Array is generated with elements pointing to the same objects as the original.

In this scenario, despite slicing, both the initial and copied arrays have elements that reference the same cluster objects in memory.

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

As all corresponding elements point to the same objects, changes made through one array will also affect the other.

Note: For deep copying, referring to solutions in this thread may be more appropriate.

Answer 2

According to MDN's documentation on the Array.prototype.slice method,

The slice() function creates a shallow copy of part of an array in a new array object.

The key concept here is "shallow copy", where a new Array is generated with elements pointing to the same objects as the original.

In this scenario, despite slicing, both the initial and copied arrays have elements that reference the same cluster objects in memory.

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

As all corresponding elements point to the same objects, changes made through one array will also affect the other.

Note: For deep copying, referring to solutions in this thread may be more appropriate.

Answer 3

Answer №2

As explained by @thefourtheye, you are making a shallow copy of the array. To make a deep copy of the array elements and change the status, you can utilize Array.prototype.map along with angular.merge():

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

Answer 4

As explained by @thefourtheye, you are making a shallow copy of the array. To make a deep copy of the array elements and change the status, you can utilize Array.prototype.map along with angular.merge():

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

What is the reason for the original list being affected when the cloning list is created using a

Answer №1

Answer №2

Similar questions

Serving static files in Next.js with specific extensions without triggering a download

Error: Koa.js framework is unable to find the "users" relation in the Sequelize database

Utilizing JavaScript regex to remove substrings that contain parentheses

What is the process for making an Ajax request in Rails?

Replace the transformation matrix of a three.js object/mesh entirely

Avoid having gulp's uglify plugin remove es6 code

Utilizing JQuery AJAX to Submit a JSONP Form with File Attachments

What is the reason behind the brute force method for finding the maximum sum subarray having a time complexity of

Field Enchanted - JQuery Plugin

Manipulate object position using Aframe and three.js

The Angular Reactive Forms error message indicates that attempting to assign a 'string' type to an 'AbstractControl' parameter is invalid

What is the best way to use createElement in JavaScript to insert <p> and <span> elements within a <div>?

After the "div" tag comes the magic of AJAX, PHP, and JAVASCRIPT, replacing

Is it possible to utilize index as a unique identifier for React Components?

The AJAX request is not successful because it is encountering a ReferenceError due to attempting to assign a value to an

Rendering a texture onto a 1x1 model in three.js

Tips for organizing and nesting form data

The value remains constant until the second button is pressed

Choose each day's time slot on the jQuery FullCalendar version 2.x

Scala's multidimensional array functionality can be further enhanced through the use of the