In a real world application we'd save our address book's Contact
s 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 Contact
s inside it. We'll walk through this process in the next few lessons together. Let's get started!
AddressBook
ConstructorMuch like our Contact
s, 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:
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:
// 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
PrototypesAddressBook
s 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.
Contact
s to the AddressBook
We'll create a prototype method to add new Contact
s to an AddressBook
, right below the AddressBook
constructor:
// 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:
AddressBook
object.Contact
object with a firstName
of "Ada"
, under the variable name contact
.Contact
object, this time with a firstName
of "Grace"
, under the variable name contact2
.Contact
object to our AddressBook
, using our new addContact()
method.Contact
object to the AddressBook
using the same new method.Contact
s 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"
.
Add contacts to an AddressBook
with its constructor and prototype methods:
// 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;
}