What is a JavaScript Class and how to use it?

In object-oriented programming, a class is an extensible program-code-template for creating objects. JavaScript classes can be primarily thought of as a syntactical sugar over JavaScript’s existing prototype-based inheritance. In this article, we will get into the depth of the JavaScript class and learn how to use them in the following sequence:

• What is a JavaScript Class?
• How to use JavaScript Class?
  • Define a Class
  • Define Methods
  • Extending a Class

What is a JavaScript Class?

In JavaScript, a class is a type of function and are declared with the class keyword. You need to use function expression syntax to initialize a function and class expression syntax to initialize a class.

// Initializing a function with a function expression
const a = function() {}

// Initializing a class with a class expression
const b = class {}

In JavaScript, instead of using the keyword function to initiate it, we use the keyword class. Also, the properties are assigned inside a constructor() method.

How to use a JavaScript Class?

The code declared with function and class both return a function [[Prototype]]. With prototypes, any function can become a constructor instance using the new keyword. For example:

const a = class {}

// Initialize a constructor from a class
const constructorFromClass = new a();

console.log(constructorFromClass);

Output:

a {}
constructor: class

Now, there are three different ways of using class in JavaScript. Let’s get into the details of each method with an example.

Define a Class

A constructor function is initialized with a number of parameters, which is assigned as properties of ‘this’, referring to the function itself. The first letter of the identifier is capitalized by convention. To know more, join Full stack developer course today.

// Initializing a constructor function
function employee(name, empid) {
this.name = name;
this.empid = empid;
}

Now, if we translate this to the class syntax, you will see that the structures are very similar.

// Initializing a class definition
class employee{
constructor(name, empid) {
this.name = name;
this.empid = empid;
}
}

We can say that the class keyword communicates in a more straightforward way. The only difference in the syntax of the initialization is using the class keyword instead of function. Also, it assigns the properties inside a constructor() method.

Define Methods

Another common practice with constructor functions is to assign methods directly to the prototype instead of in the initialization. We will take an example and see how it works:

function employee(name, empid) {
this.name = name;
this.empid = empid;
}

// Adding a method to the constructor
employee.prototype.greet = function() {
return `${this.name} says hello.`;
}

When you are writing the same code with class, it is simplified and the method is added directly.

class employee {
constructor(name, empid) {
this.name = name;
this.empid = empid;
}

// Adding a method to the constructor
greet() {
return `${this.name} says hello.`;
}
}

Although classes allow for a more simple and succinct syntax, sometimes you might have to compromise with the clarity in the process.

Extending a Class

The advantage of constructor functions and classes is that they can be extended into new object blueprints based off of the parent. This helps in the prevention of repetition of code for objects that are similar but need some additional or more specific features.

New constructor functions can be created from the parent using the call() method. For example:

// Creating a new constructor from the parent
function info(name, empid, salary) {
// Chain constructor with call
employee.call(this, name, empid);

this.salary = salary;
}

Now, when we write the same code using class, the super keyword is used in place of call to access the parent functions.

// Creating a new class from the parent
class info extends employee {
constructor(name, empid, salary) {
// Chain constructor with super
super(name, empid);

// Add a new property
this.salary = salary;
}
}

Classes provide you a more concise way of creating object blueprints, and constructor functions describe what is happening under the hood in a more specific way.

With this, we have come to the end of our article. I hope you understood how to use JavaScript Class.

Now that you know about JavaScript Class, check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3). 

If you want to get trained in React and wish to develop interesting UI’s on your own, then check out the Best React Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe.

Got a question for us? Please mention it in the comments section of “JavaScript Class” and we will get back to you.