JavaScript: A Quick Reference to Object Instantiation Patterns For New Developers
In Object Oriented Programming (OOP), there are different patterns to instantiate (which means to ‘create a new instance of’) objects. I like to think of it as a factory or system that is creating objects and these objects have data stored and functions available to them. There isn’t a correct instantiation pattern to implement for all scenarios. Each pattern of instantiation has its own benefits and disadvantages which will allow you to determine which pattern would result in a better solution. The JS instantiation patterns are:
- Functional
- Functional Shared
- Prototypal
- Pseudoclassical
- ES6 Class
A popular convention in JavaScript is for the first letter of a constructor to be capitalized.
Functional
A constructor function creates an object, adds properties and methods to the object and returns the newly created object.
Benefits: Simple to write. Easy to understand and follow.
Disadvantages: If there is large number (let’s say 1 million) objects to be created. Each object will have redundant function definitions. Memory inefficiency.
How can we have these instances not duplicate methods or properties?
Functional Shared
Instances can share methods and properties by using a separate object storing properties and methods. _.extend extends the constructor object with the shared methods to avoid duplication. The this keyword is used to refer to the created object.
Benefits: Improves memory efficiency. Removes duplication of function definitions, DRY.
Disadvantages: Vulnerable to errors. If a shared method is modified after an instance is created, a new instance versus the old instance will have different shared methods.
How can we avoid reference to different methods?
Prototypal
Object.create() method creates a new object and inherits the passed in object argument though prototypical chain. If a method is not found in the object, it will delegate up the prototypical chain until the target method is found.
Benefits: Improve memory efficiency. Removes duplication of function definitions, DRY. Reduces risk to errors.
Disadvantages: This is more of an inconvenience than a disadvantage, each constructor function will have a line for creating an object and returning it.
How can we clean this up and secretly hide those 2 lines of code (line 2 and 5 in the example above) so we don’t have to keep typing it?
Pseudoclassical
When using the new keyword while creating an instance, an object with prototype inheritance will be created and returned. I guess this is what’s called syntactical sugar!
Benefits: Syntactically sweeter. If you delete all those comments out above, look at how concise and ‘sweet’ it is.
Disadvantages: If the new keyword is missing or forgotten, this could result in bugs! Might be confusing to understand what’s happening under the hood.
How about another syntactically ‘sweet’ version?
ES6 Class
The new keyword must be used here as well. Plus, there are other keywords like class and constructor. Notice the keyword function is not used, functions are defined with their label, parenthesis and curly braces. Just more syntactical sugar for creating objects with prototypical inheritance.
Benefits: Syntactically sweet. The latest way to instantiate.
Disadvantages: Obscure your understanding of what is happening. Technically, JavaScript doesn’t have ‘classes’ in other languages class-based OOP. JavaScript uses the prototype chain to mimic classes.
This is Week 2 of Hack Reactor and I have 34 more weeks to go. Guess there is a lot more to learn!
