Lesson Weekend

In a real world application we'd save our address book's Contacts in a database. However, we aren't working with databases yet. Instead, we'll create an address book, make it something called a global variable, and save Contacts inside it. We'll walk through this process in the next few lessons together. Let's get started!

AddressBook Constructor

Much like our Contacts, our AddressBook will be a JavaScript object. But instead of containing properties like firstName or lastName, it will contain a list of Contact objects, similar to the manner the previous lesson depicted objects being saved within other objects.

To do this we'll need an AddressBook constructor. Let's add the following new constructor to the top of scripts.js:

scripts.js
function AddressBook() {
  this.contacts = []
}

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

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

AddressBook objects contain a single property: An empty array called contacts. This is where we will store entries in our address book, in the form of Contact objects.

To more easily following along with lessons, let's also add comments denoting where AddressBook and Contact logic will go in scripts.js:

scripts.js
// Business Logic for AddressBook ---------
function AddressBook() {
  this.contacts = []
}

// Business Logic for Contacts ---------
function Contact(firstName, lastName, phoneNumber) {
  this.firstName = firstName,
  this.lastName = lastName,
  this.phoneNumber = phoneNumber
}

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

AddressBook Prototypes

AddressBooks can only do one thing right now: store an array of contacts. Let's define a few prototypes for our AddressBook objects, to give them more functionality.

Adding Contacts to the AddressBook

We'll create a prototype method to add new Contacts to an AddressBook, right below the AddressBook constructor:

scripts.js
// Business Logic for AddressBook ---------
function AddressBook() {
  this.contacts = []
}

AddressBook.prototype.addContact = function(contact) {
  this.contacts.push(contact);
}

// Business Logic for Contacts ---------
function Contact(firstName, lastName, phoneNumber) {
  this.firstName = firstName,
  this.lastName = lastName,
  this.phoneNumber = phoneNumber
}

Contact.prototype.fullName = function() {
  return this.firstName + " " + this.lastName;
}
  • This new method, called addContact(), takes an Contact object as an argument.

  • It locates the AddressBook's contacts array by calling this.contacts.

  • It uses push() to add the Contact provided as an argument to the AddressBook's contacts array property.

Let's try it out! We can copy/paste the contents of scripts.js into the JavaScript console, and enter each of the following five lines:

var addressBook = new AddressBook();
var contact = new Contact("Ada", "Lovelace", "503-555-0100");
var contact2 = new Contact("Grace", "Hopper", "503-555-0199");
addressBook.addContact(contact);
addressBook.addContact(contact2);

Let's walk through what each of these lines is doing:

  1. We create an AddressBook object.
  2. We create a new Contact object with a firstName of "Ada", under the variable name contact.
  3. We create another new Contact object, this time with a firstName of "Grace", under the variable name contact2.
  4. We add the first Contact object to our AddressBook, using our new addContact() method.
  5. We add the second Contact object to the AddressBook using the same new method.

Viewing Contacts in the AddressBook

If we then run the following in the console, we can see the contents of our AddressBook:

addressBook.contacts;

It will return something that looks like this:

(2) [Contact, Contact]

This states that addressBook.contacts returns an array containing 2 Contact entries. We can see details by clicking the triangle-shaped symbol to the left of this line in the console.

We can even get specific information about each contact. For instance, we could run the following code to isolate a specific Contact's firstName property:

addressBook.contacts[0].firstName;

This code tells the console to return the firstName property of the Contact in the AddressBook's contacts array at the 0th index. (That is, the first Contact in the list.) It returns "Ada".


Example GitHub Repo for the Address Book

Examples


Add contacts to an AddressBook with its constructor and prototype methods:

scripts.js
// Business Logic for AddressBook ---------
function AddressBook() {
  this.contacts = []
}

AddressBook.prototype.addContact = function(contact) {
  this.contacts.push(contact);
}

// Business Logic for Contacts ---------
function Contact(firstName, lastName, phoneNumber) {
  this.firstName = firstName,
  this.lastName = lastName,
  this.phoneNumber = phoneNumber
}

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

Example GitHub Repo for the Address Book