Object Oriented Programming in JavaScript

OOP

What is object-oriented programming(OOP)?

According to Microsoft Developer Network,

The basic idea of OOP is that we use objects to model real world things that we want to represent inside our programs,  and/or provide a simple way to access functionality that would otherwise be hard or impossible to make use of.

An object is a collection of properties and functions that can store data as well as send messages to and receive messages from other objects. It is highly modular, making it both flexible as well as maintainable.

Objects can contain related data and code, which represent information about the thing you are trying to model, and functionality or behavior that you want it to have. Object data (and often, functions too) can be stored neatly (the official word is encapsulated) inside an object package (which can be given a specific name to refer to, which is sometimes called a namespace), making it easy to structure and access; objects are also commonly used as data stores that can be easily sent across the network.

What are some benefits of object oriented programming?

  • Encapsulation: All of the data and functions are stored within the object itself.
  • Namespacing: The functions that we define are namespaced to this object. This is easier to demonstrate when we use constructors to define new objects.
  • Data stores: Objects are easy and efficient ways to store data that can be manipulated or passed to different parts of a program.

Run the following code in the console:

> const obj = { a: 1, b: 3 }

> obj

Now expand the result. You should see what is contained within this object literal. We have the data store (a and b) as well as the functions that are available to it. This is what we refer to as encapsulation. Expand __proto__ to see these functions. Now try running some of these methods on your object to see the results:

> obj.toString()

> obj.valueOf()

Object Template

Let’s look at an example of some real world objects. In my day job, I work for a company called RepairPal that connects consumers to auto mechanics that are reputable. We have objects to represent cars.

What are some attributes you might expect for a car?

Let’s give it the following properties:
  • a carMake
  • a carModel
  • a year
  • a color
  • a name (everyone names their car, right?)
  • an engineSize
  • a spareTire - a boolean (T/F) if the car has a spare tire
  • a currentSpeed

Now that we have a basic template for a car (with just the data), what would an instance of that car look like. Remember, an instance of a model or template has the structure of that object but with actual data filled in. This is an abstraction of our real world object. We are just taking the relevant information of it. Try to come up with an instance of your own car.

Once you give it a shot, compare it to the attributes for my car.


Here is what my car would look like:
  • carMake: "Toyota",
  • carModel: "Prius"
  • year: "2013"
  • color: "blue"
  • name: "Honey"
  • engineSize: "1.8 L 4-cylinder"
  • hasSpareTire: true
  • currentSpeed: 0
Notice that the data has multiple types: strings, booleans, and numbers.

Summary

Now we have a general idea of what objects are, we need to see how to create them in JavaScript. Read my next blog post about Constructors and ES6 Classes for more information on how to create functions to build objects and how to instantiate them.