Hi everyone, welcome back. In this module, I will be discussing classes in JavaScript. After reading this module, you will get to know what is a class in JavaScript & how to create Classes in JavaScript. So, let’s begin to know about it.
Classes in JavaScript
Like other object-oriented programming languages like Java, Python, C++, etc., a class in JavaScript is a template for creating objects in JavaScript. It was introduced in ECMAScript 2015, which is also known as ES6. In other words, a class is a blueprint for JavaScript Objects that consist of attributes or member variables & member functions or methods that manipulate and access these variables. These variables & methods can be accessed by creating objects or instances of a class.
An object is a real-world entity that has some characteristics & behaviours. In programming languages, an object is an instance of a JavaScript class. Using class, we can create multiple objects or instances of a class of the same type.
A class is a way of creating a user-defined data type that represents a group of objects that share common characteristics or properties & behaviours.
Now, let’s see how to create classes in JavaScript.
How to create classes in JavaScript?
In JavaScript, we can define or create classes in two ways:
- Using class keyword.
- Using class expressions.
Using the class keyword in JavaScript
In JavaScript, we can create a class using the class keyword followed by the name of the class.
Syntax
class class_name{
// body of the class
}
class Demo {
fun(){
('hello');
}
}
In the above example, fun() is an instance member function of a class.
Using class expression in JavaScript
let Demo = class {
fun() {
("hello");
}
};
Now, let’s create objects in JavaScript.
How to create objects in JavaScript?
In JavaScript, we can create objects using the new keyword.
Syntax
let object_name= new ClassName();
Instead of using let, you can use either var or const for creating objects in JavaScript.
<!DOCTYPE html>
<html>
<body>
<h1>Creating a class in JavaScript</h1>
<script>
class Demo {
fun(){
document.write('This is an example of creating classes in JavaScript.');
}
}
// creating object of Demo class
const obj=new Demo();
obj.fun();
</script>
</body>
</html>
//Output
//This is an example of creating classes in JavaScript.
What is a constructor in JavaScript?
A constructor is a special member function of a JavaScript class used for initializing properties or attributes of an object. When a new object of a class is created, it is executed automatically.
A constructor method may or may not take parameters depending on the requirement.
A constructor in JavaScript is created using the constructor keyword.
<strong>Syntax</strong>
class class_name{
constructor(){
// properties
}
}
JavaScript will add an empty constructor method when you do not create a constructor inside a class.
class Demo{
constructor(){
console.log('This is a constructor method.');
}
}
const obj=new Demo();
//Output
//This is a constructor method.
Creating a constructor with parameters.
class Demo {
constructor(message) {
this.message = message;
}
show(){
console.log(`Message: ${this.message}`);
}
}
const obj=new Demo("This is a constructor method with parameters."); obj.show();
//Output
//Message: This is a constructor method with parameters.
Now, let’s see one example of how to create a class Student with multiple objects using class keywords & class expressions.
Using class keyword in JavaScript
<!DOCTYPE html>
<html>
<body>
<script>
class Student{
constructor(name, age, gender){
this.name=name;
this.age=age;
this.gender=gender;
}
show(){
console.log(`Name: ${this.name}`);
console.log(`Age: ${this.age}`);
console.log(`Gender: ${this.gender}`);
}
}
var raman= new Student("Raman Singh",21,"Male");
var simran= new Student("Simran Shukla",22,"Female");
raman.show();
simran.show();
</script>
</body>
</html>
Using class expression in JavaScript
<!DOCTYPE html>
<html>
<body>
<script>
let Student=class{
constructor(name, age, gender){
this.name=name;
this.age=age;
this.gender=gender;
}
show(){
console.log(`Name: ${this.name}`);
console.log(`Age: ${this.age}`);
console.log(`Gender: ${this.gender}`);
}
}
var raman= new Student("Raman Singh",21,"Male");
var simran= new Student("Simran Shukla",22,"Female");
raman.show();
simran.show();
</script>
</body>
</html>
//Output
//Name: Raman Singh
//Age: 21
//Gender: Male
//Name: Simran Shukla
//Age: 22
//Gender: Female
If we check the type of Student using typeof operator, you will get the function as an output. This shows that in JavaScript, classes are special functions.
console.log(typeof Student); //Output //function
Similarly, on checking the type of Raman, you will get an object as an output.
console.log(typeof raman); //Output //object
I hope you have got a basic knowledge of classes in JavaScript and how to create it. In the next module, we will be knowing about Inheritance in JavaScript, then you can visit our website for more informative modules like this.
