Working with objects and methods

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 throughcat.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.