Easy JavaScript Part 10: Class in JavaScript?

ECMAScript 6 introduced the class keyword to create classes in JavaScript. Now, you can just use the class attribute to create a class in JavaScript. Before ECMA 6, whenever you called a function using a new operator, the function returned a new object. Therefore, the function was acting as a class and known as a constructor. This way of calling a function to return an object is also known as the Constructor Invocation Pattern.

But In ECMAScript 6, a class can be created using the class keyword. Consider the code below: 

class Car {
 
    constructor(maker, price) {
        this.maker = maker;
        this.price = price;
    }
 
    getInfo() {
        console.log(this.maker + " costs : " + this.price);
    }
}

In the above code snippet, you have created a class named Car using the ECMAScript 6 class keyword. You can also create an object of the Car class as shown below: 

var car1 = new Car("BMW", 100);
car1.getInfo();
var car2 = new Car("Audi", 150);
car2.getInfo();

 The JavaScript class is a simplified syntax for the usual prototype based inheritance. It does not offer any new way of object creation or prototype inheritance and does not bring any new models of object orientation or inheritance in JavaScript. You could say that a class is a special function to create objects. 

Class Declaration and Expression

 Since the class attribute in JavaScript is also like a function, it can also be created by using class declarations and class expressions. You can create a class using class declaration as seen below:

class Car {
 
    constructor(maker, price) {
        this.maker = maker;
        this.price = price;
    }
    getInfo() {
        console.log(this.maker + " costs : " + this.price);
    }
}

A class can also be created using a class expression. You can either create named or unnamed class expressions. A named class expression can be created as shown below:

var Car = class {
 
    constructor(maker, price) {
        this.maker = maker;
        this.price = price;
    }
    getInfo() {
        console.log(this.maker + " costs : " + this.price);
    }
    toString() {
        return `${this.maker} costs : ${this.price}`;
    }
}

An unnamed class expression can be created as shown below. The name given to the class expression is local to the class body. 

var Car = class c {
    constructor(maker, price) {
        this.maker = maker;
        this.price = price;
    }
    getInfo() {
        console.log(this.maker + " costs : " + this.price);
    }
    toString() {
        return `${this.maker} costs : ${this.price}`;
    }
}

Hoisting of class

 As shown earlier, a class can be created as both a declaration and expression, however unlike with the function declaration, a class declaration does not get hoisted to the top of the execution context. Consider the following code:

var car1 = new Car("BMW", 10); // Reference Error  console.log(car1.toString());
 
class Car {
 
    constructor(maker, price) {
        this.maker = maker;
        this.price = price;
    }
 
    getInfo() {
        console.log(this.maker + " costs : " + this.price);
    }
 
    toString() {
        return `${this.maker} costs : ${this.price}`;
    }
}

The above code will throw a ReferenceError, because you are trying to access a class before declaring it. Therefore, we can summarize that a function declaration is hoisted whereas a class declaration is not hoisted. 

Class Methods

 There are three types of methods in a JavaScript class:

1. Constructor method
2. Static method
3. Prototype method 

A class constructor method creates an initialize object. A class can have only one constructor method. If you try to create more than one constructor method, JavaScript will throw an exception. A constructor can be created using the keyword constructor as shown in the code below:

class Car {
 
    constructor(maker, price) {
        this.maker = maker;
        this.price = price;
    }
}

JavaScript class static methods are called with the class and not with a specific object of the class. If you try to call them with the instance of the class, JavaScript will throw an exception. A static method can be created using the keyword static as shown in the listing below: 

class Car {
    static count() {
        console.log("I am static method");
    }
 
}
 
Car.count();
Car.count();

If you try to call a static method with an instance, JavaScript will throw you exception stating that the function does not exist. Also, keep in mind that a JavaScript class does not have a static property or members. As of now, it only supports static methods.

Any normal method which is accessed using the instance of the class is known as a prototype method. These methods can be inherited and used with objects of the class. 

class Car {
 
    constructor(maker, price) {
        this.maker = maker;
        this.price = price;
    }
 
    getInfo() {
        console.log(this.maker + " costs : " + this.price);
    }
}
 
var car1 = new Car("BMW", 10);
car1.getInfo();

In the above code snippet, getInfo() is a prototype method of the Car class. As you can see, we’re using it with the instance of the Car class. Since it is a prototype method, it can also be inherited. Let’s explore why these methods are called prototype methods. First, consider the following code: 

class Car {
 
    constructor(maker, price) {
        this.maker = maker;
        this.price = price;
    }
 
    getInfo() {
        console.log(this.maker + " costs : " + this.price);
    }
}
 
console.log(typeof (Car)); // function

Here we’re inputing a typeof Car class, and we’re getting an output of function printed. As you see, the class is nothing but is a function type, so like any other function it also has a prototype property. These normal methods are methods of the prototype object of the class, hence they are known as prototype methods. They can be inherited by adhering to the prototype based inheritance.

Besides these three types of methods, JavaScript also has things called getters and setters, which you can learn about here.

Conclusion

In this post, we took a brief look at the JavaScript class attribute, which was introduced in ECMAScript 2015. Using the class keyword, you can create a class, but keep in mind that this does not introduce a new way of object creation or inheritance. Rather, this is just a simpler syntax for the same object and prototype based inheritance.

In the next post we will dive into inheritance using class and the extends keyword. In the meantime, don’t forget to check out Ignite UI for JavaScript/HTML5 and ASP.NET MVC, which you can use with HTML5, Angular, React, and ASP.NET MVC to create rich Internet applications. You can download a trial of all our JavaScript controls for free!