Objects

Back to Lesson Index

🎯 Learning Goals

• Create an object and access data from them
• Understand why we sometimes choose to use objects over arrays (and vice versa)

📗 Technical Vocabulary

• Collection
• Dot Notation
• Key/value pair
• Object

🐣 Warm Up

Pretend you are going to create an app that has a feature that reminds you of friends birthdays. Somewhere in the program, you need to store names and birthdays.

With your breakout group, brainstorm at least one way that you could store a list of both names and birthdays.

Be ready to share out:

• What you came up with
• The benefits of this solution
• The drawbacks of this solution

🌎 Objects

An Object is another complex data type available in JavaScript. Objects, like Arrays, can be classified as collections. There is, however, one big difference between them and arrays: Objects are not ordered by index (0, 1, 2, etc.). Instead, each piece of data has a ‘label’ instead of a number. We call the labels keys and the data values. key/value pairs is a term you will hear a lot.

When to use Objects

We just got the hang of arrays and are feeling pretty great about them - when/why do we also need objects?

• When we don’t care about the order of items (array)
• When we need an associative relationship (title for some info)

If I wanted to make a list of the handles of all my favorite creators on TikTok, I should use an array. They are all strings, and they are all holding the same type of information. I don’t care about the number of followers they have, if they are verified, or anything else.

If I wanted to make a list of the handles of all my favorite creators on TikTok and their number of followers, I should use an object. There is an associative relationship between each creator and their follower count.

Syntax

Momofuku is creating a digital version of all of their recipes, including The Perfect 10, a delicious & healthy Kookie that Karlie herself created! Each recipe has a set of ingredients with the needed amount and a list of instructions. For now, let’s focus on organizing the ingredients and amounts.

We will store the list of ingredients in a JavaScript object because we want to make sure that each ingredient is associated with the amount of it that we need. The key will be the ingredient name, and the value will be the amount. We can then create a variable to store the data in called perfectTen.

var perfectTen = {
  almondFlour: "3 and 1/2 cups",
  glutenFreeOats: "2 cups",
  miniChocolateChips: "1 cup"
}

Syntax Takeaways:

• All keys should be written in camelCase and should not be enclosed in quotes.
• To indicate that the key name has ended and the value will be provided next, we use a colon :
• A value can be a string, number, boolean, array, or another object. For the most part, we will use strings and numbers. All values in one object do not have to be the same data type.
• A comma separates each key/value pair.

Access a Value

To access a value in a specific object, we have to first tell the program which object to look at. Then we use a period ., then call the key, or label, associated with the value we want to access.

console.log(perfectTen.almondFlour);
//=> 3 and 1/2 cups

console.log(perfectTen.miniChocolateChips);
//=> 1 cup

The syntax used above to access a value is called dot notation.

Updating, Adding & Removing Data

We won’t go into detail on how to do this here, as it likely won’t be used during camp. If you are curious to learn more or find yourself needing a resource while working on your personal project, here are a couple of resources you might want to check out:

• JavaScript Info
• Free Code Camp

Objects IRL

Similar to arrays, it’s very likely that every application you’ve used utilized objects in the code that built it.

In the array lesson, we talked about how TikTok used an array to store info about popular creators. They probably didn’t just have an array of names since they should hold several pieces of information about each creator. The array probably looks more like this in the code:

var trending = [
  {
    name: "Evan The Card Guy",
    handle: "@thecardguy",
    followers: 7000000,
    tagline: "100k on YouTube? 👆 insta: evanthecardguy 📧 evanthecardguy@gmail.com"
  },
  {
    name: "Spencer X",
    handle: "@Spencerx",
    followers: 13800000,
    tagline: "🗣 Mouth Music Man 🎶 Follow me on IG and YouTube :) 👇🏼👆🏼"
  },
  {
    name: "Avani",
    handle: "@avani",
    followers: 7100000,
    tagline: "if you don’t love me i love you MERCHANDISE IS OUT!! - FANJOY.CO/AVANI"
  },
  {
    name: "Loren Grey",
    handle: "@lorengrey",
    followers: 36700000,
    tagline: "No bio yet."
  },

];

Or, for a more visual representation:

There are still 4 elements in this array, but each element is now an object, so there are many more lines of code! We may or may not need an array that has so many moving pieces; this piece of the lesson is just intended to help you make a real-life connection.

Putting It All Together

Objects have a little more going on than strings or numbers, but you now have the information you need about them!

Back to Lesson Index