An Overview of JavaScript Classes
ES6 introduces JavaScript classes. They are templates for creating JavaScript objects. In a class, data is encapsulated with code that can be used to process it. This blog will give you an overview of JavaScript class and its methods with their examples.
JavaScript classes are the templates for JavaScript objects. It is the object’s blueprint using which an object can be produced. The class can be compared to a rough prototype of a home. It includes all of the information regarding the doors, floors, windows, etc. You construct the house using these descriptions as a guide. The item is a house.
We can produce numerous objects from a class because numerous houses can be constructed using the same description. In this article, we will discuss classes in detail in JavaScript, along with various properties and operations related to them.
Table of Contents
Want to be a certified JavaScript developer? Explore top free JavaScript certifications.
Creating JavaScript Class
The JavaScript class is essentially a syntactic sugar, analogous to the JavaScript function Object() function.
The syntax is given below:
function Person1 () { this.name = 'ABC', this.age = 18}
const person2 = new Person1()
For constructing Javascript classes, you utilize the class keyword rather than the function keyword.
class Person1 { constructor(name) { this.name = name; }
Check out- Top JavaScript interview questions and answers
Constructor Method
- It must be called exactly “function Object()”
- When a new item is generated, it is carried out automatically.
- It is employed to set up object properties.
To construct a class, use the class keyword. A function Object() function assigns the properties.
You may now make an object. For instance,
class Person1 { constructor(name) { this.name = name; }}const person2 = new Person1('ABC');const person3 = new Person1('XYZ');console.log(person2.name); //ABCconsole.log(person3.name); //XYZ
Here, the objects of the Person class are person2 and person3.
Every time an object is created, the function Object() { [native code] }() method within a class is automatically called.
// constructor functionfunction Person (name) { // assigning values to the calling object this.name = name; this.greet = function () { return ('Hello' + ' ' + this.name); }}
The JavaScript class makes it simple to define methods. All you have to do is state the method name, followed by ()
class Person1 { constructor(name) {
this.name = name;
greet() {
console.log(`Hey ${this.name}`) }}
let person2 = new Person1('ABC');
console.log(person2.name);person2.greet();
Explore- JavaScript Online Courses & Certifications
Getters and Setters
In JavaScript, getter methods retrieve an object’s value whereas setter methods alter it.
Classes in JavaScript might have getters and setters. For getter methods, you use the keyword gets, while for setter methods, you use set.
class Person { constructor(name) {
this.name = name;
}
get person1() {
return this.name;
} set person1(a) {
this.name = a;
}
}
let person2 = new Person('ABC');
console.log(person2.name);
person1.personName = 'Sarah';
console.log(person1.name); // Sarah
Also read: Java vs JavaScript: Difference between Java and JavaScript.
Hoisting
Prior to use, a class needs to be defined. The class is not hoisted, in contrast to functions as well as other JavaScript declarations.
Let us see an example below for JavaScript classes:
<!DOCTYPE html><html><body>
<h2>JavaScript Methods for Class</h2><p>Defining and using a Class method.</p>
<p id="demo"></p>
<script>class Car1 { constructor(name, year) { this.name = name; this.year = year;
} age() { let date = new Date(); return date.getFullYear() - this.year; }}
let myCar = new Car1("Maruti", 2017);document.getElementById("demo")[removed] ="The car is " + myCar.age() + " years old.";</script></body></html>
Best-suited JavaScript courses for you
Learn JavaScript with these high-rated online courses
Conclusion
In this article, we have discussed classes in JavaScript. A class is the object’s blueprint. We have also talked about the method for resting a class using a constructor and hoisting.
Contributed by Megha Chadha
This is a collection of insightful articles from domain experts in the fields of Cloud Computing, DevOps, AWS, Data Science, Machine Learning, AI, and Natural Language Processing. The range of topics caters to upski... Read Full Bio
Top Picks & New Arrivals
