JavaScript Constructor Pattern | Objects in JavaScript

The constructor pattern in JavaScript is the simplest one perhaps. All we need to do is to create a constructor function, add properties and methods to it. It’s ready to use.

There are lots of blogs on the internet about what are design patterns, why should we use them, how they make developers lives simple, how they solve problems, and so on. I am not going to repeat them.

Unlike C++/Java, JavaScript is not a class-based language. With ES6 into the picture, while it is possible to write the class keyword (syntax) to create a class and subsequently a constructor function, we still convert the code to ES5 before loading into the production. The conversion creates a traditional JavaScript object with a constructor function we are going to talk about in a moment.

In JavaScript, it is possible to create an object using the following ways:

// 1. Object literals
var personObj = {
	firstName: "Jim",
	lastName: "Halpert"
}

// 2. Using Object's create method
var personObj = Object.create (Object.prototype);

// 3. Using object constructor
var personObj = new Object ();

// We can add properties like this (for 2 and 3)
Object.defineProperties (personObj, "firstName", {
	value: "Jim",
	writable: true,
	enumerable: true,
	configurable: true
});

// writable: it allows the value to be changed using the assignment operator.
// enumerable: if true, the property will show up during enumeration.
// configurable: if true, we can delete this property from the object.

There is another way to create an object. If you have worked with classes in C++/Java, then you should know about the new keyword (also used in example 3 above).

Though JavaScript (till ES5) does not have a class keyword, we can leverage the new keyword to create a class-like structure. All that we need to do is add the new keyword before calling the function to make it behave like a constructor function.

// Example
function Person (fname, lname) {
	this.fname = fname;
	this.lname = lname;
	
	this.getFullName = function () {
		return this.fname + " " + this.lname;
	}
}

var jim = new Person ("Jim", "Halpert");

We should not here if we omit the new keyword, we will get undefined assigned to the variable jim because this function returns undefined.

If we do not write a return statement, then the function will return undefined. A function always returns something.

It is obvious that the new keyword is doing the magic here. Whenever we call the function with the new keyword, it creates an object where this refers to the current object. So (using the example), jim object will have three properties, namely fname, lname, and getFullname.

Creating another instance using the new keyword will give another object with the same set of properties. The value assigned will be decided by the values passed in the function. Such functions, when used with the new keyword, create an object, are referred to as constructor functions.

In the above example, we see that each object (the instance of Person) will have three properties. Out of the three, we understand, the value of getFullName is same for all of them. Because it’s a function, and its outcome will depend on the other two properties the object has. Which means, we do not need to create a separate instance for each object, because functions should be reusable.

Prototypes

A prototype is a property of a function and, it is of type object. As it is an object, we can assign key-value pairs to it. The prototype is a shared property. Every object (the instance of the Person), will get the access to the prototype. So if we want something to share across all the objects, we know we can put it on the prototype just once. After a slight modification, we can write the constructor function as follows:

// Example
function Person (fname, lname) {
    this.fname = fname;
    this.lname = lname;
}

Person.prototype.getFullName = function () {
    return this.fname + " " + this.lname;
}

var jim = new Person ("Jim", "Halpert");
jim.getFullName (); // returns "Jim Halpert"

var mic = new Person ("Michael", "Scott");
mic.getFullName (); // returns "Michael Scott"

Well, that’s about it, a brief introduction to how we create an object in JavaScript with the help of a constructor function. A real-life and a simple example of using the constructor pattern would be to create a contact widget (or anything else that comes to your mind).

A contact widget will have a person’s full name, work title, location, photos, and so on. Each widget will be an instance of the Person’s object.