Having trouble including a property in an object using a method that relies on the "this"

Currently, I am attempting to include a property in an object by utilizing a method. Below is the code snippet:

const siddhu = {
    name: 'Siddhu',
    friends: ['Dylan', 'Jordans', 'Aathi'],
    setBestFriend: () => this.bestFriend = this.friends[0],
    setNumOfFriends: () => this.numOfFriends = this.friends.length,
}
siddhu.setBestFriend()
siddhu.setNumOfFriends()

console.log(`${siddhu.name} has ${siddhu.numOfFriends} friends, and his best friend is ${siddhu.bestFriend}`);

I have encountered an issue where this code does not function as expected. Although replacing the this keyword with siddhu resolves the problem, it is not an ideal solution because I intend to use this code multiple times and changing siddhu each time is inconvenient.

javascript

Answer №1

It seems that using this with arrow functions is not allowed, as it would refer to the arrow function itself. I learned this valuable insight from codegeek. Many thanks for sharing!

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

"Steady layout of grid for the navigation bar and

Currently, I am in the process of developing a control panel with the use of HTML and CSS. To structure the page, I opted for a grid layout. However, I encountered an issue where the navbar and sidebar do not stay fixed on the screen despite trying various ...

javascripthtmlcss

When attempting to select a HTML element within a <ng-template> tag using d3.select(), it will return null

I have a situation where I have an element < svg > inside an < ng-template > <div *ngIf="data == undefined; else elseBlock"> Sorry no data! </div> <ng-template #elseBlock> <svg id="areachart" width="100%" height="210 ...

javascripthtmlangulard3.jssvg

What is the correct way to generate a normal map using THREE.js?

Experimenting with the Normal map Ninja demo, I attempted to apply it to a cube in my scene using the most recent version of Three.js from the development branch: // Setting up common material parameters var ambient = 0x050505, diffuse = 0x331100, specul ...

javascriptshaderwebglthree.js

Issue encountered when attempting to make a global call to an asynchronous function: "The use of 'await' is restricted to async functions and the top level bodies of modules."

As I embark on solving this issue, I want to point out that while there are similar questions on SO based on the title, upon close examination, they seem more intricate than my specific situation. The explanations provided in those threads do not quite ali ...

javascriptasync-awaites6-promisefetch-api

What is the method to transfer a declared object from a .ejs file to my index.js file?

I have a simple script embedded in my .ejs file. The script captures input data from the user and stores it in an object. Now, my goal is to send this object to my index.js file, where I plan to utilize the data with a node module called coap (similar to ...

javascriptnode.jsexpressejsiot

tips for effectively utilizing getters in array sorting operations

I've been encountering some issues with vuex getters. My objective is to arrange the cart data, which consists of an array of objects, by date using the getter named myCartItems. The problem I'm facing is that when I add a second payload {prod_ ...

javascriptvue.jsvuex

What is the best way to switch the site header in JavaScript or jQuery?

I have created a Bootstrap menu design and I am looking to add a sliding functionality to it. My goal is to hide the menu when scrolling down and display it when scrolling up (slide-down / slide-up). For implementing this feature, I plan to utilize jQuery ...

javascripthtmljquerybootstrap-4

Leveraging Arrays with AJAX Promises

I am currently working on making multiple AJAX calls using promises. I want to combine the two responses, analyze them collectively, and then generate a final response. Here is my current approach: var responseData = []; for (var i=0; i<letsSayTwo; i++ ...

javascriptjqueryajaxpromise

apply jQuery to add a class to the parent element when clicked

I am currently facing an issue with my code. It was working fine in jsFiddle, however, when I try to use it outside of fiddle, I am getting errors and it's not working properly. $('.down-photo').click(function() { $(this).parent(&apos ...

javascriptjqueryhtmlcss

What is the best way to resize an SVG to perfectly fit the parent div container?

I need to display multiple SVGs from various sources, each with different height, width, and viewbox. I want them all to render within a fixed height and width div, filling up the available space. How can I scale these SVGs to fit the container div? For i ...

javascripthtmlcsssvg

Why doesn't my constructor promise to not replace data?

I need help figuring out where I'm going wrong with my code. I have a class that has a constructor and two methods. My goal is for the `find()` method to push data from a query into an array. However, I'm not sure why the array values seem to dis ...

javascriptnode.jsecmascript-6promisees6-promise

Ways to avoid Next.js from creating a singleton class/object multiple times

I developed a unique analytics tool that looks like this: class Analytics { data: Record<string, IData>; constructor() { this.data = {}; } setPaths(identifier: string) { if (!this.data[identifier]) this.da ...

javascriptreactjstypescriptnext.js

The Action Creator is not being waited for

In my application, I am using a placeholder JSON API to fetch posts and their corresponding users. However, I encountered an issue where the user IDs were being duplicated and fetched multiple times. To resolve this, I implemented the following code snippe ...

javascriptreactjsreduxreact-reduxredux-thunk

Using Webpack postcss prefixer with Vue CLI 3

As I work on implementing Bulma CSS in my project using Vue CLI 3, I encounter the need to prefix the classes with webpack. While I found an example of this process, adapting it from a webpack config to vue.config.js poses some challenges. Here is the ini ...

javascriptvue.jswebpackvue-cli-3postcss-loader

Getting state from two child components in React can be achieved by using props to pass the

In my tabbed modal dialog, I have two image list components rendering images based on props defined in the parent. Each component manages its own array of image objects. The challenge is that I need to update or delete these images using a single save butt ...

javascriptreactjsreact-state-management

Maximizing the potential of JavaScript by utilizing effective tags

Looking to enhance my JavaScript code by adding a maximum tags option limited to 6 with no duplicates. Check out the current snippet below: <div id="tags"> <span>php</span> <span>c++< ...

javascripthtmlcss

Is there a way to create a stacked bar chart through iterative steps?

I am currently working with time series data stored in an array structured like this: var data = [ [{date: 2016-01-01 00:00:00, value: 52}, {date: 2016-01-02 00:00:00, value: 23}, {date: 2016-01-03 00:00:00, value: 42}, {date: 2016-01-04 00:00:00, value ...

javascriptd3.js

The button will continue to be enabled even if the textfield is empty

I have a task to implement a feature on a webpage where the submit button should remain disabled until all values are entered in the textbox. However, I am facing an issue where the submit button is already active when the page loads. .directive('pas ...

javascripthtmlangularjs

What could be causing the Multer error in my Express.js application when attempting to upload a file for the second time, even though the first time was successful?

Whenever I try to upload a single file, the code works flawlessly. However, if I attempt to upload another file, I encounter the following Multer error: Error code: 'LIMIT_UNEXPECTED_FILE', field: 'myFile', storageErrors: [] To succes ...

javascriptnode.jsexpress

Ways to retrieve a property that is dynamically generated within a React component

In the code snippet below, I have registered the TextField name as M1.${index}.M13-M14 and it is marked as required. However, I am unable to locate the property accessor using errors[`M1.${index}.M13-M14`]?.type, which prevents the error from being gener ...

javascriptreactjsreact-hooksmaterial-ui