Having difficulty defining properties within a JavaScript class

Question

Having difficulty defining properties within a JavaScript class

Currently, I am trying to set properties within a JavaScript class:

class BookingReports extends ReportsInterface{ 
    var categoryID;
    constructor() {
        super();
    }

    init(CatID)
    {
        this.categoryID=CatID;            
    }
}

However, when attempting to do so, JavaScript is rejecting the variable and throwing an error stating "unexpected identifier".

https://i.sstatic.net/zCbbg.png

I am struggling to pinpoint what exactly is causing this syntax error. Could it be related to inheritance or the super keyword? I've even tried using binding within the entire declaration, but unfortunately, that approach is not resolving the issue.

javascript constructor properties

Answer 1

Answer №1

var categoryID seems misplaced in the code. It is not common practice to declare variables at the class level; instead, variables should be declared within constructors or methods.

In this scenario, consider creating the property within the constructor rather than declaring a variable:

class BookingReports extends ReportsInterface{ 
    constructor() {
        super();
        this.categoryID = /*...some default value...*/;
    }

    init(CatID)
    {
        this.categoryID=CatID;            
    }
}

An init method may not be necessary here; typically, initialization should occur in the constructor itself. Therefore, your code could look like this:

class BookingReports extends ReportsInterface { 
    constructor(catID) {
        super();
        this.categoryID = catID;
    }
}

In the future, with advancements in the class fields proposal, it might become possible to "declare" properties at the class level directly:

// This will be valid if and when the class fields proposal progresses
class BookingReports extends ReportsInterface { 
    categoryID; // Property declaration example
    constructor(catID) {
        super();
        this.categoryID = catID;
    }
}

If the property is being initialized in the constructor anyway, using property declarations can help make the structure of your object clearer both to readers and JavaScript engines.

Answer 2

var categoryID seems misplaced in the code. It is not common practice to declare variables at the class level; instead, variables should be declared within constructors or methods.

In this scenario, consider creating the property within the constructor rather than declaring a variable:

class BookingReports extends ReportsInterface{ 
    constructor() {
        super();
        this.categoryID = /*...some default value...*/;
    }

    init(CatID)
    {
        this.categoryID=CatID;            
    }
}

An init method may not be necessary here; typically, initialization should occur in the constructor itself. Therefore, your code could look like this:

class BookingReports extends ReportsInterface { 
    constructor(catID) {
        super();
        this.categoryID = catID;
    }
}

In the future, with advancements in the class fields proposal, it might become possible to "declare" properties at the class level directly:

// This will be valid if and when the class fields proposal progresses
class BookingReports extends ReportsInterface { 
    categoryID; // Property declaration example
    constructor(catID) {
        super();
        this.categoryID = catID;
    }
}

If the property is being initialized in the constructor anyway, using property declarations can help make the structure of your object clearer both to readers and JavaScript engines.

Having difficulty defining properties within a JavaScript class

Answer №1

Similar questions

show an HTML webpage within a <div> container using AJAX technology

Dependency of multiple objects in Webgl three.js

Expo constants failing to load on web due to unresolved manifest object issue

Checking for selected checkboxes in Django admin's action-select using jQuery/JavaScript

What could be hindering my jQuery function from running the Ajax script?

Tips for handling an AJAX form submission with various submit buttons and navigating through Laravel routes

What is the reason for handlers not being able to work without passing parameters in React?

Combining the power of AngularJS with the versatility of sails

Verification of input on ng-repeat table

Guide to iterating through an object and generating child components in React.js

Initiating a conversation from deep within a conversation using JQuery Mobile

AngularJS controller function fails to trigger

Eliminating the selected option from the dropdown menu after it has been added with Angular

Trying to incorporate a PHP echo statement into the innerHTML of a button is ineffective

Express router parameter matching

Traverse the data() object in jQuery to retrieve both keys and values simultaneously

Trying to assign a value to 'currentStatus' using "this" on an undefined property

Having trouble with the Javascript denial of submit functionality?

What is the best way to create a basic accordion using only certain table rows?

Utilizing a Buefy element without Vue.js integration