assigning a value to an index in an array will update all elements in the array

Question

assigning a value to an index in an array will update all elements in the array

I'm encountering an issue with updating values in a complex JavaScript object that contains an array. Whenever I attempt to set the value for one attribute at a specific index, it ends up being applied to all items in the array.

Let's illustrate this with a simple example:

const obj = new Object();    
obj.arr = [];
obj.arr[0] = {pos:[0,0]};
obj.arr[1] = {pos:[0,0]};

If I try to assign values to attributes using specific indices:

obj.arr[0].pos = [10,10];
obj.arr[1].pos = [5,5];

The problem arises when the value [5,5] seems to be propagating to both items in the array. This results in:

console.log(obj.arr[0].pos) returning [5,5] and

console.log(obj.arr[1].pos) also yielding [5,5]

Although my actual object is more intricate, this simplified scenario conveys the essence of the issue...

Any suggestions or insights on how to address this?

javascript arrays object

Answer 1

Answer №1

When multiple variables/properties of an object point to the same value, they are considered sharing the same link.

The accuracy of the answer depends on the composition of your object.

var nested = {a:1};
var obj = {arr:[]};
obj.arr[0] = {pos:0, n:nested};
obj.arr[1] = {pos:0, n:nested};

obj.arr[0].pos = 1;
obj.arr[1].pos == 1; // false
obj.arr[0].nested.a = 2;
obj.arr[1].nested.a == 2; // true

Assigning identical array/object literals does not result in the same outcome.

var a = [0];
var b = [0];
b[0] = 1;
a[0] == 1; // false
b = a;
a[0] = 2;
b[0] == 2; // true

a = b = [0];
a[0] = 1;
b[0] == 1; // true

Answer 2

When multiple variables/properties of an object point to the same value, they are considered sharing the same link.

The accuracy of the answer depends on the composition of your object.

var nested = {a:1};
var obj = {arr:[]};
obj.arr[0] = {pos:0, n:nested};
obj.arr[1] = {pos:0, n:nested};

obj.arr[0].pos = 1;
obj.arr[1].pos == 1; // false
obj.arr[0].nested.a = 2;
obj.arr[1].nested.a == 2; // true

Assigning identical array/object literals does not result in the same outcome.

var a = [0];
var b = [0];
b[0] = 1;
a[0] == 1; // false
b = a;
a[0] = 2;
b[0] == 2; // true

a = b = [0];
a[0] = 1;
b[0] == 1; // true

assigning a value to an index in an array will update all elements in the array

Answer №1

Similar questions

Transitioning create-react-app from JavaScript to Typescript

Exploring the functionalities of the Chrome Web Store with WebdriverJS

Clearing a textarea in jQuery

Transferring an array to PHP using AJAX

Error Type: expected string, instead of integer; Python

inject a $scope object into a view when a button is clicked

How to dynamically populate a Vue multiple select dropdown with v-for loop?

What does it mean in Javascript when b1 is undefined while o1 has a value and is equal to b1?

Adjust the width of the element to match the size of the image within

JavaScript group by first letter issueI am facing a problem when trying

How can I cycle through an ArrayList containing nodal values of an array?

Managing redundant asynchronous data in AngularJS

Using AngularJS to showcase an organized $http reply in a segment of a template

The `value` attribute in the Dropdown component should be an array if the `multiple` option is enabled. The current type received is a `[object

Error with JavaScript slideshow The slideshow using JavaScript seems to

An array of objects, where each object contains an array populated with variable names instead of their corresponding values

Retrieving the specific coordinates from a sole contour identified through the findcontours function in opencv with the use of python

Combining Two Arrays in PHP to Create a Table with the First Array displayed vertically and the Second Array

extract element from a string with the help of jquery

Tips for integrating filters in a Rails application without needing to reload the page