Lesson Weekend

Now that we have an understanding of JavaScript objects, let's put them to work! In the next few lessons we'll build an address book app to store contact info for our friends.

Since each contact will have multiple properties, we will use Contact objects to encapsulate their data. And because all Contacts should have the same combination of properties (name, phone number, etc.) we'll create a constructor that can quickly craft many different Contact objects with this same structure.

We'll focus only on the business logic for now, and build code for the user interface together in upcoming lessons.

Project Setup

First, let's create a project directory called address-book. It will contain a js subdirectory to house JavaScript logic, with a single JavaScript file called scripts.js inside. Like all project, we'll also include a README.md.

Our project structure should look like this:

address-book
├── js
│   └── scripts.js
└── README.md

Again, we'll wait to add user interface logic (that is, any jQuery, HTML, and anything else meant to create the user-facing portion of the app) until after we've written our business logic.

Constructor

We'll start by building a simple Contact constructor in scripts.js:

scripts.js
function Contact(firstName, lastName, phoneNumber) {
  this.firstName = firstName,
  this.lastName = lastName,
  this.phoneNumber = phoneNumber
}

Let's test this code! We can copy/paste the constructor above into the browser's JavaScript console, then create a new Contact by running the following:

var testContact = new Contact("Ada", "Lovelace", "503-555-1111");

If we check the value of testContact (by typing testContact into the console, and hitting Enter), we'll see the following response appear:

Contact {firstName: "Ada", lastName: "Lovelace", phoneNumber: "503-555-1111"}

This means our object has been successfully saved! The console remembered the Contact object we created and associated with the testContact variable name. And that Contact object contains all the properties we provided our constructor.

Accessing Object Properties

We can also access our object's individual properties. For instance, we can type the following into the console:

testContact.lastName

And it will return the lastName property we instantiated our Contact object with:

"Lovelace"

Notice we don't use parentheses after lastName. This is because it's a property of the object, not a method being called upon it. This same syntax will work for the other object properties too. For instance, we could call testContact.firstName or testContact.phoneNumber to see other properties.

Prototype

Next, let's create a simple prototype method to call on Contact objects. Let's say we want a fullName() method to return the contact's first and last name, concatenated together.

We can define a new prototype function in our scripts.js file like this:

scripts.js
function Contact(firstName, lastName, phoneNumber) {
  this.firstName = firstName,
  this.lastName = lastName,
  this.phoneNumber = phoneNumber
}

Contact.prototype.fullName = function() {
  return this.firstName + " " + this.lastName;
}

Then we can copy/paste the contents of scripts.js into the JavaScript console again, and create another sample Contact by invoking our constructor with the following code:

var testContact = new Contact("Ada", "Lovelace", "503-555-1111");

After that, we can call our new method in the console like this:

testContact.fullName();

It will return the object's firstName and lastName properties concatenated together:

"Ada Lovelace"

Note that we need to use parentheses when we call our fullName() method, because it is a method on the object, not a property. Also, it's important to remember that this method can only be called on Contact objects.

Now that we've created a constructor for Contact and a simple prototype method that can be called on Contacts, let's move on to constructing the address book itself.


Example GitHub Repo for the Address Book

Examples


Creating a Contact constructor:

function Contact(firstName, lastName, phoneNumber) {
  this.firstName = firstName,
  this.lastName = lastName,
  this.phoneNumber = phoneNumber
}

Creating a prototype method on our constructor:

Contact.prototype.fullName = function() {
  return this.firstName + " " + this.lastName;
}

Example GitHub Repo for the Address Book