JavaScript and JQuery Essentials Trainin... (44 Blogs) Become a Certified Professional
AWS Global Infrastructure

Front End Web Development

Topics Covered
  • AngularJS (18 Blogs)
  • jQuery UI Development (1 Blogs)
  • The Complete WebDeveloper (34 Blogs)
  • ReactJS (7 Blogs)
SEE MORE

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-widget-banner-bg

What is a JavaScript Class and how to use it?

Published on Aug 27,2019 43 Views
6 / 21 Blog from JavaScript

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

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?

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.


// 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). 

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

Comments
0 Comments

Browse Categories

Subscribe to our Newsletter, and get personalized recommendations.