JavaScript

OOP Classes in JavaScript | Explained

Before ES6, “prototypes” were utilized to simulate classes in JavaScript, where additional properties can be associated with a prototype using inheritance. When a new and enhanced version of ES5 was introduced, known as ES6, JavaScript classes were added to it.

In ES6, classes are considered a fundamental component of JavaScript, and it has much simpler and error-prone syntax as compared to prototypes. Similar to Object-Oriented Programming (OOP), the JavaScript class comprises a Constructor method, some specific properties, methods, and objects of the given class type.

This post explains OOP classes in JavaScript with the help of suitable examples. So, let’s start!

OOP Classes in JavaScript

As mentioned earlier, JavaScript classes are introduced in ES6. They offer a concise manner of declaring class by utilizing a syntax similar to what we use in OOP.

In JavaScript, you can use the “class” keyword for defining a class. It adds syntactic sugar (a good kind of sugar) over the existing prototype inheritance pattern.

Syntax of OOP classes in JavaScript

To create an OOP class in JavaScript, you have to follow the below-given syntax:

class ClassName {

   constructor() { ... }

}

Here, “class” is a keyword utilized to create a class. Also, an OOP class must have a method named “constructor()”.

Example: Create OOP class in JavaScript

We will define a class named “Person” which has two properties: “name” and “age”:

class Person{
  constructor() {
  this.name = 'Alex';
  this.age = 25;
  }
}

To utilize the Person class, we have to create an object or instance of the specified class:

let person1 = new Person();

Now, “person1” object can access the properties of the “Person” class:

console.log(person1.name + " " + person1.age);

As mentioned earlier, an OOP class in JavaScript must contain a constructor. Do you want to know more about Constructors in JavaScript? If yes, then follow the below-given section.

Constructors for OOP Classes in JavaScript

Constructor is a method invoked when you create an instance of an OOP class. It is also used to initialize objects within a class. However, JavaScript will automatically create and execute an empty constructor if you have not defined any constructor method for an OOP class.

Types of Constructors for OOP Classes in JavaScript

In JavaScript, there are the following two types of Constructors:

  • Default Constructor
  • Parameterized Constructor

The next section will briefly explain Default and Parameterized Constructor and their usage in JavaScript.

Default Constructor for OOP Classes in JavaScript

You can also explicitly define a default constructor without arguments if you want to perform any specific operation while creating an OOP class object.

Syntax of Default Constructor in JavaScript

class ClassName{
  constructor(){
    // body of the default constructor
  }
}

Example: Default Constructor for OOP Classes in JavaScript

In the below-given example, we will define a default constructor for the “Person” class. According to the definition of the “constructor()” method, whenever a “Person” class object is created, it will initialize its “name” property to “Alex”, and “age” property as “25.”

class Person{
  constructor() {
  this.name = 'Alex';
  this.age = 25;
  }
}
const person1 = new Person();
console.log("Name: " + person1.name);
console.log("Age: " + person1.age);

Execution of the given program will create a “person1” object of the “Person” OOP class by utilizing the default constructor. The default constructor will then initialize the specified properties for the “person1” object. Lastly, the “console.log()” method will print out the values stored in the “person1.name” and “person1.age” properties:

In an OOP class, utilizing the Default Constructor is useful when you want to initialize the properties of all of the created objects with the same value. But, what if you need to assign some unique values to the object while creating it? In JavaScript, you can achieve this functionality with the help of the “Parameterized Constructor”.

Parameterized Constructor for OOP classes in JavaScript

A constructor which comprises parameters is known as the “Parameterized Constructor“. This type of constructor is mainly used when you want to initialize the properties of the JavaScript OOP class with some specific values.

Syntax of Parameterized Constructor in JavaScript

class ClassName{
  constructor(parameter1, parameter2....., parameterN){
      // body of the parameterized constructor
  }
}

The parameterized constructor accepts parameters passed as “arguments” while creating an OOP class object.

Example: Parameterized Constructor for OOP classes in JavaScript

We will create a parameterized constructor for the “Person” class that initializes the properties with the values passed as arguments:

class Person{
  constructor(name, age) {
  this.name = name;
  this.age = age;
  }
}

In the below-given code, “person1” object of the “Person” class will be created using Parameterized constructor where “Max” is passed as “name” property value, and “25” argument represents the value of “age” property:

const person1 = new Person("Max", 25);

console.log("Name: " + person1.name);

console.log("Age: " + person1.age);

Following output signifies that we have successfully created a “person1” object having the specified property values with the help of the Parameterized Constructor:

We have talked about creating OOP classes, their related objects and defining default and parameterized constructors. Now, we will move ahead and discuss another critical component of an OOP class which is “Method”.

Methods in OOP classes in JavaScript

Methods are a type of function associated with specific JavaScript OOP classes. They also operate as a member function when defined within a class and can be used to access the properties of the class.

Syntax of Methods for OOP classes in JavaScript

class ClassName{
 methodName{
// body of the methodName
  }
}

Note: The name of an OOP class method must be in lowercase.

Example: Methods in OOP classes in JavaScript

In the same “Person” class, we will define a “displayInfo()” method which return the values of “name” and “age” properties for a specified object:

displayInfo(){

return ("Name: " + this.name + " Age: " + this.age);

}

After doing so, we will create an object of the “Person” class:

const person1 = new Person("Max", 25);

Next, we will invoke the “displayInfo()” by utilizing the “person1” object:

person1.displayInfo();

The “displayInfo()” method will return the “name” and “age” values of the “person1” object:

We have compiled the essential information related to the OOP class in JavaScript.

Conclusion

Using the “class” keyword, you can define an OOP Class in JavaScript. In ES6, the JavaScript classes were introduced to add syntactic sugar (a good kind of sugar) over the existing prototype inheritance pattern. Similar to OOP, the JavaScript class comprises a Constructor method, some specific properties, methods, and objects of the given class type. This write-up explained OOP classes in JavaScript with the help of suitable examples.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.