Objects are made up of three basic pieces. The object, its properties and their values.
var myObject = {
property1: value1;
property2: value2;
property3: value3;
etc...
}
Looks like we'll be working with some objects in the next lesson, so I'm going to go ahead and create one here:
var cat = {
name: "Garfield",
color: "Ginger",
food: "Lasagna",
owner: "Jon",
age: 38,
dob: ["June",19,1978],
friends: ["odie","pookie","nermal"]
};
Accessing properties
In order to save garfield's name (access the name property) as a var to use we use dot notation - objectName.propertyName:
var name = cat.name;
We can also use bracket notation - objectName["propertyName"]:
var name = cat["name"];
Creating a Method
A method works like a function, but works on an object. For example:
cat.changeName = function(newName) {
cat.name = newName;
};
cat.changeName(prompt("What would you like to name " + cat.name + "?"));
object.methodName = function(parameter) {
object.key = parameter;
};
- We can use methods to change an object, like above.
- We can also use methods to do things with objects, like find Garfield's year of birth.
Find Garfield's Year of Birth
cat.findDob = function() {
return 2016 - cat.age;
};
console.log(cat.findDob());
Here's a simple method to check a drink order and adjust the price and add tax. I mostly wrote this to test my understanding of the above. Nothing special.
// create the dinner object using the object constructor
var dinner = new Object();
dinner.main = "Cheese Burger";
dinner.side = ["fries","broccoli"];
dinner.drink = ["none"];
dinner.price = 11.5;
// method to update the drink order (notice the difference in syntax between this "dinner.changeDrink = " and a regular function "var changeDrink = ")
dinner.changeDrink = function(drink) {
dinner.drink = drink;
};
// method to update the price of dinner based on the added drink
dinner.changePrice = function(price) {
dinner.price = price;
};
// method to calculate a 10% tax
dinner.tax = function() {
return Math.round(dinner.price * 1.1);
};
// prompt the user to enter a drink name
dinner.changeDrink(prompt("Which drink would you like?"));
// calculate the new dinner price based on 10% of the length of the drink's name, for fun
dinner.changePrice(dinner.price + (dinner.drink.length * 0.1));
// notify the user of the drink ordered and then update price including tax rounded to the closest dollar amount.
console.log("Your drink order was changed to " + dinner.drink + " and your total updated to $" + dinner.tax());
// let's see what the dinner object looks like now.
console.log(dinner);
Use this for global methods
We use this to change a method from targeting only one object specifically ex. cat.food = newFood
to target a specified object this.food = newFood. Finally we equate the object with the method through
cat.food = changeFood;`. Here's the full example:
//create the method
var changeFood = function(newFood) {
//this placeholder for the object name
this.food = newFood;
};
// create the object
var cat = {
name: "Garfield",
color: "Ginger",
food: "Lasagna"
};
// target this with the cat object
cat.changeFood = changeFood;
//feed a new parameter in the method
cat.changeFood(prompt("What is your cat's favorite treat?"));
// log the results
console.log("Your cat, " + cat.name + ", just ate the " + cat.food);
A final example of using this specific to a single.method
var triangle = new Object ();
triangle.width = 10;
triangle.height = 15;
triangle.calcSurface = function(width, height) {
return this.width * this.height / 2;
};
console.log("The triangle's surface = " + triangle.calcSurface());
Here the this can refer to triangle only, since it's inside the triangle.calcSurface
method.