ES2015 (ES6) - Class tutorials (Examples)

Before ES6, There are no classes.

Let’s see how to define classes in ES5.

With ES5, classes can be created using functions and prototypes

function Employee(name) {
 this.name = name;
}
Employee.prototype.getName = function() {
 console.log(this.name);
};
var employee = new Employee("John");
employee.getName(); // John
console.log(employee instanceof Employee); // true
console.log(employee instanceof Object); // true

It uses prototype inheritance and does not allow to use class class-level inheritance.

ES6 introduced classes, similar to other language classes. Supported Object-oriented programming

It contains the following terminology in ES6

Classes: It is a representation of a real-time entity and a blueprint for objects.
Objects: It is an Instance of a class that contains its own properties data and behavior methods
Methods: It contains code logic to operate on object properties
Constructor: A special method that initializes an object’s properties and fields
Super: It is used in Class inheritance used in Sub or child classes to initialize the super or parent class properties.

// class name declaration
class Employee {
  // Constructor
  constructor(name) {
    this.name = name;
  }

  myname() {
    console.log(`${this.name} is my name.`);
  }
}

// Employee Object instance creation
const employee = new Employee('Eric');
employee.myname(); // Output: Eric is my name.

class Employee: Class declared with the name of Employee. constructor(name): It is a method, or a constructor, called when an instance(object) of a class is created. It contains code to initialize the object properties. name is a property of an employee class, value of a name is an object property. myname(): It is a method that is called with an instance of a class.

Javascript Inheritance using classes

Inheritance is an OOPS concept and overrides the superclass functionality.

class SalesEmployee extends Employee {
  constructor(name, dept) {
    super(name); // Call the superclass constructor
    this.dept = dept;
  }

  mydepartment() {
    console.log(`${this.name} is my department.`);
  }
}

// Creating an instance of the Dog class
const employee = new SalesEmployee('Eric', 'Sales');
employee.myname(); // Output: Eric is my name.
employee.mydepartment(); // Output: Sales is my department.

This example,

class SalesEmployee extends Employee
Define a SalesEmployee class that extends the Employee class
super(name) calls the superclass constructor, i.e. Employee class, It initializes the superclass and sub-class properties.
mydepartment: method declared in subclass.

ES6 class setter and getter

Setter and getter to allow modification and access to the properties of an object. It is also called, encapsulation.

class Employee {
  constructor(name) {
    this._name = name;
  }

  get name() {
    return this._name;
  }

  set name(name) {
    this._name = name;
  }
}

const employee = new Employee('Eric');
console.log(employee.name); // calls get method, prints Eric

// calls setter
employee.name = 'John';
console.log(employee.name); // calls get method, prints John

In the Example,

_name is a local variable to set the name value. set name() method allows to read the value of an object property, here it is name The get name() method allows you change the name property value of an object

ES6 - Class

Javascript Inheritance using classes

ES6 class setter and getter