It appears that the JavaScript array is able to modify itself autonomously

Question

It appears that the JavaScript array is able to modify itself autonomously

Currently, I am working on a project using P5.js where I am saving values in an array and then creating a copy of that array to manipulate. However, I have encountered an issue where manipulating the second array also changes the original one, and I cannot determine the reason behind this unexpected behavior.

var particles = []
var particlesCopy = []

function calculateInitialPositions(){

  for (var i = 0; i < pixels.length; i+=4) {
    if (pixels[i] == 0){
      var x_ = i  % width
      var y_ = i / width / 2
      var coords_ = {x : x_ , y : y_}
      particles.push(coords_)
    }
  };
}

function setup() {  
  loadPixels()
  calculateInitialPositions();
  particlesCopy = [...particles]
}

function draw() {
  for (var i = 0; i < particlesCopy.length; i++) {
    particlesCopy[0].x = 99
  };
  console.log(particles[0].x)
}

The console now prints 99

javascript arrays p5.js

Answer 1

Answer №1

In Javascript, the = operator assigns Objects, including arrays, by reference rather than by value. This means that when you write:

particelsCopy = particels

You are essentially making particelsCopy point to the same array as particels. They are not two separate arrays. To create a true copy of the array, you need to do it like this:

particelsCopy = particels.slice();

Keep in mind that this is a shallow copy, so if the array contains objects or arrays, they will still be copied by reference. You would have to repeat this process for nested items (e.g., the coords_ object). If dealing with objects, use the pattern

copy = Object.assign({}, original);

.

To make a deep copy of everything by value, you'll have to recursively perform this on each level of nested objects/arrays. Many libraries, such as jQuery, offer pre-built functions to help achieve this.

Answer 2

In Javascript, the = operator assigns Objects, including arrays, by reference rather than by value. This means that when you write:

particelsCopy = particels

You are essentially making particelsCopy point to the same array as particels. They are not two separate arrays. To create a true copy of the array, you need to do it like this:

particelsCopy = particels.slice();

Keep in mind that this is a shallow copy, so if the array contains objects or arrays, they will still be copied by reference. You would have to repeat this process for nested items (e.g., the coords_ object). If dealing with objects, use the pattern

copy = Object.assign({}, original);

.

To make a deep copy of everything by value, you'll have to recursively perform this on each level of nested objects/arrays. Many libraries, such as jQuery, offer pre-built functions to help achieve this.

Answer 3

Answer №2

Utilizing destructuring enables you to duplicate objects within an array

particlesCopy = particles.map(obj => ({...obj}));

Answer 4

Utilizing destructuring enables you to duplicate objects within an array

particlesCopy = particles.map(obj => ({...obj}));

Answer 5

Answer №3

When you see the line:

particelsCopy = particels

It's important to note that this code snippet is actually creating a copy of the array reference, not the individual elements within the array.

To truly create a separate copy of the array with its elements, you'll need to allocate a new array object and then copy over each element individually. If the elements themselves are objects, you may also need to make sure you're making a shallow or deep copy of them as well. One way to achieve this is by using Object.assign() to create a shallow copy.

particelsCopy = [] // assuming this step has already been done
for (var i=0; i<particels.length; i++){
   particelsCopy[i] = Object.assign({}, particels[i]};
}

Answer 6

When you see the line:

particelsCopy = particels

It's important to note that this code snippet is actually creating a copy of the array reference, not the individual elements within the array.

To truly create a separate copy of the array with its elements, you'll need to allocate a new array object and then copy over each element individually. If the elements themselves are objects, you may also need to make sure you're making a shallow or deep copy of them as well. One way to achieve this is by using Object.assign() to create a shallow copy.

particelsCopy = [] // assuming this step has already been done
for (var i=0; i<particels.length; i++){
   particelsCopy[i] = Object.assign({}, particels[i]};
}

It appears that the JavaScript array is able to modify itself autonomously

Answer №1

Answer №2

Answer №3

Similar questions

"Exploring the power of JQuery in adding new elements and accessing the newly appended

Utilizing JSON.stringify with variables and arrays

JavaScript framework that is easily customizable to include support for XmlHttpRequest.onprogress, even if it needs to be emulated

The component is no longer able to locate the imported element when it is being shared

Oops! An unexpected field was encountered while trying to use the uploadMultiple function from dropzone.js

Using JavaScript, generate an array of objects that contain unique values by incrementing each value by 1

The concept of navigation and passing parameters in Angular.js

Having trouble retrieving data from the database when passing input to a mongoose query using an href tag in Node.js

Navigating between different components in React Router V4 allows for seamless transitions without having to reload the

What is the best way to patiently wait for lines to be printed out one by one

Ways to extract the source code of a webpage that has been modified on load

Calculate the sum of elements in an array based on a condition provided in a different

Link a distinctive number to a specific element

Having trouble reaching a public method within an object passed to the @Input field of an Angular component

Exploring the world of CouchDB through jQuery and AJAX POST requests while navigating

Only switch a radio button when the Ajax call results in success

How can I efficiently utilize HTML/CSS/JS to float items and create a grid that accommodates expandable items while minimizing wasted space?

Tips for refreshing information in the Angular front-end Grid system?

Adding Empty Space Following Error Message in Codeigniter

What are the reasons and methods for cleaning up components in React JavaScript?