const foobar = {
foo: 'hello',
bar: this.foo
};
The code isn't working as expected, returning "undefined". Any suggestions on how to properly access it?
const foobar = {
foo: 'hello',
bar: this.foo
};
The code isn't working as expected, returning "undefined". Any suggestions on how to properly access it?
When you export the constant foobar, the value of this within it refers to the context that owns the constant, which is typically global\window. This can result in getting a value of undefined.
To create a new scope that is owned by your constant, you can achieve this by creating a function and assigning it to the bar property, as shown below :
export const foobar = {
foo: 'hello',
bar: function(){
return this.foo;
}
};
Now, this will refer to the context of the foobar constant, allowing you to access the foo property by calling foobar.bar() (which should return 'hello').
From my understanding, the method you are attempting to use is not feasible. When trying to reference a property outside of a class using this, it will point to the global context or possibly be undefined. The alternative option would involve directly referencing the property foobar itself, like so:
const foobar = {
foo: 'hello',
bar: foobar.foo
}
However, this approach will also result in an error since the object foobar is not defined until the statement is complete.
The most effective way to achieve your desired outcome is as follows:
const foobar = {
foo: 'hello',
bar: undefined
}
foobar.bar = foobar.foo;
As mentioned in previous responses, the usage of this was incorrect in this scenario. It refers to the same context as the variable defined within the scope of foobar. When running in strict mode, it becomes undefined.
To access the foo property, you can define bar as a pair of getter/setter functions:
export const foobar = {
foo: 'hello',
get bar() {
return this.foo;
},
set bar(v) {
this.foo = v;
}
};
If the value is constant and not meant to be changed, the setter can be omitted.
It's worth noting that using descriptors on plain objects can result in a performance penalty in V8 engines such as Chrome and Node.js. In performance-critical scenarios, defining a descriptor on the object prototype, for example with the class syntax, can be more beneficial.
Looking for advice on creating a 3D model viewer within an Angular 7 project. Currently using the model-viewer web component in JavaScript with success. How can I replicate this functionality and viewer within my Angular 7 application? ...
In the code snippet below, I've defined an interface, type, and a function. interface ActionWithGeneric<T> { type: 'add' | 'remove'; data: T; } type StateWithGeneric<T> = Array<ActionWithGeneric<T>> ...
I have encountered obstacles in my development process and need assistance overcoming them. Currently, I am trying to configure TObject.props to only accept 'href' or 'download' if the condition TObject.name = 'a' is met, and ...
Currently, my TypeScript Lambda functions are managed using the AWS Serverless Application Model (SAM), and I rely on esbuild for the build process. I'm interested in incorporating esbuild plugins into my build process to enable support for TypeScrip ...
I need to sanitize the email in my user object before pushing it to my sqlite database. This is necessary during both user creation and updates. Here's what I have so far: export const addUser = (user: CreateUser) => { db.prepare(sqlInsertUser).r ...
Every time I try running gulp serve, I encounter the following issue: Error: Unable to locate module '@rushstack/module-minifier-plugin' Please assist me with this problem. Thank you! ...
I am facing an issue while attempting to import a plain JavaScript module into a Node application written in TypeScript. The error below is being thrown by one of the codes in the JavaScript module. b = s.matchAll(/<FILE_INCLUDE [^>]+>/gid); Synta ...
I am encountering a major issue in my project. The *ngIf directive I am using is functioning only on the Android platform and not on iOS. Here is the HTML code snippet: <GridLayout columns ="auto, auto" rows="*" (tap)="open()"> <StackLayout co ...
Is it feasible in TypeScript to infer the return type of a function based on its arguments? This feature would be beneficial when extracting specific properties from, for example, a database query. Here is an illustration (https://repl.it/repls/Irresponsi ...
In the realm of my Angular2 application, I have two essential services called WebStorageService and MobileStorageService, both of which impeccably implement an interface known as IStorageService. Interestingly, in my magnificent main.component, I elegantly ...
I encountered a simple TypeError while attempting to format my POST body. Below is the function I am using for handleSubmit : const handleSubmit = (values: any, formikHelpers: FormikHelpers<any>) => { const prepareBody = { ...values.customerC ...
I encounter a situation where I must subscribe to an Observable, iterate through the response, and then subscribe to another Observable using data from the initial Observable. getTasks(taskType: Observable<any>): void { taskType // Subscribing ...
I am facing an issue with my li elements. When a user clicks on them, it should open a more detailed view in another component. However, I noticed that it takes TWO clicks to show the data I want to display. The first click opens the component with an em ...
After upgrading my Angular Project from version 5 to 6, I encountered issues specifically with Internet Explorer 11. Whenever I attempt to load the live dev server on localhost:4200, the login page displays but then immediately disconnects from the live de ...
I'm currently exploring TypeScript for the first time and I find myself puzzled by the import/export mechanisms that differ from what I'm used to with ES6. Here is an interface I'm attempting to export in a file named transformedRowInterfac ...
While working on creating an audio file, everything seems to be running smoothly as the recording indicator shows no errors. However, once the app generates the directory, I am unable to locate it in the local storage. The code I am using is: var audioFo ...
I am exploring the use of the Material UI styled components API to incorporate both a custom theme and some props into a specific custom element. Although I have managed to get either a custom theme or props working individually, I am struggling to make t ...
Struggling to make InMemoryWebApiModule work properly with a custom URL parser for OData. Here is my module configuration: InMemoryWebApiModule.forRoot(MockApiService, { apiBase: 'api/', delay: 0, passThruUnknownUrl: true }), My service looks ...
My mockAPI is successfully fetching the data, but the json response structure is quite complex. It looks something like this: [ { "planList": [ // plan details here ] } ] Everything in the UI is displaying correctly, except ...
In a recent project I have created, users need to perform CRUD operations and view the output in a table. Everything is functioning properly, however, there are instances where the "mat-select" within the "mat-paginator" starts behaving strangely. This iss ...