Monday , 20 November 2017
Home / Programming / JavaScript / Creating Properties and Methods – JavaScript Tutorial
Creating Properties and Methods
Creating Properties and Methods

Creating Properties and Methods – 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.

In this tutorial, we will be working with the Car class we created in the last tutorial. You’ll learn how to create properties and methods. Creating properties and methods in JavaScript is relatively simple.

Creating A Property

As previously discussed, a property is just a variable for an object. Creating a property in an object is different than creating a variable in general. Let’s update your Car class to this.

You’ll notice you don’t have to use the var keyword. Instead, you’re using the this keyword. The this keyword is a way to refer to the class to itself. Normally you would refer to an object by it’s name or the name of it’s instance, but since you’re already inside the class, you have to use the this keyword when talking about the object itself.

Using dot notation, you give your property a name and then it’s value. It’s optional to give your property a value. In our case, we created a property called color and gave it the initial value white.

Whenever someone creates an instance of the Car class, then the color is set to white every time. Let’s try accessing this property in our script. Add this line of code into your script.

You should see white outputted into the document. Did you know you could also update the value of this property by doing something like this?

The great thing is that this only affects the current instance. If you created another instance like ford, then you can change that car’s color to blue and it wouldn’t affect the honda instance.

Creating A Method

Accessing a property directly is not practical. It’s better to use getter and setter methods. What are getter and setter methods? This is the technical term for methods that update or grab a property for you. It’s safer to do it this way as it allows you to filter data before doing anything to the property itself.

Let’s create these 2 methods in our Car class. Update your Car class to this.

Creating a method is similar to creating a property. The only difference is that you define a function instead of setting a value. The process for creating a function is the same for creating a function in a class.

You’ll notice in the setColor() method, it has 1 parameter. which is the value for the new color. Then, you update the color property with the value passed into the setColor() method.

The getColor() method simply outputs the current color to the document. Just like creating a property, you can use the this keyword to access the object’s property and update it anytime.

Update your script to this.

Conclusion

Creating properties and methods in JavaScript is different than creating them in other classes. We’ll be using classes more in future tutorials.

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