Java/J2EE and SOA (349 Blogs) Become a Certified Professional
AWS Global Infrastructure

Programming & Frameworks

Topics Covered
  • C Programming and Data Structures (16 Blogs)
  • Comprehensive Java Course (5 Blogs)
  • Java/J2EE and SOA (346 Blogs)
  • Spring Framework (8 Blogs)
SEE MORE

What is a JavaScript Class and how to use it?

Last updated on Apr 20,2023 2.1K Views

7 / 31 Blog from JavaScript

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

Upcoming Batches For Java Course Online
Course NameDateDetails
Java Course Online

Class Starts on 7th December,2024

7th December

SAT&SUN (Weekend Batch)
View Details
Comments
0 Comments

Join the discussion

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

What is a JavaScript Class and how to use it?

edureka.co