Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Easy JavaScript Part 10: Class in JavaScript?

DZone's Guide to

Easy JavaScript Part 10: Class in JavaScript?

In this post, we will take a brief look at the JavaScript class attribute, which was introduced to the language in ECMAScript 2015.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

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 Reference Error 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 inputting a type of 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.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
web dev ,javascript ,ecmascript ,web application development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}