OOP Javascript

Object Oriented Programming (referred to as “OOP” from now on)when it comes to Javascript can make a lot of sense. Ruby is a language that at it’s roots was designed to me an extension of the ‘real world’ and conventional conversational languages. Although in my personal opinion, Javascript isn’t quite as pretty and flowing as Ruby, the idea of modeling things like the ‘real world’ can still make a lot of sense. When we utilize OOP concepts one of the most basic examples that gets a lot of attention is that of a person or pet. Whether we are talking about an individual person or pet in OOP, the ideas remain the same. We are essentially looking to package or encapsulate data inside of that specific instance. In the person or pet example, some of the basic info or data that we could want to store are things like name, age, gender, favorite foods…ect.

To get started let’s say that we are looking to make some OOP instances of our favorite pets, the first thing that we need to do is write a function that lets us create a new instance of each individual pet.

Let’s go through the code above line by line

Line 1: This is where we declare our constructor, we are making a constructor function that takes in a variety of variables that we want to store with each instance of a new pet that we create.

Lines 2–5: We are setting the .name information that we want to store with the pet object that we are creating. Although we aren’t really using the last name information in this example we are taking in to be recalled later just incase.

Lines 6–9: We are setting the info that we want to be stored based on the the parameters that we are going to pass the function later on. In this case these are all individual parameters that are only one level deep.

Lines 10–12: Here we are creating an anonymous function ‘.bio’ that when chained to our specific pet object will output the information that we have stored about it in a cute little sentence. Note that since the we just want the first name to be output we have to call it as ‘this.name.first’ this will give us just the first name that we have stored.

Line 15: On this line we are creating a new object named ‘tonka’ we are setting this to be a new instance run through our constructor ‘Pet’ that we created along with all of the information that we want the ‘tonka’ object to store.

Line 16: We are doing the same thing as in line 15 but here we are creating a ‘yeti’ object and sending all of the information that coincides with that object through the constructor.

Lines 18–19: We are calling ‘.bio’ on the two containers that we made and invoking it. Since ‘.bio’ is an anonymous function, we invoke it here to let it run its program. As we can see in our console on the right, the two separate bio’s were run for our two independent pets that we created.

As just an introduction to OOP this can seem a bit overkill. In our example we aren’t storing much data an we are only creating two individual objects. Imagine this concept scaled up though and you can quickly see how this would be and efficient way to store and recall data. Think about this concept in relation to filling out forms on various webpages. Imagine what your specific OOP container could look like in things like the Facebook, Google, various other databases.