Javascript Instantiation Patterns:  An Introduction
Tags: javascript, instantiation, beginners
Published: 2020-08-24 03:01:57

Instantiation Patterns can be found throughout Javascript. Each pattern stems from a basic template then is configured as needed. Even if you choose the same instantiation as another developer, it may be applied completely differently. 

Although individually custom, instantiation patterns aim towards the same goal: to create a function with certain properties and methods that can be called when needed.

___
### The Patterns
 - Functional Instantiation (F.I.)
 - Functional Shared Instantiation (F.S.)
 - Prototypal Instantiation (P.T.)
 - Pseudoclassical Instantiation (P.S.C.)
 - Es6 Instantiation (E.6.)

***

#### Functional Instantiation (F.I.)
This is the very beginner level of instantiation patterns. When you first begin coding, you will be using this format more than anything! 

*Functional Instantiation* offers an easy-to-implement and easy-to-decipher pattern. This pattern also allows for the methods and properties to stay local to their scope. Although, *F.I.* does have some downfalls. 

One major issue with this pattern, specifically, is ***duplication***.  This stems from having to create separate objects (even if named the same) with their own properties. Remember, as stated above, *F.I.* keeps everything locally scoped. This does not allow for other objects to call on that specific method.

Even though duplication is an issue with *Functional Instantiation*, this pattern is still very good for beginners: it allows the beginner coder to really hone the skill of creating objects with their own properties and methods.

Let's have a look below at this pattern's format.


```javascript
const name = function(firstName, lastName){
    let obj = {};
    obj.firstName = firstName;
    obj.lastName = lastName;

    obj.speak = function(){
        //insert code
    }

    obj.takeIn = function(){
        //insert code here
    }

    return obj;
}

//function calls
const jon = name('jon','doe'); 
jon.speak();
```

***

#### Functional Shared Instantiation (F.S.)
*Functional Shared Instantiation* was created in order to combat the duplication of properties and methods found in *F.I.* 

Like F.I., we start by building a function and define certain properties within that function. However, to store our methods/properties, we need to create a separate object as a whole. You can think of this second object as the container for the methods relating to the first. Every object created using this pattern will have reference to the same methods without causing a duplication! This results in better memory efficiency!

 However, much like its predecessor, there is a downfall with this pattern also. Once the object is instantiated, the relationship is made to the properties and methods; thus, if you change methods and create new objects, the two objects refer to different things. 

Let's take a look!

```javascript
const name = function(firstName, lastName){
    let obj = {};
    obj.firstName = firstName;
    obj.lastName = lastName;

    _.extend(obj, objMethods)
    return obj;
}

const objMethods = {

    speak(){
        //insert code here
    },
    takeIn(){
        //insert code here
    }
}

//function calls
const jon = name('jon','doe'); 
jon.speak();
```

***

#### Prototypal Instantiation Pattern (P.T.)

*Prototypal Instantiation*  uses the prototype chain to create objects. Methods and properties are then attached to the object's prototype by using:

```javascript
Object.create(); //this creates a new object
```

Start by creating a function. Inside of this new function, a new object for your methods needs to be created using the method shown above. This new object will be your container for all the methods.

*P.T.* does not create duplicates in memory and each method is available to all the other objects. Though this pattern is a bit more complex to achieve.

``` javascript
const name = function(firstName, lastName){
    let obj = Object.create(objMethods);
    obj.firstName = firstName;
    obj.lastName = lastName;

    _.extend(obj, objMethods)
    return obj;
}

const objMethods = {

    speak(){
        //insert code here
    },
    takeIn(){
        //insert code here
    }
}

//function calls
const jon = name('jon','doe'); 
jon.speak();
```

***

#### Pseudoclassical Instantiation Pattern (P.S.C.)

The *Pseudoclassical Instantiation pattern* is intended to correct the complexity needed to create objects as seen in *prototypal instantiation* pattern. 

The best part about *Pseudoclassical Instantiation* comes down to two ideas: the *new* constructor and the keyword *this*. With the *new* constructor, we are able to accomplish the same theory we developed in P.T. pattern. As *new* is used, it achieves the creation of an object and its return all within one line! This saves space within our files and eases the readability of our code. In regards to the *this* keyword, we can use it to refer to the new object we are creating. Which, again, saves space and makes our code more efficient in computation. 

To start, a new function is made and properties are added using the *this* keyword. Methods are then assigned to the overall object with the syntax

```javascript
objectName.prototype.method
```
In order to have our object created, we must use the *new* constructor that is assigned to a variable to call each time we need the function!

Although *pseudoclassical* instantiation is a bit complex to code (as seen below), it implements built in functionality of Javascript. This produces for one of the most optimized methods of object creation.

```javascript
const Name = function(firstName, lastName){
    this.obj = {};
    this.firsName = firstName
    this.lastName = lastName;
}

Name.prototype.speak = function(){
    //insert code here
}

Name.prototype.takeIn = function(){
    //insert code here
}

//function calls
const jon = new Name('jon','doe'); 
jon.speak();

```

*** 

#### ES6 Instantiation Pattern (E.6.)

The *ES6 instantiation* makes use of the *class* keyword. Using the *class* keyword permits for a different form of creating objects. Inside the *class*, a constructor function would be nested; therefore, the class scope is formed. 

*ES6 Instantiation* generates an simpler implementation of methods and a simpler memory management. However, this pattern does create more complexity in its syntax and may run into some issues regarding older versions of browsers/operating systems. 

```javascript

class Name{
    constructor(firstName){
        this.speak = firstName;
        this.takeIn = 'larry' 
    }

    speak(){
        return this.name
    }
    
    takeIn(){
        return this.takeIn
    }
}

const jon = new Name('jon')
```

***

#### In Conclusion

Instantiation patterns are found throughout Javascript. Using these can improve your code with legibility, efficiency, and memory management. Overall, instantiation patterns may be difficult to decipher at first, but after some practice you to can understand them fully!