Add a method to a JavaScript object constructor?

In JavaScript, adding a method (function) to a constructor is different from adding a method to a regular object. To add a method to a constructor, we need to define it inside the constructor or in its prototype (using which JavaScript objects inherit features from one another).

We can create an object in the following ways in JavaScript:

Using the function Constructor (older way):

function person(){
}
const p = new person();

Using ES6 Class Syntax (i.e., modern way):

class person{
   constructor(){}
}
const p = new person();

Let's see the various ways to add a method to a constructor object in JavaScript.

Adding Method to a JavaScript Object Constructor

To add a method (function) to a JavaScript Object Constructor, we will use the following approaches:

• Using the "this" keyword inside the Constructor
• Using a "prototype" object outside the Constructor

Let's understand this concept in a better way with the help of suitable examples:

Using "this" Keyword Inside the Constructor

We can add or define a function (method) inside a JavaScript constructor (object). To access it, we must assign it to a property using "this" keyword. Following is the syntax to add a method to a JavaScript constructor (object):

Syntax

//anonymous function
this.propertyName = function(){}
or
this.propertyName = function functionName(){}

Example 1: Function Constructor

In this example, we use a constructor function (i.e., compatible with older versions of JavaScript) to create an object. Inside the constructor function, we use the "this" keyword to assign an anonymous function to a property:

function business(name, property, age, designation) {
   this.name = name;
   this.property = property;
   this.age = age;
   this.designation = designation;
   this.displayName = function () {
      return "Name: " + this.name;
   }
}
//creating object...
const b = new business("Bill Gates", "$28.05billion", "71", "Owner");
//accessing the displayName() method
console.log(b.displayName());

Name: Bill Gates

Example 2: ES6 Class Constructor

Here, we are using the modern ES6 class syntax to create an object. The class includes a constructor that initializes properties using the "this" keyword. In the constructor, we assign a function to a property:

class User{
   constructor(name) {
      this.name = name;
      this.message = function greet() {
         return "Hello " + this.name;
      }
   }
}
const user = new User("Rahul");
console.log(user.message());

Hello Rahul

Using "prototype" Object Outside the Object Constructor

In JavaScript, a prototype is an object from which other objects inherit properties and methods.

Using the prototype object, you can add new methods or properties to an existing function constructor or class constructor. Following is the syntax to add a method (function) to a constructor (object) in JavaScript:

Syntax

constructorName.prototype.methodName = function() { };

Example: Adding Method via Prototype

In the following example, we use the prototype object to assign (or add) an anonymous method (function) to a property:

function Car(name, model, year, color) {
   this.Name = name;
   this.Model = model;
   this.Year = year;
   this.Color = color;
   this.type = 'SUV';
}
//using prototype object to add a method 
Car.prototype.description = function () {
   return this.Name + " is of " + this.Model + " model and launched in the year " + this.Year + " and is of " + this.type + " type."
}
var car1 = new Car("Maruti", "Vitara Brezza", "2016", "Red");
console.log(car1.description());

Maruti is of Vitara Brezza model and launched in the year 2016 and is of SUV type.

Comparison of Both Methods

Conclusion

In JavaScript, you can add methods to constructors using either the "this" keyword inside the constructor or the prototype object. The prototype approach is generally preferred as it's more memory efficient and allows all instances to share the same method.