JavaScript Instantiation Patterns
Published: 2020-06-29 13:36:30

Instantiation patterns in JavaScript provide a way to create instances of objects.  These objects are further defined by their properties and methods. 

So what is the difference between modeling an "object" with an instantiation pattern and JavaScript's native `Object` data type?  The `Object` data type provides a very simple way to create an object.  However, it is best for a single instance of an object.  If multiple instances of the object were created with the built-in `Object`, there would be multiple copies of the same code for each instance.  That is were instantiation patterns are more efficient:  they provide reusable code for the object's implementation.

The four major instantiation patterns are:
* Functional
* Functional Shared
* Prototypal
* Pseudoclassical

#Functional 
The Functional pattern creates an object using JavaScript's `Object` data type, but the `Object` is encapsulated in a function.  

First, the function is created.  Inside the function, a variable is declared and assigned an empty object literal.  Then, the object properties and methods are added to the function.  The variable is returned just before the end of the function.

The person object below is implemented using Functional: 

```javascript
const Person = function(first, last, dob) {
  const person = {};

  person.firstName = name;
  person.lastName = last;
  person.birthDate = new Date(dob);

  person.calculateAge = function () {
    return person.birthDate.getFullYear() - newDate().getFullYear();
  };

  return person;
};

let peep = Person('John', 'Do', '12/31/1999');
```


#Functional Shared
The Functional Shared instantiation is similar to the Functional pattern, except the Functional Shared includes shareable properties and methods.

Just like the Functional instantiation, it starts with an function containing an empty object and it's properties.  The methods are defined outside of the function in an object.  The `extend` keyword is used to declare that the methods belong to the object.  The `extend` statement is placed inside of the function before returning the object.

The person object below is implemented using Functional Shared:

```javascript
const Person = function(first, last, dob) {
  const person = {};

  person.firstName = name;
  person.lastName = last;
  person.birthDate = new Date(dob);

  extend(person, personMethods);

  return person;
};

const personMethods = {
  calculateAge:  function () {
    return this.birthDate.getFullYear() - newDate().getFullYear();
  };
};

let peep = Person('John', 'Do', '12/31/1999');
```

#Prototypal
The Prototypal pattern is similar to the implementation of JavaScript native data types, since they inherit properties and methods.  This is known as prototypical inheritance.

Unlike Functional and Functional Shared, the Prototypal pattern does not use the empty object literal inside of the function declaration.  Instead, it uses the Object.create method to create the object and to relate it to the methods declared outside of the function's scope.  The Prototypal instantiation declares the methods in another object similar to Functional Shared.

The person object below is implemented using Prototypal:

```javascript
const Person = function(first, last, dob) {
  const person = Object.create(person.Prototype);

  person.firstName = name;
  person.lastName = last;
  person.birthDate = new Date(dob);

  return person;
};

Person.prototype.calculateAge = function() {
    return this.birthDate.getFullYear() - newDate().getFullYear();
  };
};

let peep = Person('John', 'Do', '12/31/1999');
```

#Pseudoclassical
The Pseudoclassical pattern is similar to the implementation of objects in an object-oriented language.  This is accomplished with the introduction of the `new` keyword.  A function called with the `new` keyword is called a constructor function.

Like Prototypal, Pseudoclassical uses the prototype chain.  Instead of using the Object.create(), Pseudoclassical instantiation uses the `this` keyword to refer to the object, so all properties are prefixed with the word `this` followed by a period.  Each object method has it's own function declaration.  The object's method is prefixed with the object name followed by a period the word `prototype` and another period.

The person object below is implemented using Pseudoclassical:

```javascript
const Person = function(first, last, dob) {
  this.firstName = name;
  this.lastName = last;
  this.birthDate = new Date(dob);
}

Person.prototype.calculateAge = function() {
    return this.birthDate.getFullYear() - newDate().getFullYear();
}

let peep = new Person('John', 'Do', '12/31/1999');
```

The basic structure of each pattern has been presented using the same person object.  The similarities between each instantiation are not coincidental.  They try to solve a problem or short-coming of the prior.  As a result, each pattern has it's pros and cons, but that is a topic for another time.