JavaScript 101

Part 3
Objects

What are objects?

Objects allow us to describe an entity that has a complex structure, and more closely resembles something that exist in the real world.

Arrays and functions are both special types of objects in Javascript. We can also define our own objects to represent complex data structures.

What are object attributes?

Javascript objects have attributes - called 'properties', and things they can do - called 'methods'. For example, we can create an object that represents a dog in Javascript. It could have properties like 'colour' and 'breed', and methods like 'bark' and 'chaseCat'.

WAT

Object syntax

Objects are a data type that let us store a collection of properties and methods.

var objectName = {
  propertyName: propertyValue,
  propertyName: propertyValue
};

A real, actual example

var shawn = {
  hometown: "Dansville, NY",
  age: 26,
  hair: "blonde",
  favorite_bands: [
    "The Mountain Goats", "Timber Timbre", "Fleet Foxes"
  ]
};

Accessing objects: two ways

Access properties using "dot notation":

var shawn = {
  first_name: "Shawn",
  last_name: "Biddle"
};

var name = shawn.first_name + ' ' + shawn.last_name;

Or using "bracket notation" (like arrays):

var first_name = shawn["first_name"];

Important! Non-existent properties will return undefined:

var middle_name = shawn["middle_name"];

Accessing Objects (continued)

Dot notation is typically used when you know the property name (e.g., person.first_name)

Array notation is typically used when the property name has special characters (spaces, dashes, etc) or if you want to reference it by variable

var shawn = {
  name: "Shawn",
  "favorite color": "red"
};

// shawn.favorite color wouldn't work because there's a space
var color = shawn["favorite color"]; // red
var lookup_property = "favorite color";
var color = shawn[lookup_property]; // red

Changing objects

Use dot or bracket notation with the assignment operator to change objects.

Changing properties

Change existing properties:

var shawn = {
  hometown: "Dansville, NY",
  favorite_color: "red"
};
shawn.favorite_color = "green";
var setting_property = "hometown";
shawn[setting_property] = "Anytown, USA";

Adding properties

Or add new properties:

shawn.money = 1000000;

Deleting properties

You can also delete properties:

delete shawn.student_loans;

Arrays of objects

Since arrays can hold any data type, they can also hold objects:

var bands = [
  {
    name: "The Mountain Goats",
    members: ["John Darnielle"]
  },
  {
    name: "Fleet Foxes",
    members: ["Robin Pecknold", "J Tillman"]
  }
];

for (var i = 0; i < bands.length; i++) {
  var band = bands[i];
  console.log('The members of ' + band.name + ' are ' + band.members.join(', '));
}

Objects as arguments

Just like other data types, objects can be passed into functions:

var lizzieTheCat = {
  age: 18,
  furColor: "grey",
  likes: ["catnip", "milk"],
  birthday: {month: 7, day: 17, year: 1994}
}

function describeCat(cat) {
  console.log("This cat is " + cat.age + " years old with " + cat.furColor + " fur.");
}

describeCat(lizzieTheCat);

Exercise!

Objects

If you get stuck, raise your hand.

Object methods

Object properties can also be functions. Object functions are called "methods".

var lizzieTheCat = {
  age: 18,
  furColor: "grey",
  meow: function() {
    console.log("meowww");
  }
};

Object methods

Call object methods using dot notation:

lizzieTheCat.meow();

Built-in objects

Everything in javascript is an object: numbers, strings, booleans, functions

Javascript also has built in libraries to use, some of which we've seen already

this

this is how we do it. this is the way you reference the current object inside of itself

WAT

Using this

var person = {
  name: "Shawn",
  greet: function ()
  {
    console.log("Hi, I'm " + this.name);
  }
};

person.greet(); // Hi, I'm Shawn
person.name = "Test";
person.greet(); // Hi, I'm Test

Exercise!

Methods

If you get stuck, raise your hand.