Object Oriented JavaScript
In the core of object oriented programming, there are three main principals to understand. These tenants are encapsulation, inheritance, and polymorphism. With these in mind, you can create multiple object constructs that take blueprints from their parent objects. These new objects can be modified to distinguish certain characteristics that separate them from their parents or siblings.
Get matthritz’s stories in your inbox
Join Medium for free to get updates from this writer.
So let’s just say you wanted to build a little digital apartment complex. Nothing fancy, just a few rooms for now. You want your apartments to each have two bedrooms, one bathroom, a kitchen a living room and some other amenities. The two rear apartments have private yards and you want to charge a little more rent for them. You could begin by making 4 apartment objects giving them some properties.
This process is tedious and repetitive. You don’t need to create four different blueprints for each of your apartments. JavaScript ES6 classes gives us that power. We can create one blueprint and use it to model all four apartments. This is the idea of encapsulation all of our shared code can be stored in one parent object and passed down to its children. With ES6 we use the class keyword to create an object that you want to use to build other objects. The constructor function hold your parameters that we want to pass to each individual apartment.
Now that you have out plan for all of your apartments you can put it into action Your blueprint can now be used to create new instances of apartments simply by calling the new keyword on our constructor and saving it to a variable. The newly created objects will inherit all of the traits passed down from the parent object, and acquire the parameters you set up in your constructor.
The apartments have been made and you have saved yourself a lot of time using one blueprint to build them. You are already looking to build some luxury penthouses. Well instead of creating a new blueprint, you can use the old one and just modify it to our liking. This is the idea of polymorphism. We can use one blueprint to make another blueprint. One object can soon take many different forms. ES6 makes this very simple using the class keyword along with other keywords extends and super. Extends will point to our blueprint object, and inserting the super() call will pass all of the blueprints plans to our new object.
Above is the Condo class taking all of the properties from the apartment class and adding a few new options that are exclusive to the Condo class that the Apartment class does not have. This is the idea of polymorphism in action. If you console log the new condo you can see it has inherited all of the apartments data with the new properties added to it.
Encapsulation, inheritance, and polymorphism. Using these three ideas makes object oriented programming a very powerful feature of JavaScript. Imagine having to copy and paste every time you wanted to make a new dot on the screen. Thanks to classes we can make the standard for one dot, and create as many instances of that dot with just one line of code. Creating classes to make other objects is easy with ES6 and it will end up saving you a lot of time and code.
