Object Literals

Back

Learning Goals

  • Use JavaScript syntax to declare variables that store Object Literals
  • Access data from JavaScript Object Literals

Vocabulary

  • Object Literal
  • key
  • key-value pair
  • value

Warm Up

Look at the following array and take a moment to consider: What is problematic about it? How would you prefer to structure a list of students and such information?

var students = ["Cristie Soto", "A+", "B", "in progress", true, "Oscar Smith", "A-", "D", "dropped", true];



Object Literals

Object Literals (Objects) allow us to structure data in a different way than Arrays. It’s not better; it’s just different. Like an Array, an Object is a data structure used for representing a collection of things. But whereas an Array generally represents a list of ordered, indexed values, an Object represents a collection of named values. These names are called keys, and each key has a corresponding value. In an Object, we can insert data by assigning it to a name and later retrieving it using the same name.

Some languages call their Objects dictionaries for this reason – you look up a word (the label) to retrieve its definition (the data or value with which the label was associated).

Object Syntax

  • An objetc is enclosed in curly braces { }, key-value pairs are separated by commas, and keys and values are separated by a colon.
  • Each key in an object must be unique
    • If you attempt to have duplicate keys when you first create an object, you won’t get any sort of indicator that you’ve done so, but the only value that will be stored is that of the last value assigned to a duplicate key.
    • If you try to add a new key-value pair using a key that already exists, that new key-value pair will overwrite the previous one - dangerous.
  • Keys and values can be any of any data type:
    var student1 = {
      name: "Christie Soto",
      grades: ["A+", "B", "in progress"],
      activeStudent: true
    }
    
  • Values can be accessed with dot notation:
    • student1.name returns "Christie Soto"

Object or Array?

For each example, determine if an Object or Array would be more appropriate, and explain why. Share your responses in the Slack small group channel for feedback and discussions.

  • A store's inventory
  • The contents of a dishwasher
  • List of all the places you've traveled to
  • List of birthdays of all students
  • Names of all dogs at doggie daycare
  • Virtual address book
  • Items of clothing in a dresser


Object Syntax Practice

Complete the following work in a replit or a new JavaScript file in Atom:

  1. For one of the examples in the previous activity that you selected would be best suited for an Object, declare a variable that stores an Object with some (possibly fake) data.
  2. Declare a variable that stores an Object that represents this tweet.

Take a screenshot or save in this work in a file and be ready to share it in Stand Up tomorrow!

Accessing an Object

The examples below explore the suitcase Object:

var suitcase = { 
  socks: 4,
  jeans: 1
};

Did we put any jackets on our list? Let’s check:

suitcase.jackets;
// => nundefined

We can create a new key-value pair:

suitcase.shirts = 3;
suitcase.swimsuits = true;

We can remove the socks:

delete suitcase("socks");

Check on the shirts:

suitcase.shirts;
// => 3

Let’s check what keys are in our Object:

Object.keys(suitcase);
// => ["jeans", "shirts", "swimsuit"]

Let’s check what values are in our Object:

Object.values(suitcase);
// => [1, 3, true]

Note that when we use the Object.keys and Object.values methods, the return value of each is an Array!

Object Syntax and Access Practice

Use the following zoo variable to complete each prompt:

  var zoo = {
    giraffes: 3,
    zebras: 12,
    hippos: 2
  };
  
  1. Print all of the keys of the zoo Object
  2. Print all of the values of the zoo Object
  3. Print the value of the first animal of the zoo
  4. Add an animal to the zoo
  5. Check how many monkeys are in the zoo
  6. Add another animal to the zoo
  7. Print all of the keys of the zoo Object


Check For Understanding

Complete the work in the CFU repository and submit your work using the submission form.





Back