In this article, we will learn what is JavaScript constructor pattern and how to use it with an example.

What is the design pattern?

A design pattern is a term used in software engineering for a general reusable solution to a commonly occurring problem in software design.

The Constructor Pattern

This is a class-based creational design pattern. Constructors are special functions that can be used to instantiate new objects with methods and properties defined by that function. Constructor pattern is one of the most commonly used patterns in JavaScript for creating new objects of a given kind.

As probably you know, JavaScript doesn't support the concept of classes but it does support special constructor functions. By simply prefixing a call to a constructor function with the keyword 'new', you can tell JavaScript you would like a function to behave like a constructor and instantiate a new object with the members defined by that function.

The Constructor Pattern Example

Let's create very basic constructors that define properties and methods for a custom object.

// using constructor function
function User(firstName, lastName, emailId, age){
    this.firstName = firstName;
    this.lastName = lastName;
    this.emailId = emailId;
    this.age = age;
    this.getFullName = function (){
        return this.firstName + " " + this.lastName;
    }
}

var user1 = new User('Ramesh', 'Fadatare', '[email protected]', 29);
var user2 = new User('John', 'Cena', '[email protected]', 45);
var user3 = new User('Tony', 'Stark', '[email protected]', 52);

// Print objects
console.log(user1);
console.log(user2);
console.log(user3);

// access properties
console.log(user1.firstName);
console.log(user1.lastName);
console.log(user1.age);

// calling method
console.log(user1.getFullName());

Output:

User {firstName: "Ramesh", lastName: "Fadatare", emailId: "[email protected]", age: 29, getFullName: ƒ}
User {firstName: "John", lastName: "Cena", emailId: "[email protected]", age: 45, getFullName: ƒ}
User {firstName: "Tony", lastName: "Stark", emailId: "[email protected]", age: 52, getFullName: ƒ}
Ramesh
Fadatare
29
Ramesh Fadatare

The above is a simple version of the constructor pattern but it does suffer from some problems. One is that it makes inheritance difficult and the other is that functions such as getFullName() are redefined for each of the new objects created using the User constructor. This isn't very optimal as the function should ideally be shared between all of the instances of the User type.

We can avoid this problem by setting the method into the function prototype:

// using constructor function
function User(firstName, lastName, emailId, age){
    this.firstName = firstName;
    this.lastName = lastName;
    this.emailId = emailId;
    this.age = age;
}

// // we extend the function's prototype
User.prototype.getFullName = function () {
 return this.firstName + " " + this.lastName;
}

var user1 = new User('Ramesh', 'Fadatare', '[email protected]', 29);
var user2 = new User('John', 'Cena', '[email protected]', 45);
var user3 = new User('Tony', 'Stark', '[email protected]', 52);

// Print objects
console.log(user1);
console.log(user2);
console.log(user3);

// access properties
console.log(user1.firstName);
console.log(user1.lastName);
console.log(user1.age);

// calling method
console.log(user1.getFullName());

Output:

User {firstName: "Ramesh", lastName: "Fadatare", emailId: "[email protected]", age: 29, getFullName: ƒ}
User {firstName: "John", lastName: "Cena", emailId: "[email protected]", age: 45, getFullName: ƒ}
User {firstName: "Tony", lastName: "Stark", emailId: "[email protected]", age: 52, getFullName: ƒ}
Ramesh
Fadatare
29
Ramesh Fadatare

Now, all user instances of the User constructor can access a shared instance of the getFullName() method.