JAVASCRIPT: A Beginner’s Guide to Learning the Basics of JavaScript Programming (2015)
Chapter 16. Properties and Methods
Properties are variables that are associated with an object. Their value can be only accessed through the object. For example, the property window.name is only exclusive in the window object. It works like that to prevent confusion in coding.
For example, the property or attribute height for a paragraph (<p>) object/element will become messed up if the height property is not exclusive since other objects/elements also have the property height.
Adding properties through an object literal has been already demonstrated in the previous section. Is there any other way to add properties to an object? Yes, there is. And that method is to add it on your object’s class or constructor. For example:
> var Sim = function() {
this.hunger = 100;
this.comfort = 100;
this.hygiene = 100;
this.bladder = 100;
this.energy = 100;
this.fun = 100;
this.social = 100;
this.room = 100;
}
< undefined
> var JohnSim = new Sim();
< undefined
> JohnSim
< Sim {hunger: 100, comfort: 100, hygiene: 100, bladder: 100, energy: 100…}
> JohnSim.hygiene
< 100
> _
In case you are familiar with the game The Sims, this is how its developers have coded a Sim object in the game. Of course, the number of properties it has is not complete, but you will get the idea.
In this example, properties of the Sim object were provided immediately. Do note that whenever you create an object, all the statements within the object type, prototype, or class’ function will be executed.
this Keyword
You might have noticed something different in this example. Yes, we used the keyword this. The keyword this is a keyword that automatically references the object that owns or contains the statements. In this case, the keyword this is a reference to the newly created object JohnSim. This keyword makes it easier for you to code and of course, shorten the statements that you write.
Methods
As mentioned before, methods are like actions or commands in programming. They can be called functions, too. However, if they are associated to an object, they are called methods instead. Although, there are other terminologies that can be used, for clarity’s sake, the term method will be used instead.
To add a method to a class or object type, you will need to write a separate code block from the constructor. Also, you will need to add the function inside the prototype property of your object. The prototype property is always present in your classes. For example:
> var Sim = function() {
this.hunger = 100;
this.comfort = 100;
this.hygiene = 100;
this.bladder = 100;
this.energy = 100;
this.fun = 100;
this.social = 100;
this.room = 100;
}
< undefined
> Sim.prototype.eat = function() {
alert("Your Sim is eating.")
}
< function() {
alert("Your Sim is eating.")
}
> var JohnSim = new Sim();
< undefined
> JohnSim.eat()
< undefined
> _
Do note that the prototype property will only be available in your class. The object that you will create will not have it. Also, all the functions that you placed on the prototype property will become readily available to the objects.
You can also add methods to your object directly. To do that, all you need to is to do a function literal to a method that you named. For example:
> var Sim = function() {
this.hunger = 100;
this.comfort = 100;
this.hygiene = 100;
this.bladder = 100;
this.energy = 100;
this.fun = 100;
this.social = 100;
this.room = 100;
}
< undefined
> var JohnSim = new Sim();
< undefined
> JohnSim.stand = function() {
alert("Your Sim is standing.")
}
< function() {
alert("Your Sim is standing.")
}
< undefined
> _
When assigning a method directly to an object, you will not need to access the prototype property of the class.
The Concept of Get and Set/Let
Whenever you deal with properties, two things happen behind the scene. First, when you access a property from an object, you are actually asking the program to perform a get action. The get action retrieves the value of the property.
On the other hand, whenever you assign a value to an object’s property, you are actually asking the program to perform a let or set a value to the property. In creating JavaScript script, you do not need to worry about this. Nevertheless, the understanding of these concepts will help you once you explore programming more.
However, do note that set and let might have different contextual meaning in different programming languages.
Providing Arguments and Parameters to Your Constructor
Would it not be better if you can just create an object and assign values to its properties in one statement? Well, you can do that. You can just take advantage of arguments and parameters. After all, constructors are functions, too. For example:
> var Sim = function(firstName, lastName) {
this.hunger = 100;
this.comfort = 100;
this.hygiene = 100;
this.bladder = 100;
this.energy = 100;
this.fun = 100;
this.social = 100;
this.room = 100;
this.firstName = firstName;
this.lastName = lastName;
this.name = firstName + " " + lastName;
alert("Your new Sim’s name is " + this.name);
}
< undefined
> var sim1 = new Sim("John", "Sim")
< undefined
> sim1.name
< "John Sim"
> _