JavaScript Class

JavaScript classes are introduce in the ES6 script. Now we can use the class keyword to declare the classes in JavaScript. Before the ES6 script we can also able to declare the classes, but at that we are using the function keyword to declare the classes.

Class declaration:

For declaring the class we can use the class keyword

Syntax:

class Person{
	constructor(FirstName,LastName){
        this.FirstName=FirstName;
        this.LastName=LastName;
    }
}

We can create the objects of the class using the new keyword.

var objPerson = new Person("Mr. James", "Bond");

The constructor method is special method that are useful to initialising the properties and data members of the objects of the new class object. In the class there must be maximum 1 constructor method is there.

Class’s Methods

class Shape{
	constructor (id, x, y){
		this.id=id;
		this.move(x,y);
	}

	move(x,y){
		this.x=x;
		this.y=y;
	}
}

var objShape = new Shape(1,2,3);
objShape.move(10,20);

If you ever created the classes in the JavaScript before the ES6 than you found the differences between them. here we created method inside the Shape class without the use of the function keyword and we can call that method likes we are calling the methods in the other OOPs language.

Getter / Setter

We can also create the getter and setter method for the properties of the class, using the get and set elements of the class.

Example:

class Shape{
	constructor (id, x, y){
		this._id=id;
		this.move(x,y);
	}

	get id() {
		return this._id;
	}

	set id(ID){
		this._id	= ID;
	}

	get X(){
		return this._x;
	}

	set X(X){
		this._x=X;
	}

	get Y(){
		return this._y;
	}

	set Y(Y){
		this._y=Y;
	}

	move(x,y){
		this._x=x;
		this._y=y;
	}
}

var objShape = new Shape(1,2,3);
alert(objShape.X+" - "+objShape.Y); // 2 - 3

objShape.move(10,20);
alert(objShape.X+" - "+objShape.Y); // 10 - 20

objShape.X=100;
objShape.Y=100;
alert(objShape.X+" - "+objShape.Y); // 100 - 100

In above examples we create the getter and setter properties of the id, x and y using the get and set elements or keyword.

Static methods:

We can also able to create the static method in the JavaScript classes, now JavaScript ES6 provide the static keyword to declare the static members in the class.

Example:

class Shape{
	constructor(x){
		this._x=x;
	}

	static Addition(obj1, obj2){
		return obj1._x+obj2._x;
	}
}

var obj1 = new Shape(1);
var obj2 = new Shape(2);

alert(Shape.Addition(obj1,obj2)); // 3

In above example we created the static method Addition that are the same for the all the instance of the objects and can be access by using the Class name.

In above example first we create the two objects of the Shape class than we call the Addition method by the class name and perform the addition of the x of the both classes.

Class Inheritance

Lets now we implements the inheritance in the JavaScript classes

class People {
	constructor (FirstName, LastName) {
		this._FirstName = FirstName;
		this._LastName = LastName;
	}
}

class Employee extends People{
	constructor (FirstName, LastName, EmployeeID, Departments){
		super(FirstName, LastName);
		this._EmployeeID = EmployeeID;
		this._Departments = Departments;
	}

	Display(){
		return this._EmployeeID+" "+this._FirstName+" "+this._LastName+" "+this._Departments;
	}
}

class User extends People{
	constructor (FirstName, LastName, UserID){
		super(FirstName, LastName);
		this.UserID = UserID;
	}

	Display(){
		return this.UserID+" "+this._FirstName+" "+this._LastName;
	}
}

var objEmployee=new Employee("Mr. James","Bond",1,"CIA");
alert(objEmployee.Display());

var objUser=new User("Mr. Smith","White",1);
alert(objUser.Display());

JavaScript ES6 provides the extends keyword to extends the parent class, JavaScript ES6 provides the clean implements of the class and inheritance.

Here we create the parent class called People and two base classes Employee and User, both extends the People class. We store the FirstName and LastName name in the People class. As you see in the example we can directly use the properties of the parent class in the base class.

Base Class Access

If you are extends the any class like you extends the base class into the child class than it is obvious that you can use the properties and method of the base class.

But in JavaScript you can also access the properties and methods in the child class using the super keyword. If you want to access some methods of the base class than you have to use the super keyword.

Example:

class Arithmetic {
	constructor (num1, num2) {
		this.num1 = num1;
		this.num2 = num2;
	}

	toString(){
		return this.num1 + " and " + this.num2;
	}
}

class Addition extends Arithmetic{
	constructor (num1, num2){
		super(num1, num2);
		this._answer=num1+num2;
	}

	toString(){
		return "Addition of the "+super.toString()+" is "+this._answer;
	}
}

var objAddition=new Addition(10,20);
alert(objAddition.toString()); //30

If you have any question related to this, please comment down below.

Happy Coding...

🙂