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:

class PersonName[firstName, lastName]
Bio{"[Name] is ["Age"] years old. They like ["interests"]"}
Greeting{"Hi! My name is [Name]"}


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.

Example class function via VsCode


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!

Example Constructor via VSCode

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…)

Fish by Giphy

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:

let blueFish = new Fish('Blue Fish', 1, 'Puffer fish', "Female)

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.

Example getter

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 :

Getter is now accessible to read

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.

Flatiron: OOJS Method Type

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!

Flatiron: OOJS Method Type
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.

Clones of Home (Body Hacks)

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Day 10: The complete guide to using Facebook SDK in React Native App

By A Junior, For A Beginner: The Call Stack & Async Javascript

Small portion of computer screen with javascript code

Animating between units with react-spring

Lesser-known JavaScript features — Part 1

Closures in JavaScript

Getting Started with Semantic UI React

Consonance JavaScript Sprint : Day 1 (Data types)

Using fetch() to Retrieve Data from Rails Backend

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Akiko Green

Akiko Green

Software Engineer

More from Medium

Arrays in JavaScript

Promises in JavaScript

A beginners guide to JavaScript Callbacks and how to avoid the Callback Hell with Promises

Arrays in JavaScript