Blog on ALL the Things!!! (…about Week One)
Alright and Ok! So I’m now just starting my second week at Hack Reactor and my brain is already starting to resemble a bowl of mashed up Vienna sausages (I bet I can find an image of this on Google somewhere..). It’s tough, but in a good, kick-in-the-ass-that-you-didn’t-expect-but-now-you’re-a-better-person type of way.
This isn’t to say that the course load is ridiculous in any sense. In fact, you really get the sense that you’re presented with all this material at such a speedy rate because the HR staff knows you can handle it. They did, after all, put you through a thorough, rigorous interview to measure your aptitude. Also, the support is there whenever you need it via their Help Desk team, office hours with your Tech Lead, and not to mention the kick-ass members of your cohort. Seriously. This last week I pair-programmed with a guy with a music background, a mechanical engineer, and a dude with a Master’s in math. The diversity of everyone’s backgrounds introduces such a fun flavor to the whole experience as you all work towards a common goal.
A quick summary of the topics we’ve covered so far :
- The Javascript Prototype Chain
- Time Complexity and Big O notation
- Class Instantiation ( Functional, Prototypal, PseudoClassical )
- Data Structures ( Stack, Queues, Linked Lists, Hash Tables, Trees)
- Function Binding and the ‘This’ Keyword
Ok..Ok.. Enough chit chat…On the the Code!!
I’ll be covering three popular approaches to Class Instantiation in Javascript.
**Disclaimer**
For the purposes of this post, I’ll count function classes as “Classes” since they can create multiple instances of itself
Functional/Functional-Shared
No surprises here! The myClass function creates/returns a new object every time it is called, complete with a simple API.
var ExampleClass = function() { var myInstance = {};
var x = 1;
var y = 2; myInstance.sayHello = function() {
console.log('Hello!');
} myInstance.addClosures = function() {
console.log(x + y);
} return myInstance;}var oneInstance = ExampleClass(); //a new Instance is born!
oneInstance.sayHello(); //logs 'Hello!'
oneInstance.addClosures(); //logs 3
Each instance of the class, along with all of their methods, takes up a spot in memory. While not a huge deal for small side projects, this fact will come back to haunt you for larger ones.
Optionally…We can choose to share one of these methods with other functions using the Functional-Shared pattern, like so :
var ExampleClass = function() { var myInstance = {};
myInstance.x = 1;
myInstance.y = 2; myInstance.shareableMethods = shareableMethods; return myInstance;}var OtherExampleClass = function() { var myOtherInstance = {};
myOtherInstance.x = 10;
myOtherInstance.y = 20; myOtherInstance.shareableMethods = shareableMethods; return myOtherInstance;}var shareableMethods = { shareableMethods.printX = function() {
console.log(this.x);
} shareableMethods.sayHello = function() {
console.log('Hello!');
} shareableMethods.addClosures = function() {
console.log(this.x + this.y);
}}var oneInstance = ExampleClass(); //a new Instance is born!
oneInstance.addClosures(); //logs 3
oneInstance.printX(); //logs 1
oneInstance.sayHello(); //logs 'Hello!'var otherInstance = OtherExampleClass(); //a new Instance is born!
otherInstance.addClosures(); //logs 30
otherInstance.printX(); //logs 10
otherInstance.sayHello(); //logs 'Hello!'
The Good
This is a very simple approach and is generally encouraged for those beginning to learn Javascript. It’s easy to read and everything associated with the return object can be found within the function.
The Bad
As you can see, these styles, with the exception of the shared methods, are quite similar. This approach will alleviate some of the constraints put on memory by allowing you to reuse certain methods. Still, when it comes to large projects, this might be considered a quick but incomplete fix.
Prototypal
This approach requires some familiarity with Javascript’s prototype chain, a topic for a future post. You can read up on the topic on MDN. Essentially, each instance of a Class inherits references to methods from their parent.
var ExampleClass = function() { // An object with a prototypal look up ExampleClass's
prototype is created and assigned to the myInstance
variable var myInstance = Object.create(ExampleClass.prototype);
myInstance.x = 1;
myInstance.y = 2; return myInstance;}ExampleClass.prototype.addClosures = function() {
console.log(this.x + this.y);
}ExampleClass.prototype.sayHello = function() {
console.log('Hello!');
}var oneInstance = ExampleClass(); //a new Instance is born!
oneInstance.addClosures(); //logs 3
oneInstance.sayHello(); //logs 'Hello!'
The Good
Still fairly easy to read whilst adding some complexity and enhancements under the hood. Can be great for memory management since Class methods will be delegated to the parent Class instead of having to create one for each instance.
The Bad
Setting up this chain can be needless if your project won’t require heavy usage of class instantiation, and thus doesn’t require this prototypal lookup to be set up . There are some other gotchas that, to be honest, I’m not too familiar with…yet, anyway. Here’s a good read I found while researching the topic though.
Pseudoclassical
This style is a variation of the prototypal pattern intended to moe closely mimic other more OO languages. Note: While it introduces some more complexity, it is generally recommended to take time to get familiar with this style as it is a common practice.
var ExampleClass = function() {
* // this = Object.create(ExampleClass.prototype);
this.x = 1;
this.y = 2; * //return this;}ExampleClass.prototype.addClosures = function() {
console.log(this.x + this.y);
}ExampleClass.prototype.sayHello = function() {
console.log('Hello!');
}var oneInstance = new ExampleClass(); //a new Instance is born!
oneInstance.addClosures(); //logs 3
oneInstance.sayHello(); //logs 'Hello!'
!!! The lines with * represent code that Javascript will auto-magically insert into the ExampleClass. They would not actually appear in your code and was included here to give you a better understanding of what goes on behind-the-scenes…but more on that next time.
The Good
Simple, clean looking code. Makes use of prototype delegation for more efficient memory management (Always try to do this, or don’t, your funeral).
The Bad
Although I’ll be covering the key words ‘this’ and ‘new’ in a future post, many of those learning Javascript can consider it some of the more tricky concepts. This applies here as we take on complexity for more visual appeal.
Alright kids! I’m done. Thanks for hanging on until the end. Until next time!
