JavaScript: Object Oriented Programming (OOP)

Before we get into Object Oriented Programming or OOP, let’s tackle what an object is, first. Think of objects in JavaScript as an object in real life. Take for example, your phone. Your phone has properties such as color, weight, and so on. Objects in JavaScript or other programming languages are the same as well. They both have properties which make up what they are.

const phone = new Object()
phone.color = ‘Grey’
phone.weight = “3 pounds”
phone.brand = ‘Apple’
console.log(phone)

If you console.log phone, you’ll get the properties listed. If you wanted to list a specific property, just type phone.(specific property). For example, console.log(phone.color) would return Grey. You could also type in console.log(phone[‘specific Property’]) or in this case, console.log(phone[‘color’]) for the same result.

Let’s talk about some other ways you could create an object in this case. You could create an object in this manner as well.

const phone = {
 color: “Grey”,
 weight: “3 pounds”,
 brand: “Apple”
}

If you wanted to create a new object, you could just create a new variable name with the same properties. For example:

const phone2 = {
 color: “Rose Gold”,
 weight: “2 pounds”,
 brand: “Apple”
}

Now let’s discuss OOP. In its simplest definition, it’s a programming paradigm focused on objects rather than functions as the name suggests. It may help you to think of OOP as a way to creating and using a blueprint to create objects. At least, that’s how I think of it. You may be asking yourself what’s the point of OOP or why should you consider using it. Well, there are several reasons! OOP can lead to one’s code to being more modular. In OOP, we have something called a class and in a class, we can build methods designed to interact with objects. Look below for a basic example.

class Phone {
 constructor(color, weight, brand) {
  this.color = color;
  this.weight = weight;
  this.brand = brand;
 }
 
 phoneColor() {
  return `The phone is ${this.color}`
 }
 
 phoneWeight() {
  return `The phone is ${this.weight}`
 }
 phoneBrand() {
  return `The phone’s brand is ${this.brand}`
 }
}
const phone1 = new Phone(‘grey’, ‘3 pounds’, ‘Apple’)
console.log(phone1.phoneColor())
console.log(phone1.phoneWeight())
console.log(phone1.phoneBrand())

Now look at the last two lines and try running this code.

Let’s now look at the four pillars of OOP. They are encapsulation, abstraction, inheritance, and polymorphism.

· Encapsulation

· Abstraction

· Inheritance

· Polymorphism

Encapsulation

Encapsulation refers to the bundle of data and methods onto one unit. This allows for reusability for functions more securely. For example look at the code above. The properties are only visible to the scope of the class and the functions phoneColor, phoneWeight, phoneBrand, are visible to whoever calls the function.

Abstraction

Abstraction allows us to create a model out of something more complex. Think about your phone for example, when you go on Instagram and like or comment on a photo. There’s a lot of complexity and logic going on in the background that you’re not privy to. Another example would be a coffee machine. Say, you were using a coffee machine to make coffee. There are a lot of things going on inside the machine that you may not know is going on. You as the user, probably doesn’t care about what’s going on in the machine. You just want the coffee. Essentially, it hides unnecessary information/detail and just gives us what we need.

Inheritance

Inheritance refers to how classes can inherit methods or properties from other classes in a hierarchal structure. In OOP, there is something called a parent class and a sub class or child class. The sub class or child class inherits from the parent class. Another way we can describe this is saying the sub class extends to the parent class.

Polymorphism

Polymorphism means many forms. In terms of programming, it specifically refers how sub classes inherit all of the properties from a parent class but can also have their own specific properties. For example, let’s think about a teacher and the students inside a classroom. They have many characteristics in common, such as name, age, and so on. However, students may have their own characteristics that a teacher doesn’t, such as grade.

Conclusion

In summation, OOP is a programming paradigm focused around objects. OOP isn’t specific to JavaScript but this is an example of its design in JavaScript. The best analogy or way to think of OOP, is that it’s essentially a blueprint for creating objects. It can help to make our code more DRY (Don’t Repeat Yourself) through the reusability in the code. Don’t worry if you didn’t understand this concept the first time around. I certainly didn’t. I posted a link down below for more information.

Object-oriented JavaScript for beginners