Creating an instance of a custom class in Javascript using a specified object may not fully initialize all properties

In my JavaScript code, I have a custom class called PaymentCoordinator with a constructor defined as follows:

constructor(
private amount: number,
private description: string,
private title: string,
private transactionType: string,
private creditors: Array<any>,
private categories: Array<string>,
private startdate: Date = undefined,
private enddate: Date = undefined,
obj: any = false)

The final property in the constructor, obj, is used to create a new instance of PaymentCoordinator based on a provided object, essentially cloning it. If an obj is passed (when obj !== false), the cloning process occurs like this:

obj && Object.assign(this, obj);

While all properties of the given obj are successfully set, there seems to be an issue with the categories property, which is an array of strings.

I also attempted the following approach:

obj && Object.assign(this, obj);
this.categories = obj.categories

Unfortunately, even this method does not properly assign the categories property to the newly created object.

After checking the contents of obj.categories, I can confirm that the array does indeed contain strings.

Any insights into why this behavior is occurring?

Answer №1

In JavaScript, objects are passed by reference

const object = { list: [4, 5, 6] }
const duplicate = Object.assign({}, object)
console.log(duplicate.list)
object.list.length = 0
console.log(duplicate.list)

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

Angularjs: ui-tinymce directive does not properly update with model changes

When the text editor's contents are changed, the model is updated. However, if the model is updated from another input source, the content in the text editor window does not change. For example, visit this link: http://plnkr.co/edit/BSkm3u8XuKEFMOXml ...

Enhance LCP Performance in Next.js for Faster Loading Speeds

I'm currently working on a next.js project (version 11.1.2) and my goal is to improve the page speed performance. To track this, I am using Google PageSpeed Insight for evaluation. Presently, the scores stand at: 40-50 for mobile (!!) 80-90 for deskt ...

The selected value from a dropdown list may occasionally come back as text

I am facing an issue with a dropdown list on my form that has Integer Values set to display text. The problem arises when I run the code to show the value and associated text, as the text is being displayed as the value itself. Is there any workaround avai ...

Adding a JSON array to HTML using JavaScript

Looking to incorporate JSON Array data into an HTML list with Headings/Subheadings using JavaScript. I experimented with two methods - one involving jQuery and the other mostly vanilla JS. The initial attempt (link here: http://jsfiddle.net/myu3jwcn/6/) b ...

Determine the type of embedded function by analyzing the callback

Are you struggling to create a function that takes an object and returns a nested function, which in turn accepts a callback and should return the same type of function? It seems like achieving this with the same type as the callback is posing quite a chal ...

Compiling Directives in AngularJS for Faster Page Loading

I'm currently experiencing performance issues in my Angular application. The root cause seems to be the excessive use of a directive on a single page. Unfortunately, I don't have the time to break down this page into multiple sections. I am seek ...

State-sharing elements

I am in the process of developing a junior project in JavaScript, utilizing React to gain experience. My goal is to create a simple "notes app." However, when it comes to fetching notes from the server and displaying them using the @material-ui Card eleme ...

Exploring the power of nested routes in React Router 4: accessing /admin and / simultaneously

I'm encountering an issue with nested routing. The URLs on my normal site are different from those on the /admin page, and they have separate designs and HTML. I set up this sample routing, but whenever I refresh the page, it turns white without any ...

Can an event be activated when a field in HTML5 is deemed valid?

Valid fields in HTML5 follow specific conventions, such as an type="email" needing to adhere to the email format. CSS provides a way to select valid fields using the pseudo-element: input:valid. Can we set up an event that triggers when the input becomes ...

Prevent certain output files from caching in Vue CLI 3 to avoid busting the cache

I am currently developing a chrome extension using vue cli 3 and have successfully implemented the basics. However, I would like to streamline my file structure by including my content and background javascript files in the build process instead of manuall ...

Execute a pair of scripts specified in the package.json file

Here is my package.json: "scripts": { "dev": "cross-env NODE_ENV=development nodemon src $NODE_DEBUG_OPTION --exec babel-node", "build": "babel src -s -D -d dist", "tsc:w": "tsc -w" } To run my project, I need to execute two commands: np ...

Troubles with loading images on Node.js, Express, and EJS powered Bootstrap 5 navbar

Currently, I am in the process of creating a website using express/node.js/ejs. However, I am facing challenges when it comes to constructing a navbar with Bootstrap 5.0. In my app.js file, I have included express.static: app.use(express.static('publi ...

Unlocking the JSON array of data in JavaScript: A step-by-step guide

Hey there, I need help extracting an array from a JSON data structure. Here's an example of my JSON object: { Data1 : { Data2 : "hello", Data3 : "hi" }, Data4 : { Data5 : "this is Karan", } } I'm looking ...

"Always receive the latest version of the file with every request in Node.js

Essentially, I have developed a server that responds to user requests by sending a JS file in object format. This JS file is generated using two configuration files named config1.js and config2.js. Below is my code snippet: var express = require('ex ...

When an element is dragged within the mcustomscrollbar container, the scroll does not automatically move downward

I am facing an issue where I have multiple draggable elements inside a Scrollbar using the mcustomscrollbar plugin. When I try to drag one of these elements to a droppable area located below the visible area of the scroller, the scroll does not automatical ...

Error: Oops! The Picker component has been deprecated in React Native. No worries though, you can easily reinstall and import it from the '@react-native-picker' package

Is there a solution to the issue I'm facing with react native version 0.68.2? Error: Invariant Violation - Picker component has been removed from React Native. To resolve this issue, you can now install and import it from '@react-native-picker/pi ...

Transmitting the information to the server in URL encoded form using the jQuery Ajax function

During my current project support, I have noticed different ways of making AJAX calls in the code. Sometimes the AJAX call looks like this: var myObj = [ { name: "first", value: "Rick" }, { name: "last", value ...

Rendering a child component in the DOM tree with Aurelia StageComponent

Imagine having an app.html template structured like this: <template> <require from="./MyComponent"></require> <h1>${message}</h1> <my-component>test</my-component> </template> Accompanied by MyCompone ...

What is the best way to delete the final line of HTML within a div element?

My primary goal is to create a dynamic form where users can add or remove HTML lines using JavaScript. I have successfully implemented the function to add new lines, but I am struggling with the removal function. Below is the code I have so far: window ...

The PHP script encountered an issue with the HTTP response code while processing the AJAX contact form, specifically

Struggling to make this contact form function properly, I've tried to follow the example provided at . Unfortunately, all my efforts lead to a fatal error: "Call to undefined function http_response_code() in /hermes/bosoraweb183/b1669/ipg.tenkakletcom ...