Object-Oriented JavaScript ES6

Image source from codeburst.io

What exactly is Object-Oriented Javascript?

The best way to understand OOJS is that the objects in our code are what we use as models to represent the real world people, place, & things, to then plug those models into our program to solve real-world problems. Like our object, people contain “data”, and what I mean by that is, they have a name, age, sex, height, weight, occupation.. etc. OOJS gives us the ability to use the information from the model to emulate the behaviors and functionalities from that model, to then create data for us (programmers)to use in our application!

An example of our ‘Person’ object model:

Classes

What are classes?

No, I’m not referring to the classes in school! In terms of Javascript, classes are a “special function”. Think of the class function as an info card that a person can fill out about themselves.

Constructors

What are constructors?

A constructor is another special function in Javascript that defines and initializes objects and their features. They are useful because they provide an effective way of creating as many objects as you please, along with attaching data and function if need be!

I like to think of constructors as the labels on a form that asks for your physical features and occasionally your occupation! (name, age, sex, address, city, occupation, favorite color, etc…)

Lastly, if we wanted to create a new instance — let’s say a new fish — we initialize our Fish class function by using the new keyword:

Getters & Setters

What are getters and setters in Object-Oriented JS?

These are a type of property, but not just any kind! They are accessor properties, meaning they are functions that execute on getting and setting a value.

A getter is a function without arguments that works when the property is read.

In the code above, you see that we have used a getter on allInterests() function with a return value of a sentence with our this.interests that is now accessible for us to create a value and read it :

A setter is also a function, that takes an argument that is called when a property is set. It allows us to write a method that interacts like a property being assigned a value.

Here we have our class Square function with a getter on our area() function. Unfortunately, here, we can not reassign the area with a new value! Remember that our get property is only for readability.

Lucky for us, this is where our setter comes in. With a set property we have the ability to change the value of our area() to different values!

Example Static method

Static Method

What is a static method?

Static methods are called on class functions and not on instances of the class. Meaning that it is like a helper function in order to help create or clone objects.

If you have made it this far and is confused about why there are clones of Homer. Well, just think of OOJS in the sense that Homer is our class function. He has a constructor of (name, age, height, weight, favorite food, catchphrase, occupation.. etc.). Therefore, we can make multiple homers! With the exception of Peter Griffin from Family Guy, I would consider that a set and get an opportunity?

Software Engineer