Another method other than a constructor in a JavaScript class?

Javascript Web Development Front End Technology

In this artcle we are going to learn another method other than a constructor in a JavaScript class with suitable examples in JavaScript

The Constructor is used to create and initialize an instance of a class i.e., object. The constructor's job is to build a new object and set values for any attributes that already exist on the object. Every class has a default constructor. If we don’t provide our own constructor, then the default constructor will be incoked.

Let’s understand this concept in a better way with the help of suitable examples further in this article.

Syntax

The syntax for a constructor is −

Constructor(); // No parameters
Constructor(param1); //One parameter constructor
Constructor(param1,param2,…,paramN) // N-parameter constructor.

Param1, param2, …paramN are the parameters passed to the constructor.

Example 1

This is an example program to write a method other than a constructor.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Another method other than a constructor in a JavaScript class</title>
</head>
<body style="text-align: center ;">
   <p> Another method other than a constructor in a JavaScript class </p>
   <p id="method"></p>
   <script>
      class Person {
         constructor(name){
            this.name = name;
         }
         PersonName() {
            return 'The person name is : '+this.name;
         }
      }
      person_1 = new Person("Raghu");
      document.getElementById("method").innerHTML = person_1.PersonName();
   </script>
</body>
</html>

On executing the above code, the below output is generated.

Example 2

This is an example program to illustrate the usage of method other than a constructor. Instead of using the default constructor for initialization, we used a user-defined method called PersonDetails().

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Another method other than a constructor in a JavaScript class</title>
</head>
<body style="text-align: center ;">
   <p> Another method other than a constructor in a JavaScript class </p>
   <p id="method"></p>
   <script>
      class Person {
         constructor(name, EmployeeID, designation) {
            this.name = name;
            this.EmployeeID = EmployeeID;
            this.designation = designation;
         }
         PersonDetails() {
            return this.name + " has the designation : " + this.designation;
         }
      }
      person_1 = new Person("Rajesh", "10023", "Software Engineer");
      document.getElementById("method").innerHTML = person_1.PersonDetails();
   </script>
</body>
</html>

On executing the above code, the below output is generated.

Example 3

In the following example, rather than using the default method constructor() the properties were actually initialized in a user given method called "anotherMet()". Through this method, the actual result is executed in the output as shown.

<html>
<body>
   <p id="method"></p>
   <script>
      class Company {
         constructor(branch) {
            this.name = branch;
         }
         anotherMet(x) {
            return x + " is the head of " + this.name;
         }
      }
      myComp = new Company("Microsoft.");
      document.getElementById("method").innerHTML = myComp.anotherMet("Bill gates");
   </script>
</body>
</html>

On executing the above code, the below output is generated.