Instantiation Patterns in JavaScript
The four functional styles of constructor functions
At Soulmates.AI, we believe in @addyosmani’s maxim, “first do it, then do it right, then do it better.” Start simple, work smart, and build on your base. Here on our Medium, we’ll dive into some of the knowledge we’ve gained building our suite of apps powered by our Earned Media Value Index API, as well as the basics we often take for granted.
In our first outing, here’s a primer on constructor functions and the four main JavaScript instantiation patterns.
TL;DR
A constructor function is way to create objects with similar properties and methods, quickly and efficiently. There are four main functional styles, also known as instantiation patterns: functional, functional-shared, prototypal, and pseudoclassical. Whichever style you choose is a matter of preference, and purpose.
What is a constructor function?
Building data-driven sites can involve dealing with a lot of…well…data. In JavaScript, every non-scalar variable is an object, so constructor functions are extremely useful when we’re working with large sets of data. Before we dive deeper into style, let’s look at a real-world example of why this is so handy.
And let’s do it with tacos.
Say I’m Roy Choi, the crazy talented Angeleno chef and restauranteur who inspired Chef and masterminded Korean BBQ tacos.
Every time I, Roy Choi, open a new restaurant, each location needs an address, a theme, and a chef, as well as methods or recipes to cook each dish.
A constructor function is perfect because each instance (restaurant) created by the function needs these basic attributes (address, theme, chef, methods), so we can quickly create multiple objects.
Each constructor function performs the same basic steps to help us launch all these new objects (err…restaurants):
- Generate an object
- Assign some properties
- Add some methods
- Return that object
To write a constructor function, there are four main functional styles, also known as instantiation patterns: functional, functional-shared, prototypal, and pseudoclassical.
The Four Types
Though fundamentally accomplishing the exact same thing, each with benefits and drawbacks. Let’s preview what these styles look like, then dive into a quick comparison of each:
Functional — ‘ A Simple Man’
Pro’s: clarity, good for beginners.
Con’s: Takes up space by duplicating properties and methods for every object created.
Functional Shared — ‘ The Better-Looking Older Twin of the Simple Man’
Pro’s: Clarity and ease of functional, but with a single repo for our methods.
Con’s: If you modify methods and create new objects, the original object and new method refer to different methods.
Prototypal — ‘Object.Create’
Pro’s: Uses Javascript’s prototype chain to create objects. Methods are attached using Object.create. We don’t need to duplicate methods in memory.
Con’s: To use this method, you have to create an object then return from constructor function.
Pseudoclassical — ‘That New New’
Pro’s: The most optimized method of object creation. Takes advantage of built-in Javascript goodness (assigns .prototype to this for simple property assignment and method creation; create a new instance through keyword new).
Con’s: A bit more complex to design.
Conclusion
Every style has its own pros and cons, there’s a right choice for every single case during the product development.
Which style do you prefer? What are you building using the EMV API?
Let me know in the comments. Or catch me at A-Frame.
