An Introduction to Object-Oriented Programming in JavaScript

The Beastie Boys and Object-Oriented Programming

Beastie Boys avatars

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:

GIF of UI for program

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:

copyright Beastie Boys

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:

Program Example

Conclusion

copyright Beastie Boys

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.