05-02: Javascript Objects and Properties

Matt Price

Objects are variables with named parts

  • parts are called properties, but
  • if a part is a function, we call that part a method

let's eat


let myFruit="orange",
    mySandwich = "just some bread!",
    myBar="weird vegan bar",
    myCookie="ginger",
    myCandy="pulparindo",
    mySnacks=["cliff bar", "cliff bar", "kind bar"];

function eat (food) {
  console.log("Umm, that was a delicious " + food + ".");
}

eat (myFruit);
//eat (myBar);
//eat (myCookie);
//eat (myCandy);
  • we can eat any of the foods
  • they're not related to each other, just floating around

Now let's make lunch


let myFruit="orange",
    mySandwich = "just some bread!",
    myBar="weird vegan bar",
    myCookie="ginger",
    myCandy="pulparindo",
    mySnacks=["cliff bar", "cliff bar", "kind bar"];

let myLunch = {};
  • myLunch is an empty object – it has no parts yet

Add some parts


let myFruit="orange",
    mySandwich = "just some bread!",
    myBar="weird vegan bar",
    myCookie="ginger",
    myCandy="pulparindo",
    mySnacks=["cliff bar", "cliff bar", "kind bar"];

let myLunch = {
  fruit: "orange",
  sandwich: mySandwich
};

myLunch["snacks"]=mySnacks;
myLunch;
  • added parts in 3 ways: set directly in definition; set by reference in definition; added by reference after definition

Eat the Lunch


let myFruit="orange",
    mySandwich = "just some bread!",
    myBar="weird vegan bar",
    myCookie="ginger",
    myCandy="pulparindo",
    mySnacks=["cliff bar", "cliff bar", "kind bar"];

let myLunch = {
  fruit: "orange",
  sandwich: mySandwich
};

myLunch["snacks"]=mySnacks;

function eatLunch (someLunch) {
  let output = "";
  output += "I'll start with my " + someLunch["fruit"] + "\n";
  output += "Next I want to eat " + someLunch.sandwich + "\n";
  for (snack of someLunch.snacks) {
    output += "   I love my " + snack + "\n";
  }
  return output;
}

eatLunch(myLunch);
  • rewrote eat to take advantage of the structure of lunch

Add Dessert


let myLunch = {
  fruit: "orange",
  sandwich: "just some bred!",
  bar: "weird vegan bar",
  snacks: ["cliff bar", "cliff bar", "kind bar"],
  dessert: {cookie: "ginger", candy: "pulparindo"}
};

console.log("I'm finally ready for my " + myLunch.dessert.cookie);
  • objects can be arbitrarily complex and contain other objects

Eat The Lunch as a Method

Reminder


function eatLunch (someLunch) {
  let output = "";
  output += "I'll start with my " + someLunch["fruit"] + "\n";
  output += "Next I want to eat " + someLunch.sandwich + "\n";
  for (snack of someLunch.snacks) {
    output += "   I love my " + snack + "\n";
  }
  return output;
}

Writing the Method


let myLunch = {
  fruit: "orange",
  sandwich: "just some bred!",
  bar: "weird vegan bar",
  snacks: ["cliff bar", "cliff bar", "kind bar"],
  dessert: {cookie: "ginger", candy: "pulparindo"},
  eatMe: function() {
    let output = "";
    output += "I'll start with my " + this["fruit"] + "\n";
    output += "Next I want to eat " + this.sandwich + "\n";
    for (snack of this.snacks) {
      output += "   I love my " + snack + "\n";
    }
    return output;
  }
};

myLunch.eatMe;

myLunch.eatMe();
  • note the differences between eat() and myLunch.eatMe:
    • the method doesn't take a parameter!
    • instead, we get to use this, which refers to the current object scope

Finally some History


  let greatWar = {
    name: "The First World War",
    start: 1914,
    end: 1918,
    badGuys: ["Germany", "Austria-Hungary", "Ottoman Empire"],
    goodGuys: ["All our Friends"],
    scale: "Catastrophe"
  }

//  console.log(greatWar["name"] + " lasted for " + (greatWar.end - greatWar.start) + " years.");

more objects


  let greatWar = {
    name: "The First World War",
    start: 1914,
    end: 1918,
    badGuys: ["Germany", "Austria-Hungary", "Ottoman Empire"],
    goodGuys: ["All our Friends"],
    scale: "Catastrophe",
    battles: [
      { name: "The Battle of Vimy Ridge",
        year: 1915,
        casualties: 34000
      }]
  }

  console.log(greatWar["name"] + " lasted for " + (greatWar.end - greatWar.start) + 
"  years.");
console.log(greatWar.battles[0].name + " was ferocious and horrific. There were " +   
  greatWar.battles[0].casualties + " casualties.");

Basic Logic with Objects


let goodGuys = ["CA", "UK", "US"];
let badGuys=["DE", "AH"];
let people = [
  {name: "Kaiser Wilhelm",
   nat: "DE"},
  {name:"Winston Churchill",
   nat: "UK"}];
for (person of people) {
  if (badGuys.includes(person.nat)) {
    //console.log(person.name + ": BOOOOOOOOOOOO!!!");
  }
};

Branching Logic with Objects


let goodGuys = ["CA", "UK", "US"];
let badGuys=["DE", "AH"];
let people = [
  {name: "Kaiser Wilhelm",
   nat: "DE"},
  {name:"Winston Churchill",
   nat: "UK"}];
for (person of people) {
  if (badGuys.includes(person.nat)) {
    console.log(person.name + ": BOOOOOOOOOOOO!!!");
  } else {
    console.log(person.name + ": YAAAAYYY!!!");

}
};

In-class coding exercise!

Some Data

Take a look at this the code snippets repo

Now consider the following javascript array of objects (here you can see how similar JSON is to regular javascript objects) 


orgs = [
  {"name": "African National Congress",
   "founded": 1912,
   "link": "https://en.wikipedia.org/wiki/African_National_Congress"
  },
  {"name": "Pan Africanist Congress",
   "founded": 1959,
   "link": "https://en.wikipedia.org/wiki/Pan_Africanist_Congress_of_Azania"
  },
  {"name": "South African Communist Party",
   "founded": 1921,
   "link": "https://en.wikipedia.org/wiki/South_African_Communist_Party"
  },
  {
    "name": "Black Sash",
    "founded": 1955,
    "link": "https://en.wikipedia.org/wiki/Black_Sash"
  },
  {
    "name": "South African Students' Organization",
    "founded": 1968,
    "link": "https://en.wikipedia.org/wiki/South_African_Students%27_Organisation"
  }
]
orgs

Our objective is to read this variable and use it to build sentences about anti-apartheid organizations in South Africa.

using JSON data


function describeOrg (org) {
  return org.name + ' was founded in ' + org.founded + '.';
}

console.log(describeOrg(orgs[0]));

Looping through the data



function describeOrg (org) {
  return org.name + ' was founded in ' + org.founded + '.';
}

for (let o of orgs) {
console.log(describeOrg(o));
}