Monday , 20 November 2017
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.

Conclusion

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.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

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

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link