Classes in JavaScript

Back to: ReactJS Tutorials

Understanding Classes in JavaScript with Examples

In this article, I am going to discuss Classes in JavaScript with Examples. Please read our previous article where we discussed Exports and Imports in JavaScript.

Classes in JavaScript:

Now, we will learn another core feature of next-generation JavaScript which is classes. If you are coming from some other programming language, you might already know about classes. Classes are essentially blueprints for objects.

In our case, for JavaScript objects, a class is created with the class keyword and a class can have both properties and methods. Methods are simply functions attached to classes whereas properties are variables attached to classes.

This is the way that a class is instantiated with the new keyword. This might look familiar to you if you have worked a bit with JavaScript. You might notice from constructor functions and indeed classes are kind of a more convenient way of creating constructor functions. So we create JavaScript objects with classes as blueprints.

Classes also support inheritance. This means, if you have another class that you want to inherit from, so taking all its properties and methods and potentially adding new properties and methods is known as inheritance. That also might look familiar to you. You might notice from prototypes.

Let us have a look at classes in the JSBIN (https://jsbin.com/) editor.

class Person{
  constructor(){
    this.name = 'John';
  }
  
  printMyName(){
    console.log(this.name);
  }
}

const person = new Person();
person.printMyName();

Here, we have created a new class here called Person. Then we have curly braces to mark the class body. Inside curly braces, we can start by using properties. In the simplest form, a property is added by adding a constructor which is a default function method.

So we have added a constructor. You can add a constructor to any class which will be executed whenever you instantiate the class. The method is created just with the name of the method then parentheses and then curly braces. And inside curly braces, we can now set up properties with the ‘this’ keyword. So, we have written

this.name = ‘John’;

We have also added a method here ‘PrintMyName’ and there we have simply output this.name refers to the name property that we created. Then we used this class to store an instance in a constant with the new keyword. And then we have executed person.PrintMyName(). Now, if you click on run, then you will get the following output.

This is how easily we can use a class. Now, we said that classes can also inherit. So what we can do is we can create another class human, and there we will add a constructor to set this.gender. Then we will add a method printGender() that will print this.gender.

class Human{
  constructor(){
    this.gender = 'male';
  }
  
  printGender(){
    console.log(this.gender);
  }
}

In JavaScript, extends keyword is used for inheriting properties and methods of one class to another. Modify the Person class as

class Person extends Human {
 …
}

Here, the Person class has inherited the ‘gender’ property and the ‘printGender’ method of the Human class. Now we can use these in the ‘Person’ class as well. We can write,

person.printGender();

Here, it should print ‘male’ on the screen but before it runs successfully, we’ll get an error,

We must call the super constructor in the derived class and that is important. If you are extending another class and you are implementing the constructor, then you must add a super method in the constructor. In our case,

class Person extends Human {
 constructor () {
  super ();
             }
}

Here, we have added a super method to the derived class constructor. It is a keyword and it simply executes the parent constructor to which you of course have to initialize the parent class. Now the error will be gone. Now you can go into your person class and still set gender there which is not 100 percent correct here but that is just to showcase that this works.

So, these are classes, and classes are used by React to create its components. At least this is one of the two ways of creating components. This is how you will see us use it in our upcoming articles and it is important to understand that classes are blueprints for JavaScript objects and are very comparable to constructor functions where inheritance is comparable to prototypes.

Example to understand classes in JavaScript:

class Human{
  constructor(){
    this.gender = 'male';
  }
  
  printGender(){
    console.log(this.gender);
  }
}

class Person extends Human{
  constructor(){
    super();
    this.gender = 'female';
    this.name = 'John';
  }
  
  printMyName(){
    console.log(this.name);
  }
}

const person = new Person();
person.printMyName();
person.printGender();

Output:

In the next article, I am going to discuss Properties and Methods in JavaScript with Examples. Here, in this article, I try to explain Classes in JavaScript with Examples. I hope you enjoy this Classes in JavaScript article.