Intro to Objects Solutions

Warm Up

The purpose of this Warm Up is to illustrate the need for Objects, and convenience of them with certain types of data.

While there is no way to predict every answer scholars may come up with, it’s worth exploring a couple potential answers. Their solutions may vary quite a bit based on experience.

  1. Array with Mixed Data
var friendsAndBirthday = ["Lindsey", "October 26", "Ellen Mary", "June 3"];
  • Benefits: All data is container in one array
  • Drawbacks: Usually with arrays, we’d like to have the same type of data. This could be a little difficult to work with - to know which birthday is paired with which name.
  1. Two arrays
var friends = ["Lindsey",  "Ellen Mary"];
var birthdays = ["October 26", "June 3"];
  • Benefits: We have two clean arrays, each containing the same type of data
  • Drawbacks: It could get difficult to ensure that they stay in order if we added/removed a friend/day.

In the end, there really is no “Great” solution unless scholars chose to use a JavaScript object. But again, that was the point of this Warm Up!

Try It: Array or Object?

For each set of data, would an array or object be better to store it? Why?

  • List of all of the students in class - If it’s just names, array because they are all the same data type and they don’t need a label.
  • List of states and their capitals - Object - the state can be the key and the capital can be the value. The state and capital have a relationship with each other so need to be grouped together.
  • List of things to pack for vacation - An object would allow you to have a key of an item (socks) and the value would be the number of socks. An array might also work, depending on your needs.
  • Names of all the Instagram accounts I follow - Since it’s just a list of names, an array.
  • List of scholars and the school they attend - An object because there is an associative relationship.
  • Ingredients and amount of each ingredient to bake a cake - Since I want each ingredient to be associated with the amount, an object would be best
  • All my favorite restaurants - If it’s just a list, and array would do. If I wanted to categorize by type of food, maybe I would use an object. The key could be a string of the type and the value could be an array holding all the restaurant names of that type.

Try It: Creating and Accessing Objects

Declare a variable called myInfo that stores an object. This object should have key/value pairs for your name, birthday, and two other facts about you!

var myInfo = {
  "name": "Lisa",
  "birthday": "June 23",
  "hobbies": "Sports!",
  "dogs": "Mason + Tucker"
}

console.log() the object to verify your syntax is correct and that the object can print out. Then, use a console.log() to practice accessing specific pieces of data. Try to print your birthday with dot notation.

console.log(myInfo);
console.log(myInfo.name);
console.log(myInfo.birthday);
console.log(myInfo.hobbies);
console.log(myInfo.dogs);

Practice: Objects

Create an object with keys that are family or friend titles (i.e. “sister”, “bestFriend”) and values that are the name of that family member or friend. Pets are family, too!

var familyTree = {
  "middleSister": "Juliana",
  "oldestSister": "Megan",
  "aunt": "Emily",
  "bestFriend": "Lindsey",
  "firstDog": "Sodie",
  "secondDog": "Oscar"
}

Print to the console the entire object

console.log(familyTree);

Print to the console 3 individual names

console.log(familyTree.middleSister);
console.log(familyTree.aunt);
console.log(familyTree.secondDog);

Medium Challenge: If you have more than one family member or friend who could have the same key, you might be back in a similar situation that we were in the Warm Up for the array lesson - with variables like sister1, sister2, etc. Instead of only having strings of names as the values in your object, write at least one array of strings for those family members or friends who share a title.

var familyTree = {
  "sisters": ["Juliana", "Megan"],
  "aunt": "Emily",
  "bestFriend": "Lindsey",
  "dogs": ["Sodie", "Oscar"]
}

Spicy Challenge: Reference a site like Instagram or Twitter. Look for one card on the page and write a JavaScript object that holds all the information on that card.

From Instagram - a post from a user:

var instaPost = {
  "username": "cutenessofig",
  "images": []"file path would go here", "other file path"],
  "timestamp": "March 13, 2020",
  "caption": "Two arguments why polar bears are awesome. Can you handle the cuteness?",
  "likes": 626,
  "comments": ["❤️❤️", "🔥😍"]
}