Object-ception

Lesson objectives

After this lesson students will be able to:

1. Use an array inside an object

2. Iterate over an array that is within an object

3. Use an object within an object

4. Use an object within an object within an object

5. Use an array within an object within an object within an object

6. Use an array of objects

7. Use variables to store a key

8. Loop over an object

Use an array inside an object

Let's model an adventurer who has belongings (a list)

const adventurer = {
    name: "Timothy",
    hitpoints: 10,
    belongings: ["sword", "potion", "Tums"]
}

Access all values in the player.belongings array:

console.log(adventurer.belongings)

Access a specific item in the belongings array:

console.log(adventurer.belongings[0])

Iterate over an array that is within an object

for (let i=0; i < adventurer.belongings.length; i++) {
    console.log(adventurer.belongings[i]);
}

Activity

• Write an object for an adventurer and give the adventurer some belongings

• Access the belongings array and print the last element to the console

• Use .push() to add a "Vogue Magazine" to the belongings array

• Write a for loop that prints each element in the belongings array to the console

Use an object within an object

Our adventurer now has a companion! Our companion, a bat, is an object with its own properties.

Add the companion object to the adventurer object:

const adventurer = {
    name: "Timothy",
    hitpoints: 10,
    belongings: ["sword", "potion", "Tums"],
    companion: {
        name: "Velma",
        type: "Bat"
    }
}

Access the companion object:

console.log(adventurer.companion)

=> { name: "Velma", type: "Bat" }

Access the companion's name:

console.log(adventurer.companion.name)

=> "Velma"

Access the companion's type:

console.log(adventurer.companion.type)

=> "Bat"

Activity (3 min)

• Write the companion object into the adventurer object

• Print just the companion's name to the console

• Change the companion's name "Velma" to "Susan"

• Console.log to check that the name was changed

• Add another object to the adventurer object called companion2.

• companion2 should have a name and a type "Insect"

Use an object within an object within an object

Velma the bat also has a companion, a magical parasite called Tim.

Let's add Tim to our data:

const adventurer = {
    name: "Timothy",
    hitpoints: 10,
    belongings: ["sword", "potion", "Tums"],
    companion: {
        name: "Velma",
        type: "Bat"
        companion: {
            name: "Tim",
            type: "Parasite"
        }  
    }
}

What would you write to:

• console.log Tim's type

Use an array within an object within an object within an object

Tim has a bag of holding and can carry an infinite number of belongings.

Let's add an array of belongings to Tim:

const adventurer = {
    name: 'Timothy',
    hitpoints: 10,
    belongings: ["sword", "potion", "Tums"],
    companion: {
        name: "Velma",
        type: "Bat",
        companion: {
            name: "Tim",
            type: "Parasite",
            belongings: ["SCUBA tank", "Rogan josh", "health insurance"]
        }  
    }
}

What would be the code to access:

• console.log "health insurance"

Use an array of objects

A common pattern you will start to see everywhere (especially in Unit 2 and onwards) is an array of objects.

An array of objects can look like this:

const movies = [ { title: "Tokyo Story" },  { title: "Paul Blart: Mall Cop" }, { title: "L'Avventura" } ];

These objects have no names, they are just anonymous objects packed into an array.

You could reference them with indexes as usual:

console.log(movies[0]);

You could reference the properties by first asking for the index, then the property:

console.log(movies[0].title);

You could loop over the array and just print all of the titles:

for (let i=0; i < movies.length; i++) {
    console.log(movies[i].title);
}

Use variables to store a key

const monster =  {
    name: 'Slimer',
    age: 6
}

const someVar = 'name';

console.log(monster[someVar]);  // same as monster['name'];

=> 'Slimer'

Loop over an object

There are two way to loop over objects. You can use either way. Both ways involve looping over the object's keys.

Let's say we have a movie object:

const movie = { title: "L'Avventura", director: "Michelangelo Antonioni", year: 1960 }

for ... in loop

Print each key:

for (let key in movie) {
    console.log(key);
}

=>

title

director

year

Print each value:

To do this, use the key as a variable within the square brackets.

for (let key in movie) {
    console.log(movie[key]);
}

=>

L'Avventura

Michelangelo Antonioni

1960

Object.keys()

Object.keys() will return an array of keys

console.log(Object.keys(movie));

=> [ 'title', 'director', 'year' ]

To print the values, use the key as a variable within square brackets.

const keys = Object.keys(movie);

for (let i=0; i < keys.length; i++) {
    console.log(movie[keys[i]]);
}

Activity

Given the following movie:

const movie = { title: "Eraserhead", director: "David Lynch", year: 1978 }

• Use a for..in loop to print all the keys of the movie object

• Use a for..in loop to print all the values of the movie object

Advanced

With the following array of movie objects:

const movies = [
    { title: "L'Avventura", director: "Michelangelo Antonioni", year: 1960 },
    { title: "Eraserhead", director: "David Lynch", year: 1978 },
    { title: "Dayereh", director: "Jafar Panahi", year: 2000 },
    { title: "Dayereh", director: "Jafar Panahi", year: 2000 }
]

Create an empty object and assign it to a moviesObj variable. Leverage the fact that Keys are unique in an object. Loop over the movies array and add the movie titles as keys in the moviesObj object. This will consequently omit the duplicate movie. At the same time, give each movie key the value of an object containing the director and year. The final object should look like this:

{
    "L'Avventura": { director: "Michelangelo Antonioni", year: 1960 },
    "Eraserhead": { director: "David Lynch", year: 1978 },
    "Dayereh": { director: "Jafar Panahi", year: 2000 }
}

Tip: You might want to use this technique for the hardest part of tonight's homework.

• Use Object.keys loop to print all the values of the movie object.

This lesson was adapted from SEI-MAE