Looping Through Objects and Prototypal Inheritance and for...in loops
Tags: javascript, codenewbie, programming, webdev
Published: 2021-02-15 01:01:06

# **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()**

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

# **Loop Through Properties with for...in**

```jsx
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:

```jsx
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:

```html
<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`.

```jsx
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:

```jsx
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>");
}
```