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

Experiencing difficulties when trying to pan and zoom the data obtained from d3.json within a line chart

Tips on implementing Dynamic arrays in the useEffect hook within React applications

Developing a matrix arithmetic parser using JavaScript

"Enhance your website with the powerful autocompletion feature of

Exploring the elements of an array in Python

Expanding size on hover without affecting the alignment of surrounding elements

response cannot be generated outside of the db.query function

Disabling iframe javascript timers when iframe is no longer in the user's view

How to include a file within another file in Node.js

Sending a request in Vue.js and not receiving a defined response

React: The issue with async and await not functioning as expected when using fetch

Utilizing Node.js, delete the author from the database and then use a GET request to display all

What are some ways to prevent manual page reloading in Node.js when using EJS?

Implementing a feature to automatically set the datepicker value to the selected date upon page initialization

Having trouble setting up the next-auth login page and experiencing issues with the getProviders() function

Do all descendants consistently trigger rerenders?

Text will split into two at a later time

Could someone clarify the specific workings of the Google V8 bytecode related to the creation of object literals

Customize the icon used for expanding and collapsing in AngularJS

Issue with error handling in Node and MongoDB when using Express, Mongoose, and the 'mongoose-unique-validator' plugin