Classes in JavaScript

Introduced in ES6, classes are simply the syntactical sugar over function prototyping.

A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class, and the properties are assigned inside a constructor() method.

Class Basic syntax

Use the keyword class to create a class, and always add the constructor() method. The constructor method is called each time the class object is initialized. After adding a constructor method we can add other methods.

class ClassName {
  // class methods
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

Example

A simple class definition for a class named “Product”:

Class Vehicle{
 constructor(brand) {
   this.carname = brand;
 }
}

Now you can create objects using the `Vehicle ` class:

Example

class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }
}
mycar = new Vehicle("Toyota");

Methods

A class in ES6 contains methods for functioning, out of which the constructor method is special, where you initialize properties and called automatically when a class is initiated, and it has to have the exact name “constructor”, in fact, if you do not have a constructor method, JavaScript will add an invisible and empty constructor method.

However we are also free to make our own methods, the syntax should be as below:

class Vehicle {
  constructor(brand) {
    this.brand = brand;
  }
  print() {
    return "I have a vehicle of the brand" + this.brand;
  }
}

mycar = new Vehicle("Toyota");
document.getElementById("demo").innerHTML = mycar.print();

Inheritance

To create a class inheritance, use the extends keyword.

A class created with a class inheritance inherits all the methods from another class:

class Car {
  constructor(brand) {
    this.brand = brand;
  }
  print() {
    return "I have a vehicle of the brand" + this.brand;
  }
}

class Car extends Vehicle {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.print() + ', it is a ' + this.model;
  }
}

mycar = new Car("Hyundai", "Verna");
document.getElementById("demo").innerHTML = mycar.show();

Important Note:

A common pitfall for novice developers is to put a comma between class methods, which would result in a syntax error.

The notation here is not to be confused with object literals. Within the class, no commas are required.