Class

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

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.

Define function


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

instance of function


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

Define class

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

instance of class


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

The prototype inheritance model is same for both function and class.


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 Declaration


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

Class Expression


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

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 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;     
    }    
}

var swift=new Car(83,115);
var 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("starting car")
    }
    stop(){
        console.log("stopping car")
    }
    
}

var swift=new Car(83,115);

swift.start();                    // "starting car"
swift.stop();                    // "stopping car"

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;
    }  
      
}

var swift=new Car(83,115,865);

swift.powerToWeight;              // 95.95
swift.torqueToWeight;             // 132.95


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

Do not use .showName property in any prototype of class, it will return undefined.