Javascript Class

Classes are a template for creating objects. They encapsulate data with code to work on that data. You first need to declare your class and then access it, otherwise code like the following will throw a ReferenceError.

/*
* Classes are a template for creating objects. They encapsulate data with code to work on that data
* Reference - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
*/
class User{
    //private fields are declared with #
    #name;
    #dob;
    #type;
    static USER_TYPE = "USER_TYPE";
    static ADMIN_TYPE = "ADMIN_TYPE";
    /*
    * The constructor method is a special method:
    * It has to have the exact name "constructor"
    * It is executed automatically when a new object is created
    * It is used to initialize object properties
    * It if you do not define a constructor method, JavaScript will add an empty constructor method.
    */
    constructor(name, dob, type) {
        this.name = name;
        this.dob = dob;

        if(type==undefined){
            this.type = User.USER_TYPE;
        }else{
            this.type = type;
        }
    }

    getAge(date){
        return date.getFullYear() - this.dob.getFullYear();
    }

    getDob(){
        return this.dob;
    }

    static getAgeDifference(user1, user2){
        return user1.getDob().getFullYear() - user2.getDob().getFullYear();
    }

}

let folau = new User("Folau",new Date(1986, 12, 03));
console.log("Folau: ", folau);
console.log("Folau age: ", folau.getAge(new Date()));

let lisa = new User("Lisa",new Date(1987, 04, 12));
console.log("Lisa: ", lisa);

let ageDifference =  User.getAgeDifference(folau, lisa);
console.log("ageDifference: ", ageDifference);

Private variables and methods

Private instance fields and methods are declared with # names (pronounced “hash names“), which are identifiers prefixed with #. The # is a part of the name itself. It is used for declaration and accessing as well.

#name;
#dob;
#type;

 

Static variables and methods 

The static keyword defines static methods and variabls for classes.

Static methods and variables are called directly on the class(using the Class name) – without creating an instance/object of the class.

static USER_TYPE = "USER_TYPE";
static ADMIN_TYPE = "ADMIN_TYPE";

static getAgeDifference(user1, user2){
    return user1.getDob().getFullYear() - user2.getDob().getFullYear();
}

Extends a Class

The extends keyword is used to create a child class of another class (parent). The child class inherits all the methods from another class. Inheritance is useful for code reusability: reuse properties and methods of an existing class when you create a new class.

Note: From the example above; The super() method refers to the parent class. By calling the super() method in the constructor method, we call the parent’s constructor method and gets access to the parent’s properties and methods.

class Member extends User{
    id;
    constructor(id, name, dob, type) {
        super(name, dob, type);
        this.id = id;
    }

    getId(){
        return this.id;
    }

    getNext5yearAge(){
        let dob = super.getDob();
        let today = new Date();
        return (today.getFullYear() - dob.getFullYear()) + 5;;
    }
}

let laulau = new Member(100, "Laulau",new Date(1986, 12, 03));
console.log("laulau: ", laulau);
/*
    dob: Sat Jan 03 1987 00:00:00 GMT-0700 (Mountain Standard Time) {}
    id: 100
    name: "Laulau"
    type: "USER_TYPE"
*/
laulau.id = 250;
console.log("laulau id: ", laulau.getId());// 250
console.log("laulau age: ", laulau.getAge(new Date()));// 33
console.log("laulau age in 5 years: ", laulau.getNext5yearAge());// 38

Call super class constructor using super(…);

constructor(id, name, dob, type) {
    super(name, dob, type);
    this.id = id;
}

Call super class method using super.methodName();

getNext5yearAge(){
    let dob = super.getDob();
    let today = new Date();
    return (today.getFullYear() - dob.getFullYear()) + 5;;
}

 

Source code on Github

 




Subscribe To Our Newsletter
You will receive our latest post and tutorial.
Thank you for subscribing!

required
required


Leave a Reply

Your email address will not be published. Required fields are marked *