When I use the shift method on one array, it alters the contents of that array

Question

When I use the shift method on one array, it alters the contents of that array

I am encountering a peculiar issue with two arrays of objects in my program. One array is named "Responses" and the other is called "Questions." The problem arises when I remove the first element from an object in the "Questions" array using shift() method. Surprisingly, the second array "Responses" also gets affected even though I haven't explicitly called shift() on it. Below is the snippet of code causing this behavior:

private async Sousstep(stepContext: WaterfallStepContext): Promise<DialogTurnResult> {
    const siteDetails = stepContext.options as SiteDetails;

    // Logic goes here...

}

javascript arrays typescript botframework

Answer 1

Answer №1

DB.query().then((result) => { Questions = result; Responses = result ; 
console.log(Responses[0].subquestions)})

By using the code above, both Questions and Responses will reference the same memory location. Any changes made to one will affect the other.


DB.query().then((result) => { Questions = JSON.parse(JSON.stringify(result)); 
Responses = JSON.parse(JSON.stringify(result)) ; console.log(Responses[0].subquestions)})

This method based on JSON will generate new instances, ensuring that you are not altering the original array. However, it may be slightly slower. Additionally, if your array objects contain functions or symbols as properties, this approach may not be ideal (as these are not valid JSON values).

If you prefer using a module, consider utilizing lodash. Simply import it and use:

DB.query().then((result) => { Questions = _.cloneDeep(result); 
Responses = _.cloneDeep(result); console.log(Responses[0].subquestions)})

You also have the option to create your own custom function for this purpose.

Answer 2

DB.query().then((result) => { Questions = result; Responses = result ; 
console.log(Responses[0].subquestions)})

By using the code above, both Questions and Responses will reference the same memory location. Any changes made to one will affect the other.


DB.query().then((result) => { Questions = JSON.parse(JSON.stringify(result)); 
Responses = JSON.parse(JSON.stringify(result)) ; console.log(Responses[0].subquestions)})

This method based on JSON will generate new instances, ensuring that you are not altering the original array. However, it may be slightly slower. Additionally, if your array objects contain functions or symbols as properties, this approach may not be ideal (as these are not valid JSON values).

If you prefer using a module, consider utilizing lodash. Simply import it and use:

DB.query().then((result) => { Questions = _.cloneDeep(result); 
Responses = _.cloneDeep(result); console.log(Responses[0].subquestions)})

You also have the option to create your own custom function for this purpose.

When I use the shift method on one array, it alters the contents of that array

Answer №1

Similar questions

JavaScript regex for the 'hh:mm tt' time format

Is there a way to eliminate the button?

Action of Submit Button Based on Field Matching Another Form

Setting up the data for the AjaxAppender Request Log4Javascript

What is the best way to create a promise in a basic redux action creator?

Using jQuery to generate nested lists

Tips for exporting a React Component without using ownProps in a redux setup with TypeScript

What causes nodejs to exit prematurely without running all the code?

Repeated URL causes Node to redirect

Implement a functionality to retrieve uploaded files by utilizing the onChange event of a

Uncertainty surrounding the inherited styling of an element in HTML

Add an asterisk before each line of comment when working in a TypeScript file using the VS Code IDE

Concluding the use of angular-bootstrap-datetimepicker when selecting a date

When using Stripe checkout, the database IDs are altered, causing issues when trying to delete or update stock in the database using a webhook

The functionality of Bootstrap tabs is compromised when used within a modal dialog

Create a continuous scrolling tool similar to Google Reader for iGoogle

What is the best way to adjust the spacing between components to prevent overlapping?

Utilize a button to apply styles to a Span element dynamically generated with JavaScript

Delete items recursively in a dynamically changing JSON dictionary or list based on a condition for names that are not present in a specified list using

Encountered a Swift 3 error stating: "The argument labels '(named: _, _:,_:)' do not match any available overloads" when attempting to populate a UITableView with an array of UIImage