Contrasting assign and modify operations on arrays

Question

Contrasting assign and modify operations on arrays

After spending 2 days searching for a bug in my angular2 project's service.ts file, I finally found it and fixed it. However, I'm still trying to understand why the working code behaves differently from the bugged one, as they appear identical to me.

Here is the bugged code snippet:

for (let i = 0; i < quantita; i++) {
      this.a.p[inizio + i] = target;
    }

And here is the working code snippet:

this.a.p = this.a.p.map((giorno, index) => {
      if (index >= inizio && index < inizio + quantita) {
        return target;
      } else {
        return giorno;
      }
    });

In this code, "this.a" represents an array variable. The bug caused the changes to affect not just the selected object of the array, but also another one unintentionally. Despite debugging extensively and confirming that "this.a" was the correct instance and the code was only called once, the issue persisted.

I believe I've provided all pertinent information about the problem, but please let me know if more details are needed.

javascript angular typescript

Answer 1

Answer №1

Storing an array in a variable means holding a reference to that array. Any changes made to the values in the array will be reflected in all references to it:

let a = [1, 2, 3];
let b = a; // same array stored in a different variable
for(let i =0;i< a.length;i++) a[i] = a[i] *2;

console.log(a); // [2;3;6]
console.log(b); // [2;3;6]

Using map creates a new array with the modified values from the mapping operation:

let a = [1, 2, 3];
let b = a;
a = a.map(n => n * 2) // new array assigned to a, b retains original array

console.log(a); // [2;3;6]
console.log(b); // [1;2;3]

An alternative is to create a new array and push values into it without modifying the original array using a for loop (although using map is recommended):

let a = [1, 2, 3];
let b = a; // same array in a different variable

let tmp = []
for(let i =0;i< a.length;i++) tmp.push(a[i] *2);
a = tmp;

console.log(a); // [2;3;6]
console.log(b); // [1;2;3]

Answer 2

Storing an array in a variable means holding a reference to that array. Any changes made to the values in the array will be reflected in all references to it:

let a = [1, 2, 3];
let b = a; // same array stored in a different variable
for(let i =0;i< a.length;i++) a[i] = a[i] *2;

console.log(a); // [2;3;6]
console.log(b); // [2;3;6]

Using map creates a new array with the modified values from the mapping operation:

let a = [1, 2, 3];
let b = a;
a = a.map(n => n * 2) // new array assigned to a, b retains original array

console.log(a); // [2;3;6]
console.log(b); // [1;2;3]

An alternative is to create a new array and push values into it without modifying the original array using a for loop (although using map is recommended):

let a = [1, 2, 3];
let b = a; // same array in a different variable

let tmp = []
for(let i =0;i< a.length;i++) tmp.push(a[i] *2);
a = tmp;

console.log(a); // [2;3;6]
console.log(b); // [1;2;3]

Contrasting assign and modify operations on arrays

Answer №1

Similar questions

JavaScript code returning the correct result, however, it is unable to capture all characters in the returned string

Enhance your data presentation with Angular Material tables featuring multiple sources

How to turn off code splitting (chunks) in Vue.js and Vite.js

Combining and linking 3 RxJS Observables in TypeScript and Angular 4 without nesting to achieve dependencies in the result

nodejs - pkg encountered an error: only one entry file or directory should be specified

The Next.js build encountered an error - unable to locate function in next/script module

Sorting through an array using a different array of values

JavaScript and PHP are successfully displaying a success message despite the data not being saved to the database

The function canvas.toDataURL() is not recognized - error originating from a node-webGL wrapper

Leveraging jQuery template for JSON visualization

Displaying grouped arrays efficiently in Angular

What is the correct way to define the field name in the update() function of Mongoose?

What is the best method for sending XML data to a URL using JavaScript within an Adobe AIR application?

Extracting Object Properties in JavaScript with React

How to connect an external module to NuxtJS using Vue.js

How should elements be properly inserted into injected HTML code?

You cannot call this expression. The data type 'Boolean' does not have any callable signatures

Create random animations with the click of a button using Vue.js

Sometimes the Navbar options fail to show up consistently on the Navbar bar

Having issues with the functionality of Bootstrap 4 popover?