Looping Through Objects and Prototypal Inheritance and for...in loops

Terminology

---

• __proto__: Objects have a __proto__ property which allows them to access other properties and functionality via prototypal inheritance.
• Prototypal Inheritance: Inheriting functionality via object prototypes.

Examples

---

Loop Through Properties with Object.keys()

const adaKeys = Object.keys(mathematician);
let adaString = ""
adaKeys.forEach(function(key) {
  adaString = adaString.concat(key + ": " + mathematician[key] + "\n"); 
});

Loop Through Properties with for...in

for (const key in mathematician) {
  if (contact.hasOwnProperty(key)) {
    console.log(mathematician[key]);
  }
}

Note: Use Object.prototype.hasOwnProperty() if you only want the properties of the object itself to be iterated over.

Best Practices

---

1. Create a separate UI function instead of adding the code to the form submission block. This allows us to focus on writing one function at a time, and helps keep code modular.
2. Store jQuery selectors inside a variable. That way, if we need to use the selector multiple times, jQuery only needs to query the DOM once, making code faster and more efficient.
3. Create a list of all elements to append to the DOM, and add them all at once instead of one a time. This is also faster and more efficient.

Examples

---

Create a UI function to display contacts in an address book:

function displayContactDetails(addressBookToDisplay) {
  let contactsList = $("ul#contacts");
  let htmlForContactInfo = "";
  Object.keys(addressBookToDisplay.contacts).forEach(function(key) {
    const contact = addressBookToDisplay.findContact(key);
    htmlForContactInfo += "<li id=" + contact.id + ">" + contact.firstName + " " + contact.lastName + "</li>";
  });
  contactsList.html(htmlForContactInfo);
};

Terminology

---

• Event Bubbling: The process of events bubbling upward when an event is triggered in the DOM.
• Event Delegation: The process of creating an event listener on a parent element that fires for all specified child elements.

Examples

---

Here's an example:

<div id="top-level">
  <ul id="contacts">
    <li id=1>Contact 1</li>
    <li id=2>Contact 2</li>
    <li id=3>Contact 3</li>
  </ul>
</div>

If an li in the sample HTML above is clicked, it will first trigger any listeners on li, then listeners on #contacts, then listeners on #top-level.

function attachContactListeners() {
  $("ul#contacts").on("click", "li", function() {
    console.log("The id of this <li> is" + this.id + ".");
  });
}

"ul#contacts" is the parent element. All li elements within the parent element will be triggered on "click".

Examples

---

Create a UI function to show a contact in the DOM:

function showContact(id) {
  const contact = addressBook.findContact(id);
  $("#show-contact").show();
  $(".first-name").html(contact.firstName);
  $(".last-name").html(contact.lastName);
  $(".address").html(contact.phoneNumber);
  let buttons = $("#buttons");
  buttons.empty();
  buttons.append("<button class='deleteButton' id=" +  + contact.id + ">Delete</button>");
}