Tuesday , 16 July 2019
Home / Programming / JavaScript / Object Oriented Programming – Advanced JavaScript Tutorial
Object Oriented Programming
Object Oriented Programming

Object Oriented Programming – Advanced JavaScript Tutorial

Object oriented programming in JavaScript is different than most programming languages. JavaScript has no acknowledgement of classes. All properties and methods inside an object are just name-value pairs. We’ve discussed object oriented programming before in the JavaScript beginner tutorial series. Now, we’ll go more in-depth of what OOP is.

They way we’ve been writing code is what’s called procedural code. The browser will look at each statement and execute each line of code 1 by 1. It starts from the top to the bottom. In OOP, code isn’t executed like so. Instead, it revolves around the concept of objects. Objects have properties and methods that you can use anytime in the program in any order you like.

There are 3 ways to create objects. Let’s take a look at each one.

Object Constructor

Clear your script and add this bit of code.

There’s actually an object called Object. This is just a plain object that you can use as a base for creating your own objects. Think of it as a template ready to go! We create a variable called jack and make it an object. After that, you can add properties and methods. You don’t have to specify you’re creating a new property.  Same goes for creating methods.

Then, you can use your properties and methods like any other object.

Object Literal Notation

Another way of creating objects is using object literal notation. This is also known as JSON. Let’s take a look at how this is done. Clear your script and add this bit of code.

You don’t have to use the Object keyword to create an object. You can use curly braces to do so. Instead of using assignment operators, you can use colons to separate name and values. You also create methods by using the function keyword followed by it’s name. Then, you write your method like you would with any method.

Constructor Function

This method you have already learned. This one is the preferred one out of all of them. When you create objects with the object constructor and object literal notation, you end up having objects that need to be copy and pasted to create a new one. What if we we wanted to create an object similar to jack except for someone else like sam? We would have to copy and paste code to do so.

However, with the construction function, you don’t have to do this. Clear your script and add this bit of code.

We create an object using the function keyword. You already know how to do this so I won’t explain much about it. Though, by doing this, you can create as many objects as you want by using this one function. With the other 2 methods, you have to copy and paste to code just to create the same object.  To create an instance, we simply use the new keyword.


We’ll start digging into prototypes and the full power they can bring to the table in a future tutorial. For more information on object oriented programming in JavaScript, then go here.


About Jasko Koyn

Check Also


Audio – Advanced JavaScript Tutorial

The video and audio objects both have the same events, properties and methods. So, you …

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.