After ES6 released, Javascript popularity increases exponentially and lot’s of developers now shifting towards Javascript career. One of the most important ES6 features is a Javascript class. JavaScript classes are nothing but an existing prototype inheritance and a constructor function.

Every object in Javascript has a hidden internal property known as a prototype. A prototype in javascript can be used to extend the object property and methods.

It is very necessary for the javascript developers to be familiar with the es6 classes because popular javascript libraries like react uses it extensively.

JavaScript Class Syntax

You can declare a class in Javascript by using the keyword class as below.

class Person {
   constructor(name){
      //inital initialization
      this._name = name;
   }
   //write other methods below this
}

Above code is the simple declaration of the Person class which has the only constructor in it. Every Javascript class has a default constructor that means if you don’t declare the constructor within the class then the browser will create a default constructor for that class.

One thing to take care is that you always need to declare the class before initiating its object because class declaration in javascript is not hoisted.

Below code will throw a ReferenceError because we are initiating the object before declaring it.

const p = new Person(); // ReferenceError

class Person {}

Javascript Class Constructor

A constructor is a special type of function in the javascript class. When a new object is initialized then first constructor method is called.

There can be only one constructor method in a class. If you use more than one constructor method in the class then it will throw SyntaxError.

A constructor can use a super method to call the constructor of the super class or parent class.

Getter and Setter In ES6 Class

If you came from the object-oriented programming languages like Java then you must be familiar with the terms getter and setter.

These are used in the class to get the property value and set the property value. You can use get keyword for getter and set a keyword for setter before the methods which property value you want to get or update.

class Person {
    constructor(name) {
        this._name = name;
    }
    
    get name() {
        return this._name;
    }

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

const person = new Person('sachin');

console.log(person.name);  // sachin

person.name = 'mike';

console.log(person.name);  // mike

Static Method In ES6 Class

Like other object-oriented programming languages, Javascript class static method can be used without creating the instance of the class.

You can convert any method to static by adding static keyword before that method like below

class Person {
    constructor(name) {
        this._name = name;
    }
    
    get name() {
        return this._name;
    }

    set name(value) {
        this._name = value;
    }
    
    static staticMethod(){
        console.log("I am static method of the class");
    }
}

Person.staticMethod(); //I am static method of the class

A static method of the es6 class is a function on class itself and not on the prototype. All the methods which are not static are defined on its prototype. You can not call the static method from the instance of the class.

Javascript Class Inheritance

An advantageous feature of the classes is that they can be extended to a new object of the parent class. This prevents the repetition of the code of the object that has almost similar behaviour instead of some extra features.

In Javascript, you can inherit any class by using the extends keyword. Let’s understand the class inheritance in javascript by using the below example of the vehicle object.

class Vehicle {
    constructor(brand,model, color) {
        this.brand = brand;
        this.model = model;
        this.color = color;
    }

    getName() {
        return this.brand + " " + this.model;
    }
}

class Car extends Vehicle{
    constructor(brand,model,color,wheel) {
        super(brand,model,color);
        this.wheel = wheel;
    }
}

let car = new Car("Honda", "Accord", "Purple");

car.getName(); // "Honda Accord in child class."

In the above example, we are using vehicle object as an example to understand the inheritance in javascript. Every vehicle has at least these same property as a brand, color and model but they can have a different property like wheels attached to them.

So, in the above example, first, we created a vehicle class and then created a car class which extends the vehicle class.

Let’s now understand what inherits with extends keyword do special in the above. When we inherit the car class with the vehicle, extends keyword adds a prototype reference from Car.prototype to Vehicle.prototype.

Now to understand the above line, you must be familiar with the javascript prototype. You can read about this from here.

After inheriting the Car Class, now it has access to all methods of the Vehicle class also along with its own defined methods. What it means is if a method is not found in the Car class then javascript takes it from the Vehicle.

Yo learn more deeply above the javascript inheritance, you can enrol yourself into any online classes from Udemy, Coursera or SimpliLearn

Private Methods and Variables In ES6 Class

Like other object-oriented programming languages, in javascript, there is no way to define private methods and variables in the Javascript class.

Although developers can work around it using a convention to define the private methods and variables. You can use javascript closure, symbols or weakmaps to define the private property within the class. TC39 stage 2: draft proposal suggests using a hash # prefix on names.

class MyClass {

  // private property
  #x = 0;

  // private method (can only be called within the class)
  #incX() {
    this.#x++;
  }
}

Conclusion

In this tutorial, we learned about the Javascript ES6 class. We learned how constructor works in the es6 class, how to use getter and setter, what are the static methods in the es6 class, how to use the private method and variables in js class.

After reading this article, hope you have got a clear idea of how classes in javascript works and how they are different from other programming languages.

If you have any doubts or suggestions on this article then let me know in the comment box.

Keep Learning, Keep Coding 🙂

Codecademy Web Development
Pin It