Understanding Object Oriented Programming in JavaScript
By: Patrick Pierre
Tags: Javascript Tips, JavaScript, Web Development, Programming, Coding

Photo by Nubelson Fernandes on Unsplash

If you’re a new Web Developer, you’ve probably seen the words Object Oriented Programming being thrown around whenever you google stuff about Web Development. Object Oriented Programming (OOP for short) is one of the most important things you can learn in your new journey as a developer.

In this post, you’ll learn about the purpose of OOP, why you should care about it and how you can get started writing object oriented code.

By the way, just to let you know there are tons of videos and blog posts about the really advanced techniques and ideas involved in OOP so I will focus on the basic ideas just to get you started.

If you stick around to the end of the post I will be providing some resources to help you really dive into OOP after getting the basic ideas down.

So what is Object Oriented Programming?

According to developer.mozilla.org, the basic idea of OOP is that we use objects to model real world things that we want to represent inside our programs. What this basically means is that we can write our code in a way that will mimic real world things.

For example let’s say we would like to model a person inside of our code.

class Person{

constructor(name, profession){

this._name = name;

this._profession = profession;

} } const newPerson = new Person("John Smith", "software consultant");

Above we have created code to represent a person. In our code, the word class is a reserved word in JavaScript that allows you to create a “blueprint” to represent a real world object. Since this is a blueprint we can use the new reserved word in JavaScript to actually create an object based on the blueprint from the class.

Also it’s important to note here that this is called Object Oriented Programming so all the code you end up producing in this style of programming is going to result in the creation of objects.

These objects you create are going to be based on the blueprint defined inside of your class.

If we log the result of the code from earlier in the console

const newPerson = new Person("John Smith", "software consultant"); console.log(newPerson) //=> the result of this statement will look like what's in the comment below //Person {_name: "John Smith", _profession: "software consultant"}

As you can see the console will show us that our newperson is an instance of the Person class, and he has a name and a profession just like we declared in our class. The word instance, just refers to something created using a specific class.

So when I said newPerson is an instance of the Person class, I meant that newPerson is just a new object that we made using the blueprint provided to us from the Person class.

The Purpose of the constructor and new reserved words

In our class above you may have noticed the use of a function called constructor() and a reserved word called new . This function and reserved word are two of the most important things we need to help us to start working with OOP in our code.

The constructor() function is a function that allows you to create a class with pre-defined values inside it. The constructor function is just like a basic javascript function so you can define it with parameters.

Just as a quick reminder to you, parameters are something you use when you are defining a new function. Parameters serve as a placeholder for the real data that will later be passed into the function when it is being used.

The constructor() function is being used whenever we use the new reserved word to create a new instance of any kind of class we define.

Let’s take a closer look at our constructor() function so I can better make this point.

//this is the constructor function used above in our Person class

constructor(name, profession){

this._name = name;

this._profession = profession;

}

This constructor has two parameters, name and profession. These two parameters are used as place holders for someone’s actual name and profession inside our code.

All our constructor is doing is taking the actual values that are passed into the statement used to create a new instance of the class.

//the strings "John Smith" and "software consultant" are the actual //values that we are passing into our new class instance const newPerson = new Person("John Smith", "software consultant");

Why are you using this in the constructor?

this is probably the most complex part to consider when getting into OOP. Explaining in detail what using the this reserved word entails would need its own post but I’ll explain quickly explain its use in the our Person class.

this is used as a way of telling the constructor function to refer to the object being made using the class. So this._name in the constructor is referring to the current instance of the Person class. So when our newPerson variable stores the value of the new instance of our class, we could technically call newPerson._name to get the name that we provided as an argument to the constructor() function.

When the reserved word this is used in this way, we can store the value of something as if it’s a variable. This is actually how we can create instance variables in JavaScript. Instance variables are variables that are unique to a specific instance of a class. We can refer to the instance variable in the same way that we can refer to object properties!

Now let’s go back and flesh out our Person class out to give it some more functionality.

class Person{

constructor(name, profession){

this._name = name;

this._profession = profession;

} dailyRoutine = () => {

return `${this._name} wakes up, brushes his teeth and gets ready to have a great day`;

} }

const newPerson = new Person("John Smith", "software consultant");

newPerson.dailyRoutine() //this will return: "John Smith wakes up, brushes his teeth and gets ready to have a great day"

In the above example we created a method called dailyRoutine() and had it use one of our instance variables to output a value.

This might seem like a really basic example but you’ve already witnessed the power of OOP. OOP allows us to encapsulate multiple variables and methods within our class definition and every instance we make will have access to all of that functionality.

So we can use OOP to clean up our code and group functions together based on the class they are in.

If we had to use a functional approach to do the same thing we would have to do the following.

const name = "John Smith";

const profession = "Software Consultant" function dailyRoutine(name){

return `${name} wakes up, brushes his teeth and gets ready to have a great day`;

} dailyRoutine(name) //this will return: "John Smith wakes up, brushes his teeth and gets ready to have a great day"

We managed to get the same return value using functional programming instead of object oriented programming but there is a problem with using this approach.

The only problem to taking this kind of approach is that as our program gets bigger and we have to write more code, our codebase will get messier overtime. The same thing can happen even if we use OOP but it is generally easier to keep track of new methods we create when they are all bundled in the same place.

If our code grows and we are using the functional approach, we will have to constantly keep track of what function does what and what they’re parameters are supposed to represent in terms of its functionality.

So there we go, now you too can write Object Oriented Code. So I challenge you to use object oriented code in your next vanilla JavaScript project. As you learn more programming, I think you’ll like OOP a lot.

By the way here are those extra resources I promised:

https://www.youtube.com/watch?v=4l3bTDlT6ZI&list=PL4cUxeGkcC9i5yvDkJgt60vNVWffpblB7