An Introduction to Object-Oriented Programming in JavaScript
The Beastie Boys and Object-Oriented Programming
I was so inspired by Spike Jonze’s live Documentary “Beastie Boys Story” that I wanted to find a way to feature them in my programming blog. After I spent some time thinking about a topic that might combine the two, I came up with the idea to write an article about OOP (Object Oriented Programming) and the Beastie Boys. In this article, we will look at OOP and using JavaScript, and how OOP relates to real-world examples (mine being the Beastie Boys). We will also build a (very) barebones web app to demonstrate these concepts.
Now, let’s get into it — or, as the Beastie Boys say, “kick it!”
Objects and Classes
As mentioned above, OOP can be conceived of in the context of real-life examples. In this case, we want to use the Beastie Boys. Essentially, there are many characteristics that could be used to define members of the Beastie Boys; these are things that all members have in common (including their band name, clothing, vocals, and so on).
Alongside these features, there are also actions that define them. They all like to party, drink beer, and dance. The process of translating and representing some of these characteristics into the context of OOP is known as abstraction. All of the features above, including the actions, can be defined as their properties:
Name[realName, emceeName]
Clothing
Vocals
Drink{ "[emceeName] goes glug glug..." }
Now we’ve got four properties (Name, Clothing, Vocals, and Drink). The “Name” property holds another two properties (realName and emceeName). The others could possess singular or multiple data.
The only actions-based property is Drink
which is a type of property that performs a function. Rather than holding key-pair data like the others, it performs a function.
A property that performs a function is known as a method:
mca.drink() // "MCA goes glug glug..."
adRock.drink() // "Ad Rock goes glug glug..."
All of the properties belong to a class with the name BeastieBoy
:
class BeastieBoy
Name[realName, emceeName]
Clothing
Vocals
Drink{ "[emceeName] goes glug glug..." }
A class is like a simple template to group our data together. It is used to create objects for the program. When we create objects using our class by providing specific values, this is known as instantiation:
Object: beastieBoyMca
Name[Adam Yauch, MCA]
Clothing: Leather jacket
Vocals: bass
Drink{ "[emceeName] goes glug glug..." }
A Concept for a Program
Let’s take a further look at OOP by building a small web app with the purpose of showing how each member of the Beastie Boys likes to party. Here are the steps we need to take:
- Create a form to select each of the members of the Beastie Boys
- Dynamically change the heading based on the form’s input
- Update the text using a button
Here’s a GIF showing the app in action:
We are going to implement the functionality by using an OOP approach. The complete code example for this is available here.
Creating the Class
We’ll use declaration to create a class with the name BeastieBoy
in our JavaScript file:
class BeastieBoy { } // declare the Beastie Boy Class
We’ll then use a constructor method which will help initialize the objects in the program.
class BeastieBoy {
constructor(real, emcee, style, party)
}
We’ll add our properties inside the constructor. The property names should describe their purpose: real
is their real name, emcee
is their emcee name, style
is clothes and party
is a line for how they like to party.
We’ll also create a partyTime
method which will be used to replace the HTML of the element with the ID of headline
and the value of the party
property.
Instantiating the Objects
Next in our code, we’ll instantiate our objects by assigning values for each of the properties in the constructor.
Now that we’ve initiated our objects, we can access these properties using dot notation syntax:
mca.name // Object { real: "Adam Yauch", emcee: "MCA" }mca.name.emcee // "Adam Yauch"mikeD.name // Object { real: "Michael Diamond", emcee: "Mike D" }mikeD.name.emcee // "Mike D"adRock.name // Object { real: "Adam Horovitz", emcee: "Ad Rock" }adRock.name.emcee // "Ad Rock"
How to Party
Each of the Beastie Boys holds different strings for the party
property because just as much as they party together, they also like to celebrate in their own unique way:
Let’s demonstrate this by finishing the rest of the app. In the app’s index HTML file, we’ll create a select element with the ID of beastie-boys
and the name select-beastie-boy
. Within select, we’ll add option elements with values for each of our objects.
We’ll also add a button with an ID of party
and a heading element with an ID of headline
which we’ll use to dynamically change the content of using our script.
Back in our JS, underneath the code for initiating our objects, we’ll add an event listener for changes to the select element, and assign the value to the selected
variable.
Finally, we’ll create an “on click” function for the button, and use a switch statement to call our method on the selected object.
Here’s an example of the final app in action:
Conclusion
OOP can be quite hard to initially understand so looking at real-life, entertaining examples can be fun and lend clarity. From our Beastie Boys example, you’ve learned how we can compare objects in real life to those in programming. You’ve also seen how the syntax of OOP using JS can be extended to other projects.
Thank you for reading and please let me know in the comments if you enjoyed this article or if you have any suggestions for future posts.