How to create a class in ES6 ?

A Class in programming is the blueprint or template for creating an object, and each object represents a distinguishable real-world entity. In other words, also we may say like, it is a collection of groups of certain objects. In ES6, classes can be simply created by writing the class keyword (in prefix). In this article, we are going to discuss the general concepts of classes with their syntax along with relevant examples.

Let us see the following section which illustrates some facts which include that there are two methods of creating a class in ES6, either by writing class keywords before the class definition or by assigning a class expression to a variable.

Method 1: Class declaration In this method, we simply write the code and add the keyword class as a prefix to the class name. Always prefer and write the first letter of the class's name as capital (not small).

Syntax:

class ClassName {
    // Definition and code
}

Example: 

• In this example, we have declared a class and inside it, there are two getter and setter methods (or functions
• ) along with a constructor.
• Later outside the class declaration, we have created an object of that class by providing radius to the constructor and in the next line, we are simply extracting the area property of the circle. 

Note: 

• ES6 has different sorts of special syntax to create getter and setter. It goes like first we write the get or set keyword and then the name of the property. 
• In the case of get, whatever we return from this method is considered as the value of that property of the object, and in the case of set whatever we provide as an argument can be set to any property written inside the constructor. 
• The underscore is written before the property is to avoid naming collision otherwise it will call the same function again and again. 
• Avoid putting parenthesis after the getter method as it will throw an error that the function is not defined because it is considered as a property of the object.

class Circle {
    constructor(radius) {
        this.radius = radius;
    }

    get radius() {
        return this._radius;
    }

    set radius(r) {
        this._radius = r;
    }

    get area() {
        return ((22/7)*this.radius*this.radius);
    }
}

let myCircle = new Circle(5);
console.log(myCircle.area);

Output:

78.57142857142857

Method 2: Class expression In this method, we write the class definition and assign it to some variable and it can be of two types either named class or unnamed class.

Syntax:

const VariableName = class ClassName {
   // Definition and code
}

const VariableName = class {
   // Definition and code
}

Example: 

• In this example, we have assigned our class to a variable now this variable will be used to access the class, this is an unnamed class also here we can create a named one but there is no such big difference. 
• Inside the class expression, we have declared the constructor along with the getter and setter.
• Later outside the class, there is an object creation without initialization and after that, we are setting the radius via setter and in the last line, we are accessing the area property via getter which in turn returns the calculated area.

const Circle = class {
    constructor(radius){
        this.radius = radius;
    }

    get radius() {
        return this._radius;
    }

    set radius(radius) {
        this._radius = radius;
    }

    get area() {
        return ((22/7)*this.radius*this.radius);
    }
}

let myCircle = new Circle();
myCircle.radius = 3;
console.log(myCircle.area);

Output:

28.285714285714285

mrtwinklesharma

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• javascript-oop
• ES6
• JavaScript-Questions

+1 More