Javascript Class

Class

JavaScript class or classes are special functions defined in ES6 version to add more features to JS functional programming. JavaScript Classes are actually extending functionalities of functions in neat and better way with same prototype inheritance model, but using, classes, not functions.

Although JS was already using prototype inheritance model using function as object type and their constructors using new keyword. Classes are extending those features and functionalities to avoid confusion between class and functions. Actually in JS Programming language, functions are first class objects. That's why till ES5, Functions were used instead on Classes for constructing objects.

function Car(name,model,fuel){
    this.name=name;
    this.model=model;
    this.fuel=fuel;
}

let swift=new Car('swift','zxi+','petrol');
let brezza=new Car('brezza','zxi+','petrol');

class Car{
    constructor(x,y,z){
        this.name=x;
        this.model=y;
        this.fuel=z;
    }
}

let swift=new Car('swift','zxi+','petrol');
let brezza=new Car('brezza','zxi+','petrol');

Define class

JavaScript Classes are defined same like functions, thats why classes are called special functions in javascript. That means, a class can be defined as class declaration and class expression.

class Car{
    constructor(power,torque){
        this.power=power;        
        this.torque=torque;        
    }
};
var swift=new Car(83,115);

const Car=class{
    constructor(power,torque){
        this.power=power;        
        this.torque=torque;     
    }    
};
let swift=new Car(90,115);

Class Hoisting

Class declaration or expression is not hoisted. But function declaration is hoisted. This means, we have to define class first, and then use it.

Datatype of class

The datatype of class in javascript is function. We can use typeof operator to check datatype of class.

class Car{
    constructor(power,torque){
        this.power=power;        
        this.torque=torque;        
    }
}  
   
typeof car;      // "function"         
Car instanceof(Object);      // true         
    

Constructor method

constructor function or method is used in class to declare a object of class. Constructor method can be used only once in a class. Using more than one Constructor method can result in syntax error.

class Car{
    constructor(power,torque){
        this.power=power;        
        this.torque=torque;     
    }    
}

let swift=new Car(90,115);
let brezza=new Car(105,138);

Add custom method

We can add custom methods for new instance in class. See example below.

class Car{
    constructor(power,torque){
        this.power=power;        
        this.torque=torque;     
    } 
    
    // custom method
    start(){
        console.log(`car starts);
    }
    stop(){
        console.log("car stopped");
    }
    
}

let swift=new Car(83,115);

swift.start();                    // "car starts"
swift.stop();                    // "car stopped"

Add getter

we can also add getter method using get keyword. Getter method are get using DOT prefix, but without calling or invoking, like properties.

class Car{
    constructor(power,torque,weight){
        this.power=power;        
        this.torque=torque;     
        this.weight=weight;     
    } 
    
    
    // getter
    get powerToWeight(){
        return this.power/this.weight * 1000;
    }
    get torqueToWeight(){
        return this.torque/this.weight * 1000;
    }  
      
}

let swift=new Car(90,115,875);

swift.powerToWeight;              // 102.85714285714286
swift.torqueToWeight;             // 131.42857142857142

Static properties and methods

To define static properties and methods to class, use static keyword. These properties and methods are restricted to class only, not prototypes.

class Car{
    constructor(power,torque){
        this.power=power;        
        this.torque=torque;     
    }
    
    // static
    static showName="Car";
}

Car.showName;    // Car

Extends Class

The extends keywords is used in class to declare child class or nested class of another class. This is recommended when we have multiple sub classes of a parent class. Like a Car can have different car brands.

class Car{
    constructor(name,power,torque,weight){
            this.name=name;        
            this.power=power;        
            this.torque=torque;     
            this.weight=weight;     
    }
} 

class Maruti extends Car{
    constructor(name,power,torque,weight){
        super(name,power,torque,weight);
    }
}
class Toyota extends Car{
    constructor(name,power,torque,weight){
        super(name,power,torque,weight);
    }
}

let swift=new Maruti("swift",90,113,880);
let brezza=new Maruti("brezza",105,138,1100);

let hyryder=new Toyota("hyryder",115,142,1150);

To call the constructor in subclass, we need super.