Simple Comparison of Class Instantiation Styles in JavaScript

Simple Comparison of Class Instantiation Styles in JavaScript

This post focuses on the differences between the class instantiation styles in JavaScript. Here we’ll see how each description contrasts from the one above.

We’ll look at the 4 instantiation styles: functional, functional shared, prototypal, and pseudoclassical.

1.  Functional

In the functional instantiation style, we create a constructor function with one object inside and assign properties and methods to it. The constructor function returns the object. Everything is inside the constructor function.

Each time we create a new instance in functional style, we are creating a new object with all the properties and methods. If there is a lot of data or code in the properties and methods, each instance has the potential to take up a lot of memory.

The advantage to functional is that it is easy to read and understand quickly.

Example of Functional Instantiation
This is an example of functional instantiation. Tea is our constructor function, and myTea is an instance of Tea.

2. Functional Shared

In the functional shared instantiation style, we create a constructor function with one object inside and assign properties to it. The constructor function returns the object.

What about methods? We create a separate object outside the function and assign properties to it that are methods.

In order for instances (or the objects we create via the constructor function) to have access to those methods, we use an extend function. The extend function copies properties from one object to another. (Remember that if the properties are complex types such as functions, the property does not make a new copy in memory, but it references the original). We can either write our own extend function or use a library’s such as Underscore.

Functional shared takes less memory than plain functional instantiation.  With extend in functional shared instantiation, the instance copies properties but only references the methods (each instance does not have all the code of the methods).

Example of Functional Shared Instantiation
This is an example of functional shared instantiation. Tea is our constructor function, and myTea is an instance of Tea. We reference methods from teaMethods.

 

3. Prototypal

In prototypal instantiation style, we create a constructor function with one object inside and assign properties to it. The constructor function returns the object.

What about methods? We can even use the function’s built-in prototype property and simply assign properties to it that are methods.

In order for the object to have access to those functions, we use Object.create(). To use Object.create(), we pass in the object we want failed look ups to go to. This creates a prototype chain. This way if our instance does not have the method, the interpreter would look follow the prototype chain and fall back on the separate object (or prototype)’s methods.

Prototypal style saves more memory than functional shared because each instance does not copy all of the prototype’s properties nor reference the prototype’s methods. Instead when the interpreter runs into a failed look up, it will go up the prototype chain. It will look at the prototype’s methods. There is no copying with prototype chains.

Example of Prototypal Instantiation
This is an example of prototypal instantiation. Tea is our constructor function, and myTea is an instance of Tea. Any failed look ups on myTea will go up the prototype chain and use the Tea.prototype methods.

4. Pseudoclassical

In pseudoclassical style, we create a constructor function.

In this function, there are some behind the scenes lines of code that the interpreter runs that we do not have to explicitly write.  At the very beginning of the class constructor function,  it runs something like this = Object.create(ClassNameHere.prototype). The interpreter creates an object and passes in the respective prototype property.

Inside the function, we assign properties. At the very end of the constructor function, we do not need to write a return statement because the interpreter runs another behind the scenes line of code that returns the object for us.

Outside of the function, we can assign the class’ prototype methods.

This is all possible when we instantiate with the keyword ‘new.’  It is the ‘new’ keyword that has the interpreter run the behind the scenes lines of code. If we instantiate without the keyword ‘new’ and wrote our constructor in pseudoclassical style, we are going to get bugs.

Example of Pseudoclassical Instantiation
This is an example of pseudoclassical instantiation. Tea is our constructor function, and myTea is an instance of Tea. Any failed look ups on myTea will go up the prototype chain and use the Tea.prototype methods just like prototypal style.

 

So we’ve taken a look at functional, functional shared, prototypal and pseudoclassical instantiation styles in JavaScript. When creating classes, we have to keep in mind the benefits and disadvantages of each instantiation style.

Youtube and Programming

Digging deeper into my precourse work for the coding bootcamp I plan to attend, I have found myself researching for more information and new tools.

One of those new tools is Youtube.

It’s surprising yet refreshing because I don’t use Youtube.

I usually feel like a foreigner because my friends talk about how they watch Youtube and how they watched [insert name here] on Youtube. Usually what they have watched is not in one of my interests (video game strategy, make up/hair tutorials, singer, actor, music videos, etc).

It is dawning on me how useful Youtube can be for me with programming.  I am now subscribed to a couple of programming tutorial channels! I have reviewed the same subjects (I’m looking at you .reduce()) by different channels to gain a better understanding. I like hearing others explain one concept in different ways.

Now I want to see what else is out there for me! What amazing tool have you discovered? In what ways has Youtube brought a positive effect for you? What programming channels do you recommend?

Alexa Skills Workshop

Yesterday I attended an Alexa Skills Workshop hosted by Coding Dojo! The goal was to create an Alexa Skill for the Amazon echo family of devices.

We used one of Amazon’s templates on GitHub to create a skill for Alexa.  The greatest advantage of using a template was that no one had to be an expert in Javascript. Since it was already built, we could get through the whole process of creating a skill.

At the end of the workshop, I was able to submit my skill in for certification.

Today I got the news that my skill was certified and being uploaded to the Alexa Skills Store! It’s my first publication! How exciting!

The second great outcome of this workshop was that I am excited to create more Alexa Skills! Let’s see what the world of voice user interface will become!

The third outcome of this workshop is that I can’t wait to attend more Hackathons and workshops! This was incredibly motivational! (Though this will have to wait til after I’m done with my coding bootcamp).

Thank you again Coding Dojo for hosting this Hackathon!

Framing My Circumstance

I lost time to do my homework because I got food poisoning. I could get graphic, but in short, it was awful. I lost 3 days. I attempted to work on the 3rd, but it made me sicker, not better.

I was behind schedule. Being behind is disheartening, and it was overwhelming to think I am behind that I do not have the time I had.

Although I wish I could, I can’t reverse the food poisoning.

I can, on the other hand, change my timeline including dates I plan to finish assignments. I updated the dates to work with where I am at and to get to the same destination.

Today I successfully carried on, and I am on track with my revised schedule. I have made progress, and I feel good about it.

Time Management

My homework with due dates just came out for the bootcamp I plan to attend this summer.

I needed to figure out when I could complete tasks and projects. For example, when will I be done with the bootcamp? How can I keep myself on track for completing the homework on time? Am I on track with the homework’s due dates?

I have made a Google Sheet for this, but it only can do so much.

To manage my time and tasks, I made a task list with subtasks in Teamwork Projects. This way you can view it on a calendar, Gantt chart, task list, etc. You can mark tasks done. You can mark tasks half way complete. It’s a stronger tool than an Excel or Google Sheet file.

This task list with due dates has given me an overview of what and when I need to accomplish items.

You can also log the time it took to complete a task. I have not yet used this, but I plan to!

I plan to optimize my time and tasks with the Teamwork Project software. I can’t wait to learn more features! And when I work in groups, I think it will be a lot more useful!