DEV Community

Cover image for Javascript Instantiation Patterns:  An Introduction
Larry Schwall
Larry Schwall

Posted on

Javascript Instantiation Patterns: An Introduction

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.

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();
Enter fullscreen mode Exit fullscreen mode

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!

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();
Enter fullscreen mode Exit fullscreen mode

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:

Object.create(); //this creates a new object
Enter fullscreen mode Exit fullscreen mode

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.

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();
Enter fullscreen mode Exit fullscreen mode

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

objectName.prototype.method
Enter fullscreen mode Exit fullscreen mode

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.

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();

Enter fullscreen mode Exit fullscreen mode

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.


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

    speak(){
        return this.name
    }

    takeIn(){
        return this.takeIn
    }
}

const jon = new Name('jon')
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)