JavaScript Constructor Pattern with Example

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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', 'ramesh24@gmail.com', 29);
var user2 = new User('John', 'Cena', 'john@gmail.com', 45);
var user3 = new User('Tony', 'Stark', 'tony@gmail.com', 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: "ramesh24@gmail.com", age: 29, getFullName: ƒ}
User {firstName: "John", lastName: "Cena", emailId: "john@gmail.com", age: 45, getFullName: ƒ}
User {firstName: "Tony", lastName: "Stark", emailId: "tony@gmail.com", 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', 'ramesh24@gmail.com', 29);
var user2 = new User('John', 'Cena', 'john@gmail.com', 45);
var user3 = new User('Tony', 'Stark', 'tony@gmail.com', 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: "ramesh24@gmail.com", age: 29, getFullName: ƒ}
User {firstName: "John", lastName: "Cena", emailId: "john@gmail.com", age: 45, getFullName: ƒ}
User {firstName: "Tony", lastName: "Stark", emailId: "tony@gmail.com", 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.

Related JavaScript Design Patterns

• JavaScript EventBus Example - Subscribe/Publish Listeners

• JavaScript Publish/Subscribe Pattern Example //Popular

• JavaScript Factory Pattern with Example //Popular

• JavaScript Prototype Pattern with Example //Popular

• JavaScript Constructor Pattern with Example //Popular

• JavaScript Builder Pattern Example //Popular

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF