Monday , 20 November 2017
Home / Programming / JavaScript / Creating Objects – JavaScript Tutorial
Creating Objects
Creating Objects

Creating Objects – JavaScript Tutorial

This tutorial is part of the JavaScript tutorial series for beginners. To view the whole list of tutorials available and the order in which you should follow them, then click here.

Object oriented programming is a style of programming. JavaScript will read your code from top to bottom and execute it in that order. This is what’s called procedural code. Object oriented programming doesn’t work this way. Instead, it’s built on the concept of “objects”.

For the most part, object oriented programming is viable for advance or large projects. It helps make your code become clean, reusable, and more robust. Objects don’t execute right away. You have to call it and the order in which you run it depends entirely on you.’

A lot of beginner JavaScript developers don’t bother with  learning object oriented programming and just use libraries like JQuery to do most of the work for them. While JQuery is a great library, it’s good to know what’s going on behind the scenes.

Let’s learn how to create our own objects!

Being Organized

It’s not mandatory, but it’s proper practice to place your classes in a separate file. In your js folder, create a folder called classes. Inside this folder create a file called car.class.js. You don’t have to give your class file the .class, but it’s helpful to know which files are classes and which aren’t.

Lastly, let’s include this class in our HTML document so our script can use it. Add this line of code BEFORE you include your script.

Creating Objects

Before you can create an object, you have to create a class. A class is simply a blueprint for an object. If you’ve ever programmed before, you’re probably familiar with the class keyword. The thing is that JavaScript is class less. Instead, it’s prototype based. So, what does that mean? You’ll see in a moment.

In your class, add this bit of code.

You’ll notice that creating an object is almost like creating a function. The thing is, a function can be just a function or an object. It’s totally up to you! We’ll be using our function as an object.

Now, in order to use this object, we have to create an instance out of it. So, in your script, add this line of code.

Just like that, you have now created an instance out of your Car class. The Car() function is now being used as an object. You can now access the properties and methods of the Car class, but the Car class doesn’t have any methods or properties.

Conclusion

There are actually more than one way to create classes. This is one of the most common methods of doing so. This method we used here is called the constructor function. It’s called that because we’re constructing our class inside a function. Pretty simple, eh? In our next tutorial, we’ll learn how to add properties and methods to our class. It’s very simple and straightforward.

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