Object Creation Patterns in JavaScript

August 04, 2019

JavaScripts deals a lot with objects. In this article, we will discuss some object creation Patterns in JavaScript.




To create objects in JS, there are different patterns that can be followed.
These patterns are:
  1. Factory Pattern
  2. Constructor Pattern
  3. Prototype Pattern
  4. Dynamic Prototype Pattern

FACTORY PATTERN

In the Factory pattern, we create a factory that creates specified objects and returns their reference. Every time, we call the factory, we will get a new instance.
Consider the example, where we want to create objects for a computer that will contain their memory capacities(ram and hard disk).
To create a Factory, we write the code:
//Factory pattern for object Creation
var computerFactory = function(ram, hardDisk) {
  var computer = {}; //creating a new temporary object  //Create class properties
  computer.ram = ram;
  computer.hardDisk = hardDisk;  //Create class methods
  computer.AvailableMemory = function() {
    console.log('Hard-disk : ' + this.hardDisk);
    console.log('Ram : ' + this.ram);
  };  return computer;
};
Now we will create an object by calling the factory like this.
//Creating new object(s) for computer class by using computerFactory
var computer1 = computerFactory(4,512);
var computer2 = computerFactory(16,1024);//Accessing class methods using objects
computer1.AvailableMemory();
computer2.AvailableMemory();
Output:

CONSTRUCTOR PATTERN

In this, we do not return the instance from the function, instead, we use the new operator along with the function name.
The constructor for the last example will be created like this.
var computer = function(ram, hardDisk) {
  //Create class properties
  this.ram = ram;
  this.hardDisk = hardDisk;  //Create class methods
  this.AvailableMemory = function() {
    console.log('Hard-disk : ' + this.hardDisk);
    console.log('Ram : ' + this.ram);
  };
};
Note that, we are not returning the object from the computer constructor.
//Creating new object(s) for computer class by using constructor pattern
var computer1 = new computer(4,512);
var computer2 = new computer(16,1024);//Accessing object's properties
computer1.AvailableMemory();
computer2.AvailableMemory();
Output:

PROTOTYPE PATTERN

In JS, almost every object has some prototype space that contains properties related to the object.
You can read more about prototype in the MDN Web Docs.
In prototype pattern, we create a blank object and assign properties (and functions also) to its prototype with some default values and then we create a blank object and assign the actual values for the properties.
This pattern can be represented as:
var computer = function() {};computer.prototype.ram = NaN;
computer.prototype.hardDisk = NaN;
computer.prototype.AvailableMemory = function() {
  console.log('Hard-disk : ' + this.hardDisk);
  console.log('Ram : ' + this.ram);
};//Creating new object(s) for computer class
// by using Prototype Patternvar computer1 = new computer(); 
//Empty object created with default valuescomputer1.ram = 4; //Assigning the actual value for object property
computer1.hardDisk = 512;var computer2 = new computer();
computer2.ram = 16;
computer2.hardDisk = 1024;//Accessing class methods using objects
computer1.AvailableMemory();
computer2.AvailableMemory();
Output:

Now consider if we create a new object of the computer with default values.
var computer1 = new computer(); 
//Created object with default valuesconsole.log('ram' in computer1); //returns true
console.log(computer1.hasOwnProperty('ram')); //returns false
This is because the in operator searches for the property first in the object's root and then the search continues in the prototype of the object whereas hasOwnProperty restricts its search to the root elements of the object in which the property is being searched.

DYNAMIC PROTOTYPE PATTERN

Dynamic prototype pattern is a hybrid of constructor pattern and prototype pattern.
In this pattern, we reference the properties using this operator and we create the member functions in the prototype space of the object if the member function does not exist.
var computerDynamicProto = function(ram, hardDisk) {
  this.ram = ram;
  this.hardDisk = hardDisk;  if (typeof this.AvailableMemory !== 'function') {
    computerDynamicProto.prototype.AvailableMemory = function() {
      console.log('\nHarddisk : ' + this.hardDisk);
      console.log('Ram : ' + this.ram);
    };
  }
};var computer1 = new computerDynamicProto(4,512);
computer1.AvailableMemory();
Output:

You Might Also Like

0 comments

Follow by Email