TypeScript maintains the reference and preserves the equality of two objects

Retrieve the last element of an array, make changes to the object that received the value, but inadvertently modify the original last position as well, resulting in both objects being identical.


    const lunchVisit = plannedVisits[plannedVisits.length - 1];

    lunchVisit.visitPoint.name = 'lunch';

    lunchVisit.lunch = true;

    lunchVisit.waypoint.estimatedArrival = plannedVisits[plannedVisits.length - 1].waypoint.estimatedDeparture;
    const lunchEndTime = new Date(plannedVisits[plannedVisits.length - 1].waypoint.estimatedDeparture);
    lunchEndTime.setHours(lunchEndTime.getHours() + 2);
    lunchVisit.waypoint.estimatedDeparture = lunchEndTime;
    console.log(plannedVisits[plannedVisits.length - 1])
    console.log(lunchVisit)
    plannedVisits = [...plannedVisits, lunchVisit];
javascripttypescriptnestjs

Answer №1

By implementing the deep copy method, we were able to create a separate copy of the original object without retaining any references.

const lastVisit = cloneDeep(lastItemInArray);

function cloneDeep<T extends object>(original: T): T {
    return JSON.parse(JSON.stringify(original));
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I often find myself yearning for the good old days of prototyping functions when initializing a new

I just created a module in nodejs called Test.js with the following code: function Test() { this.key = 'value'; } Test.prototype.foo = function () { return 'foo'; } module.exports = Test; Then, in B.js file: var Test = require(&a ...

javascriptnode.jsmodulecommonjs

MUI Gradient Tracked Button

Take a look at this Codepen example I created. It showcases a hover effect where the gradient follows the mouse cursor. In order to achieve this effect, I have defined two CSS variables - --x and --y, to keep track of the mouse position on the button. The ...

javascriptcssreactjstypescriptmaterial-ui

Error: The gulp-cssmin plugin encountered a TypeError because it attempted to read the property '0' of a null

I am attempting to condense my code, but I am encountering this error: D:\gulp-compiler\node_modules\gulp-cssmin\node_modules\clean-css\lib\selectors\extractor.js:66 return name.replace(/^\-\w+\-/, ...

javascriptnode.jsnpmgulpgulp-sass

Display content exclusively within a modal specifically designed for mobile devices

I want to implement a feature where a button triggers a modal displaying content, but only on mobile devices. On desktop, the same content should be displayed in a div without the need for a button or modal. For instance: <div class="container&quo ...

javascripthtmljquerycssmedia-queries

JavaScript validation code for verifying hostnames with a specified domain name

I need a customized validation check for my order form where users are asked to enter their server hostname. The challenge is that I'm using WHMCS with encrypted PHP code and IonCube loaders, making it difficult to add this check. Users can input any ...

javascriptwhmcs

The combination of Sequelize and TypeScript does not support the usage of the .create method with type attributes

The IDBAttribute - interface IDBAtribute { readonly id: number; readonly createdAt: Date; readonly updatedAt: Date; } User attributes defined as IDBMoviesAttributes - interface IDBMoviesAttributes extends IDBAttribute { readonly title: str ...

mysqltypescriptsequelize.jssequelize-typescript

Utilizing the change function in conjunction with that

My attempt at creating a simple function to implement the change function didn't go as planned:/ What I am trying to achieve: 1- When a cost checkbox is checked, assign the corresponding cost (e.g., cost1.checked ? cost1 = 10 : 0) 2- Calculate and di ...

javascriptjquery

What is the best way to manage a promise's response?

I'm currently facing a situation where I need to create a petition to an endpoint and retrieve the URL of the backend that I intend to use. My setup involves a file with the API configuration where I instantiate axios. Previously, my approach was sim ...

javascriptreactjspromiseasync-awaitaxios

Inserting an item into a list

Looking for assistance with this particular scenario: { "EekvB3cnwEzE":{ "name":"hi", }, "Brv1R4C6bZnD":{ "name":"yup", }, "kRwRXju6ALJZ":{ "name":"okay", } } I'm attempting to store each of these objects in an array. Howe ...

javascriptjqueryangularjs

The click() function in jQuery executing only once inside a "for" loop

This is an example of my HTML code: <!DOCTYPE html> <head> <title>Chemist</title> <link href="stylesheet.css" rel="stylesheet"> </head> <body> <h2 id="money"></h2> <table border="1px ...

javascriptjqueryhtml

Determine total and showcase it as the range slider is adjusted

Seeking to calculate and present the result of three range sliders. The equation I aim to showcase is: KM driven per year * Avg KM/100L / Price of fuel I have managed to display each slider's individual values, but I am uncertain about how to show t ...

javascript

Having trouble with the unresponsive sticky top-bar feature in Zurb Foundation 5?

According to the information provided on this website, it is recommended to enclose the top-bar navigation within a div element that has both the class "contain-to-grid" and "sticky". However, I have noticed that while the "contain-to-grid" class exists in ...

javascriptcsszurb-foundation

Exploring the Benefits of Utilizing the tslint.json Configuration File in an Angular 6 Project

https://i.stack.imgur.com/j5TCX.png Can you explain the importance of having two tslint.json files, one inside the src folder and one inside the project folder? What sets them apart from each other? ...

angulartypescriptangular6tslint

retrieve the value obtained from a promise in an outer scope

I need a simple function that returns the name. Here's my existing code snippet: getName(entity, id) { const promise = userServices.getName(entity, id).then((data) => { return data; }); / ...

javascriptvue.js

Filtering a table with a customized set of strings and their specific order using pure JavaScript

Recently, I've been diving into APIs and managed to create a table using pure vanilla javascript along with a long list of sorting commands that can filter the table based on strings. My goal is to establish an object containing strings in a specific ...

javascriptjsonapifilter

Issue with VueJS: Cannot modify a component property within a watcher function

I am currently developing a Vue 2 Webpack application that utilizes Vuex. My aim is to update the local state of a component by observing a computed property which retrieves data from the Vuex store. Here's an excerpt from the <script></scrip ...

javascriptvue.jsvuejs2

Avoiding duplicate touch events with an if statement

I am currently working on a module for a responsive website that involves tapping the initial screen to reveal a panel from the right. The user can then tap a close button to hide the panel. However, there is an issue where if the user taps multiple times ...

javascriptjqueryiosiphonecss

Encountering a bug in Typescript where a Prisma relation list field fails when provided with an argument

While attempting to initiate a new project using Prisma Client, I encountered an error when passing it with args, even when using an empty array list such as []. Here is the Prisma model: generator client { provider = "prisma-client-js" } dat ...

typescriptnext.jsprisma

Facing an error response with the Javascript callout policy in Apigee. Any suggestions on fixing this issue?

This is the code snippet I'm using in my JavaScript callout policy var payload = JSON.parse(request.content); var headers = {'Content-Type' : 'application/json'}; var url = 'https://jsonplaceholder.typicode.com/posts'; va ...

javascriptapigee

MVC5 Toggle Button for Instant Display and Concealment

I used to utilize this method in Web Form development by targeting the id and name of the input radio button. However, I am encountering difficulties implementing it in MVC5. Can someone kindly point out where I might be going wrong? Upon selecting a radi ...

javascriptjqueryasp.net-mvc