Instantiation Patterns: Evolution

What are Instantiation Patterns?

At the beginning when I was first learning about Instantiation Patters, I was very confused. After hours of reading about them, I came to the realization that all Instantiation Patterns do the same thing, they create objects with methods and properties in different ways. There are 5 different patterns:

• Functional
• Functional Shared
• Prototypal
• Pseudoclassical
• ES6 Pseudoclassical

Instantiation Patterns have been changing over the years and the main reason is to decrease the amount of memory they take and to answer a simple question, How can we make it simple?

Functional

Functional takes the most memory because the function has an object with properties and inside the same function it has an object with all of the methods as well. When it comes time to create a new object it will create an object with all properties and methods inside.

Here I have an example :

// Functional instantiation
const Order = function(table, entree){

// object 
  const customer = {};

// properties inside the customer object
  customer.table = table;
  customer.entree = entree;
  customer.sent = false;

// methods are inside 
customer.sendOrder = function(){
this.sent = true; 
console.log(`table ${this.table} has been sent to the kitchen`);
}

return customer;
}

// creates a customer object 
const customer1 = Order(31, 'Eggplant Parmesan');

// uses the method sendOrder and it changes the property sent to true 
customer1.sendOrder() 

console.log(customer1);
/* table 31 has been sent to the kitchen
{
  table: 31,
  entree: 'Eggplant Parmesan',
  sent: true,
  sendOrder: [Function]
}
/*

Functional Shared

In functional Shared instead of putting the methods inside the function we use "extend" which takes two parameters, an object and the methods object.
Every object references to a share object that has all the functionality and that is the reason why we can put the methods object outside. "Extend" gives access and reference to every method in our methods object.

Example:

// Functional Shared pattern
const Order = function(table, entree){

// extend function
  const extend = function(obj, methods){
    for(let key in methods){
      obj[key] = methods[key];
    }
  }
    const customer = {};

    customer.table = table;
    customer.entree = entree;
    customer.sent = false;

// gives our customer obj access to customerMethods
    extend(customer, costumerMethods);

    return costumer;
  }

  const customerMethods = {
    sendOrder: function(){
    this.sent = true; 
    console.log(`table ${this.table} has been sent to the kitchen`);
  }
  }

  const customer2 = Order(64, 'Shrimp Diablo');

  customer2.sendOrder()
console.log(customer2);

Prototypal

At this point we found a better Instantiation Pattern. We can use object.create which returns a blank object but every time somebody want to access something in it, it knows to first check on itself and if it doesn't have it, finds it in the other object. By creating a methods object and using Object.create, we are creating a prototype chain between the object and the methods object.

For example :

// Prototypal pattern 
const Order = function(table, entree){

/* make a chain with costumerMethods with Object.create */
  const customer = Object.create(customerMethods)
  customer.table = table;
  customer.entree = entree;
  customer.sent = false;

  return customer;
}

// methods
const customerMethods = {

sendOrder: function(){
this.sent = true; 
console.log(`table ${this.table} has been sent to the kitchen`);
}
}

// creates a new Order
const customer3 = Order(55, 'Lasagna');

// changes sent from false to true
customer3.sendOrder() 

console.log(customer3);
/*table 55 has been sent to the kitchen
{ table: 55, entree: 'Lasagna', sent: true } */

Pseudoclassical

At Prototypal we finally got to a point were we use the least amount of memory possible but there is still one thing we can do, syntactic sugar. Syntactic Sugar is a syntax in a programming language designed to make things easier to read and write and that's what they did in Pseudoclassical. In Prototypal you needed Object.create to chain the object to the methods object. In Pseudoclassical, the creators of Javascript added a property called .prototype that was created to hold functionality and methods. Instead of storing the methods in a methods object we created, we can store it in the function's prototype property. To create a new object we need the help of the keyword new.

For example:

// Pseudoclassical pattern
const Order = function(table, entree){

  this.table = `table ${table}`;
  this.entree = entree;
  this.sent = false;
}

// access the property prototype
Order.prototype.sendOrder = function(){
this.sent = true; 
console.log(`table ${this.table} has been sent to the kitchen`);
}

//creates a new customer object with the keyword new
const customer4 = new Order (22, 'Meatballs Marinara');

customer4.sendOrder()
console.log(customer4);

ES6 Pseudoclassical

ES6 Pseudoclassical has become one of the most used patterns in modern Javascript. It is a class which has a whole new different syntax and inside the class we need a constructor function. To create a new object we need the help of the keyword new just like in Pseudoclassical. Instead of assigning your methods to the prototype, we add them directly to the class and we assign the properties inside of the construction function.

For example:

// class 
class Order {

constructor(table, entree){

// properties are inside your constructor function 
  this.table = table;
  this.entree = entree;
  this.sent = false;
}

sendOrder(){
this.sent = true; 
console.log(`table ${this.table} has been sent to the kitchen`);
}
}

// creates a new object with the keyword new 
const customer5 = new Order(13, 'chicken Alfredo');

// changes sent from false to true
customer5.sendOrder()
console.log(customer5);
/*  table 13 has been sent to the kitchen
Order {table: 13, entree: 'chicken Alfredo', sent: true} */

Conclusion

It has been extremely interesting to see how the Instantiation Patterns have changed over the years. We have come a long way from functional pattern to ES6 pseudoclassical pattern which is easy and simple. I can't wait to see what's next.

I hope you enjoyed this article!