JS: Intro to Objects

Learning Goals

• Describe what an object literal is
• Define properties and methods in an object literal
• Access values and methods from an object using dot notation

Vocabulary

• Object A bundle of behavior (methods) and state (properties)
• Key The name used to reference a value on an object
• Value The data referenced by a key
• Property How we refer to one of the key-value pairs of an object
• Method A function on an object
• Dot Notation Notation to access a value on an object, explicitly specifies the key

Objects

Objects are a type of collection, or complex data type in JavaScript. We can think of objects as a representation of real world things in computer programming.

They are meant to bundle together two things:

1. State (data)
2. Behavior (functionality)

When to use Objects

If we already have our primitive data types, when/why do we also need objects?

• When we need an associative relationship (title for some info)
• We want to model a more complex thing.

Imagine you wanted to model all the information related to a car in code. We could create a whole series of variables (brand, color, year, model, etc), however those variables aren’t tied together in any sensible way. The car itself is one thing, and we want a way hold onto it as such. This is where objects really shine.

Anatomy of Objects

There are several ways to create an object, and the easiest and most popular is literal notation. The only thing you need in JavaScript to declare an object is curly braces {}. Although, it makes things a bit easier if you at least assign it to a variable, like so: var emptyObject = {};

Objects are a collection of key-value pairs or properties surrounded by curly braces. A key is like a name that holds a value. You’re actually used to working with key-value pairs already, because a key-value pair in an object is similar to a variable - the variable name serves as a label for the data we really care about referencing.

In the context of objects, that variable is called a key of the object. Each key in an object must be unique. You cannot have two keys with the same name.

Let’s look at an example:

var objectName = {
  property1: "value1",
  property2: "value2",
};

Which looks like this when we implement it in code:

var school = {
  name: "International School of Denver",
  capacity: 250,
  languageImmersion: true,
  currentStudents: 75,
};

The school object has four properties:

• name: "International School of Denver"
• capacity: 250
• languageImmersion: true
• currentStudents: 75

Access Properties

There are two ways to access the properties or methods of an object, today we will focus on Dot Notation:

var schoolName = school.name;
var schoolCapacity = school.capacity;

Adding a Property

What if we wanted to add another property to an object after we already created it? By accessing the object and using dot notation, we can create another unique property and assign it whatever value we want. This works almost exactly like a variable. Take a look at an example below:

school.address = "7701 E 1st Pl, Denver, CO 80230";
console.log(school);

// console output
// => {
//   name: "International School of Denver",
//   capacity: 250,
//   languageImmersion: true,
//   currentStudents: 75,
//   address: "7701 E 1st Pl, Denver, CO 80230"
// }

Methods on Objects

When we assign a function as the value to one of our keys (remember that a function is a tool we use to return a value!), we call that function a method.

Let’s look at an example:

var objectName = {
  property1: "value1",
  property2: "value2",
  method1: function() {
    return "I'm a method, because I am a function that belongs to an object!";
  },
};

This looks like a lot more code, and potentially a bit more daunting, but when we read through it slowly, we can recognize:

• There is a key name, followed by a colon
• ONE value as a property

The difference is that our property is now a function definition.

Which looks like this when we implement it in code:

var school = {
  name: "International School of Denver",
  capacity: 250,
  languageImmersion: true,
  currentStudents: 75,
  sendWelcomeMessage: function() {
    return "Welcome to International School of Denver!"
  },
};

The school object has one method:

sendWelcomeMessage: function() {
  return "Welcome to International School of Denver!"
},

To call the sendWelcomeMessage method that belongs to the school object, we have to take one step at a time:

1. Tell the program we are interested in something regarding the school object
2. Tell the program we are specifically interested in the sendWelcomeMessage method
3. Call the sendWelcomeMessage method using ()

In action, it looks like this:

school.sendWelcomeMessage();

Let’s add a method to the object representing ourselves. What behaviors or methods should our you object have?