This JavaScript tutorial help to create class and method using ECMAScript 6. We will create simple JavaScript class and extend into another class.

The ECMAScript 5 does not have class concept. it was introduced into ECMAScript 6.



We will implement oops concept into js application.You can create constructor, method and variable into class.Its not fully supported object oriented programming as like other languages java, python and C.

How to Define Class in JavaScript

We can define two ways to create class in JavaScript-

Create Class Using class keyword

We can define class into js application using Class keyword, We will create employee class using below code –

class Employee { constructor(name, age, salary) { this.name = name; this.age = age; this.salary = salary; } } 1 2 3 4 5 6 7 class Employee { constructor ( name , age , salary ) { this . name = name ; this . age = age ; this . salary = salary ; } }

As you can see, I have used constructor method to set property as the time of class instantiate.

Create Class Using class expression keyword

We can also create class using js class expression.We will use let keyword and store class into this variable.The class expression can be named or unnamed.

let Employee = class { constructor(name, age, salary) { this.name = name; this.age = age; this.salary = salary; } } 1 2 3 4 5 6 7 let Employee = class { constructor ( name , age , salary ) { this . name = name ; this . age = age ; this . salary = salary ; } }

How to Define Method in Class JavaScript

We can also define the method into the JavaScript class.We will create two type methods into class, One is static method and other non static method.The main deference between them is static method can called without instantiate of class whereas other method call with instance object of class.

How to Define Method in Class

We will define function into class as like other programming language.

class Employee { constructor(name, age, salary) { this.name = name; this.age = age; this.salary = salary; } get name() { return this.name; } employeeDetails() { return {this.name, this.age, this.salary}; } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 class Employee { constructor ( name , age , salary ) { this . name = name ; this . age = age ; this . salary = salary ; } get name ( ) { return this . name ; } employeeDetails ( ) { return { this . name , this . age , this . salary } ; } }

in the above code, I have created one getter method name() , That is returning name of the employee and a method which return employee whole details.

How to use Class method

We can call above method as like below –

let emp = new Employee('adam', 34, 4567); console.log(emp.name()); console.log(emp.employeeDetails()); 1 2 3 let emp = new Employee ( 'adam' , 34 , 4567 ) ; console . log ( emp . name ( ) ) ; console . log ( emp . employeeDetails ( ) ) ;

How to Define Static Method in JavaScript Class

We can also define the method as a static method into js class.The static keyword use to define static method into class.This method can call without instantiate of class.

class Helper { static testMethod() { return 'static method has been called.'; } } 1 2 3 4 5 class Helper { static testMethod ( ) { return 'static method has been called.' ; } }

How to class static method in JavaScript

We can call above method as like below –

console.log(Helper.testMethod()); 1 console . log ( Helper . testMethod ( ) ) ;

How To Inherit Class in JavaScript

We can also extend base class into another class using extend.The ECMAScript 6 providing super() method to call base class constructor.

class Dept extends Employee { constructor(name, age, salary, dept) { // Chain constructor with super super(name, age, salary); // Add a new property this.dept = dept; } } 1 2 3 4 5 6 7 8 9 class Dept extends Employee { constructor ( name , age , salary , dept ) { // Chain constructor with super super ( name , age , salary ) ; // Add a new property this . dept = dept ; } }