JavaScript Classes Part-3

Class Expression

Functions have function expression syntax, classes have class expression syntax. Class expression is used to create class, class expression can be of two type class expression with unnamed class expression and named class expression which have a class name in the syntax. Example of both types are given below.

// Unnamed class expression syntax
const variableName = new class{
    // class body
}

// named class expression syntax
const variableName = new class ClassName{
    // class body
}

// Class expression
let Admin1 = class {
    constructor(fname, lname){
        this.fname = fname;
        this.lname = lname;
    }
    printMsg() {
         console.log(`${this.fname} ${this.lname}`)
    }
}

let a1 = new Admin1("john", "doe");
a1.printMsg();


// Named class expression
let Admin2 = class AdminMaster {
    constructor(fname, lname){
        this.fname = fname;
        this.lname = lname;
    }
    printMsg(){ 
        console.log(`${this.fname} ${this.lname}`)
    }
}
let a2 = new Admin2("john", "doe");
a2.printMsg();

Getters and Setters

The "get" syntax binds an object property with a function, the function will process the property value. So when we access the property value getters get invoked and provide the processed data.

The "set" syntax binds an object property with a function, the function will be invoked when we try to set a new value to the property.

let obj = {
    get propName() { // getter code to execute },
    set propName(value) { // setter code to execute}
};

Let's look at an example to understand the concept of getters and setters.

class Admin{
    constructor(name, isAdmin){
        this._name = name
        this.isAdmin = isAdmin;
    }
    get name() {
        return this._name.toUpperCase();
    }
    set name(value) {
        this._name = "Mr." + value;
        return this._name;
    }         
}

let admin1 = new Admin("john", true);
console.log(admin1.name)  // JOHN
admin1.name = "kiran"
console.log(admin1.name)  // MR. KIRAN

let admin2 = new Admin("Kiran");
console.log(admin2.name)  // KIRAN
admin2.name = "kiran raj r"
console.log(admin2.name)  // MR. KIRAN RAJ R

Here the Admin class has two properties 'name' and 'isAdmin', we use constructor to get the property values when we create a new class from the Admin class. We also have two methods with same method name "name", they have a prefix of get and set respectively. The prefix "get" with method name tells the JavaScript engine that this is a getter method. The getter function in the above code simply return the name in uppercase. The "set" prefix with method name says that it is a settter method, it takes one argument and it simply add "Mr." to the argument and return.

Now we will look at the class creation of admin1, we created a new instance of class from Admin class with "john" and "true" as parameters. Ok, now comes the interesting part, when we try to access the name property we get uppercase version of the property value. How is it possible ?

That was done by the getter, when we try to access the name property the JavaScript engine knows that we are trying to access the property, so it invoke the getter method and the method convert the value into uppercase and return the value. Same is for setter method when we try to set new value to the property the JavaScript engine invokes the setter method, which added "Mr." to our value and set it as the value of "name" property.

JavaScript Classes: Part1- Basics
JavaScript Classes: Part2- Inheritance