Object Oriented JavaScript

The Problem

When creating dynamic web apps, JavaScript is an amazing tool which enables us to write functions that can be used to manipulate the DOM and handle client-server interactions. However, as our web apps grow in size, these functions can quickly get meshed together in a complicated web, leaving more room for bugs and code which is generally harder to read and change. It's very likely that as our web apps grow in size we will be dealing with dozens, if not hundreds of HTML elements. In turn, our DOM manipulation will quickly become messy. Luckily for us, there is a way to structure our code in a way that changes the layout from a web of free-standing functions to a structure or collection of components or cells. This way of organizing our code is known as Object Oriented Programming.

Object Oriented Programmin: An Overview:

In object oriented programming, our code is separated into containers. These containers are composed pf data, information, variables as well as behaviors we define pertaining to the information. Object oriented programming gives us structure. It establishes the relationship between our data and the functions that define the behavior. We structure our code in a way where we instantiate data that inherits behavioral properties we define in the class the object is associated with. Benefits of organizing our code in such a way include:

• Our code becomes easier to change. There is a clear place to add/remove code.
• We can design our code in a way that the behavioral functions we define only interact with the data they are supposed to.
• Our code is easier to replicate. When an object is created with unique data, the instance methods we define in the class operate in such a way that is unique to that object.
• Our code becomes easier to read by adding more organization.

In Practice

On a high level, this makes sense. Let's take a look at how object oriented JavaScript differs from purely functional JavaScript. Here is some functional javascript:

let model = "Honda Civic";
let mileage = 50000;

function goVroom(typeOfCar){
  console.log(`${model} goes vrooooom!!`})
};

function howOldIsMyCar(mileage){
  console.log(`my car has ${mileage} miles.`)
};

function driveToSanDiego(mileage){
  return mileage + 1000;
}

goVroom(model);
//=> Honda Civic goes vrooooom!!

howOldIsMyCar(mileage);
//=> my car has 50000 miles.

mileage = driveToSanDiego(mileage);
howOldIsMyCar(mileage);
//=> my car has 51000 miles.

This code works and we can tell it is related to behaviors and attributes of a car. However, there is nothing that structurally relates this code.
If we were to write the previous code in an object oriented way, it would encode the relationship of the data and behavioral methods. That code would look something like this:

class Car {
 constructor(model, mileage){
  this.model = model;
  this.mileage = mileage;
  }

  goVroom(model) {
   console.log(`{this.model} goes vrooooom!!`);
  }

  howOldIsMyCar(mileage) { 
   console.log(`My car has ${mileage} miles.`);
  }

  driveToSanDiego(mileage){
   this.mileage += 1000; 
  }

}

let jalopy = Car.new("astro", 150000);

jalopy
//=> Car {model: "astro", mileage:150000};

jalopy.goVroom()
//=> astro goes vrooooom!!

jalopy.howOldIsMyCar()
//=> My car has 150000 miles.

jalopy.driveToSanDiego()

jalopy
//=> Car {model: "astro", mileage:160000};

Here the Car object is a class or the structure for all of JavaScript object oriented programming. We create an instance of this class, in this case it's jalopy. This takes in two arguments: model and mileage.The instance methods we defined have access to the data using the keyword this. This refers to the instance or specific object associated with the class. Our code now has structure and methods associated for specific instances of data. Neat!

Conclusion
Object oriented programming is a powerful way to organize our code and allow specific instances of related data to share behavioral functions. We have gone over how it is not only good practice to keep this when working with our models and the backend but with the frontend as well, using the class object constructor provided to us by JavaScript.