JavaScript Classes
JavaScript supports the concept of classes. Classes got introduced in JavaScript from ES6 onwards.
We all should have faced the scenarios when multiple instances of one type need to create. The object-oriented programming came into existence to support this functionality, which used the concept of classes to represent living types and allowed to create multiple objects of the same type.
In this article, we will understand the concept of JavaScript Classes by covering the following topics
- What is a Class in JavaScript?
- How to create objects of classes in JavaScript?
- What is a constructor in JavaScript Classes?
- Class Constructors with and without parameters?
- What are the static properties and static methods of a class?
- How to implement Class Inheritance in JavaScript?
What is a Class in JavaScript?
Classes in JavaScript are a type of function only, but instead of using the keyword "function", the keyword "class" is used to declare a class. Its syntax looks like below:
class classname { //variables and methods }
where "classname" represents the name of the class, and the curly brackets specify the start and end of the class definition.
Let's understand the details of the class with the help of a real-world example. Suppose we want to create a data structure that represents a "Student" and can we used to create different instances of the Student which resonates with various students. Now, each student can have different names, date of birth, father name, and mother name. So, we can represent such data structure with the help of a class, and we can create different objects of that class which represents various students.
we can define the "Student" class as follows:
class Student{
//Properties of the Student
name, dob, fatherName, motherName;
// Methods for manipulating/exposing Student's properties
getStudentName()
{
console.log(this.name);
}
}
As is evident from the above example, the class Student has various properties like name, dob, fatherName, and motherName and has the method getStudentName(), which prints the name of the student.
How to create objects of classes in JavaScript?
To access the properties and methods of the class, we need to create an object of the class and then access the properties and methods using the dot(.) operator. Similar to functions, JavaScript provides the "new" operator to create the object of a class. Its syntax looks like below:
Syntax to object creation:
const object1 = new classname();
Syntax to access properties and methods using object of the class:
object1.property1 = value1;
object1.method1();
Let’s understand these details using the following example
class Student{
name;dob;
getStudentName(){
console.log(this.name);
}
getDOB(){
console.log(this.dob);
}
}
const student1 = new Student();
student1.name="Tom";
student1.dob="09/10/2014"
const student2 = new Student();
student2.name="Dave";
student1.getStudentName();
student1.getDOB();
student2.getStudentName();
What is a Constructor in JavaScript Classes?
If we want to perform some initialization or functionality while creating the object itself, you can achieve it with the help of defining those details inside a particular function called "constructor", which invokes automatically when the creation of the object of the class happens. Now depending on the implementation, the "constructor" function may or may not accept parameters. Let's understand these various implementations of the "constructor" function in the below sections.
How to define and invoke Class Constructors with no parameters?
If you don't define any constructors in the program, as we did in the above example of Student, JavaScript will create its own "default constructor" with an empty body. But, if you need to perform some operation while creating the object of the class, you can also define a constructor explicitly.
Syntax: class classname{ constructor(){ //code need to executed }}
Example:
class Student{
constructor()
{
console.log("user defined constructor");
}
name;dob;
getStudentName(){
console.log(this.name);
}
getDOB(){
console.log(this.dob);
}
}
const student1 = new Student();
const student2 = new Student();
As we see in the above example, we have created the user-defined constructor, this constructor is overriding default constructor and executing the user-defined constructor whenever a new object is created.
How to define and invoke Class Constructor with Parameters?
If you want to assign some value to the properties of the class while creating the object itself, you can achieve this with the help of a parameterized constructor.
Syntax: class classname{ constructor(parameter1,parameter2.....,parameterN){//code}}
Let’s understand these details using the following example, where we are creating a constructor with the parameters in the class:
class Student{
constructor(name,dob)
{
this.name=name;
this.dob=dob;
console.log("user defined constructor");
}
name;dob;
getStudentName(){
console.log(this.name);
}
getDOB(){
console.log(this.dob);
}
}
const student1 = new Student("Tom","09/10/2014");
student1.getStudentName();
student1.getDOB();
Note: Unlike other object-oriented languages, JavaScript also allows only one constructor in a class.
What are the Static Properties and Static Methods of a class?
If you want certain properties and methods of a class to be associated with the class itself, instead of the objects of the class, they can declare as static. So, to invoke these methods and access these properties, the instance of the class is not needed, but they can invoke using the class name itself.
Syntax
class classname {
static property1 = value1;
static method1(){
// Perform needeed action
}
}
These properties and methods can invoke directly using the class name, as shown below:
Syntax: classname.property1; classname.method1
Let's understand the details and usage of the static properties and methods with below example
class Student{
static name = "Dave";
static getStudentName(){
console.log(this.name);
}
}
Student.getStudentName();
console.log(Student.name)
How to Implement Class Inheritance in JavaScript?
In JavaScript, one class inherits other classes using the "extends" keyword. The child class will have access to all the methods of the parent class, and you can invoke all the methods of the parent class using the child class object.
To invoke parent class constructor, JavaScript provided a method "super()", which can be invoked inside the child class constructor and which in turn calls the parent class constructor automatically.
Note- super() should be invoked as a first statement of child constructor.
Syntax:
class classname1{
constructor(){
//parent class constructor
}
//methods of the parent class
}
class classname2 extends classname1 //classname2 inherits classname1 using extends
{
constructor() {
super();
// Other statements for child class initialization
}
// methods of the child class
}
Example:
class Student{
className;
constructor(className){
console.log("Student's constructor");
this.className = className;
}
getClassName(){
console.log(this.className);
}
}
class collegeStudent extends Student {
constructor(className) {
super(className);
console.log("collegeStudent's constructor");
}
}
const object1 = new collegeStudent("Masters");
object1.getClassName(); // Invoking parent class method using child class object
Key Takeaways
- A class is a user-defined blueprint from which we create objects. Moreover, it represents the set of properties or methods that are common to all objects of one type.
- Additionally, a constructor is a block of code that initializes the newly created object.
- A class in JavaScript can contain static properties and static methods, but they can be invoked only using the class name and doesn't need any object for their invocation.
- In addition to the above, inheritance can implement in JavaScript by using the "extends" keyword.
- super() is used to invoke parent class constructor in child class constructor
