12  JS Objects

When we started with JavaScript, we dove right into writing code to show concepts like variables (our data containers) and operations (assigning variables, doing math and concatenating strings).

We then talked about functions where we can create reusable code that acts like a manufacturing plant: We feed it things and it spits out new or modified things. We created a function that squared two numbers. You (hopefully) created a function that puts parts of a name together.

Now I want to introduce a new, important concept JavaScript called Objects which are also variables, but they can have more than one value, called properties. I would say these properties describe the object. If our object were a person, it might have these properties:

var person = {
  firstName: "Christian",
  lastName: "McDonald",
  age: "53"
};

JavaScript Objects can also have methods, which are things you can do to or with the object. Methods are “simply” functions embedded in the object. In this example, we have a fullName method within our “person” object.

var person = {
  firstName: "Christian",
  lastName: "McDonald",
  age: "56",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

To access a property of a JavaScript object, we follow the object with . and the name of the property: person.firstName gives us “Christian”.

To use a method of a JavaScript object we also follow the object with a . and the method name, but we have to follow the method with parenthesis: person.fullName() would give us “Christian McDonald”.

12.1 HTML elements are JavaScript Objects

Thanks to something called the Document Object Model (or DOM, for short) JavaScript considers every HTML element on a web page a JavaScript Object and it has some baked-in properties and methods. (The properties and methods vary based on object type: string vs number vs date, etc.) This means we can access the properties of each HTML element and we can act on them through methods.

We’ll use these baked-in properties and methods in our next lesson.

We’ll use a method to find specific objects on the page to discover it’s properties. We’ll then make decisions based on those properties and then use another method to change that HTML object.