Javascript · Objects
Nested Objects
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Objects Inside Objects
A property value can itself be an object. A trainer has a starter Codémon, and that Codémon has its own properties:
const trainer = {
name: "Sam",
starter: {
name: "Aquachu",
level: 5
}
};
console.log(trainer.name);
console.log(trainer.starter.name);
console.log(trainer.starter.level);
Read the chain from left to right: `trainer.starter` is an object, then `.name` reads inside it. You can chain as many dots as there are levels.
Exercise 2 — Arrays of Objects
The most common combination: an array whose elements are objects. A whole team, each member with its own card:
const team = [
{ name: "Aquachu", level: 5 },
{ name: "Pyrochu", level: 8 },
{ name: "Zap", level: 3 }
];
console.log(team[1].name);
console.log(team.length);
`team[1]` is the second object, then `.name` reads its name. And since it's an array, `for...of` visits each object:
const team = [
{ name: "Aquachu", level: 5 },
{ name: "Pyrochu", level: 8 },
{ name: "Zap", level: 3 }
];
for (let cdm of team) {
console.log(cdm.name + " is level " + cdm.level);
}
Exercise 3 — Quiz: Deep Read
What does this code print?
const trainer = {
name: "Lea",
starter: {
name: "Florachu",
level: 6
}
};
console.log(trainer.starter.level);
Options
• ```6```
• ```"Florachu"```
• ```undefined```
• ```"Lea"```
Hint : Follow the dots one at a time, entering each object.
Exercise 4 — Reach the Starter
Print the name of the trainer's starter.
const trainer = {
name: "Sam",
starter: {
name: "Aquachu",
level: 5
}
};
console.log(trainer____starter____name);
Options: . . [ ] ->
Hint : Each level of nesting needs its own separator.
Exercise 5 — Modifying Nested Values
Writing works the same way as reading: chain down to the value, then assign. The starter levels up:
const trainer = {
name: "Sam",
starter: {
name: "Aquachu",
level: 5
}
};
trainer.starter.level += 1;
console.log(trainer.starter.level);
And when a property is an array, its methods are all available. A new Codémon joins the trainer's team:
const trainer = {
name: "Sam",
team: [
{ name: "Aquachu", level: 5 }
]
};
trainer.team.push({ name: "Zap", level: 3 });
console.log(trainer.team.length);
console.log(trainer.team[1].name);
Exercise 6 — Quiz: Nested Update
What does the last line print?
const trainer = {
starter: {
hp: 40
}
};
trainer.starter.hp -= 15;
console.log(trainer.starter.hp);
Options
• ```25```
• ```40```
• ```15```
• ```undefined```
Hint : The chain leads to a number that gets modified in place.
Exercise 7 — Team Roll Call
Print each member's name and HP.
const team = [
{ name: "Aquachu", hp: 40 },
{ name: "Zap", hp: 25 }
];
for (let cdm ____ team) {
console.log(cdm____name + ": " + cdm.hp + " HP");
}
Options: of . in [ ]
Hint : The loop over an array's values, then a plain property read on each object.
Exercise 8 — Going Deeper, and a Trap
Objects in arrays in objects: chains can get long. Read them step by step, one link at a time:
const trainer = {
name: "Sam",
team: [
{ name: "Aquachu", moves: ["Splash", "Wave"] },
{ name: "Zap", moves: ["Spark"] }
]
};
console.log(trainer.team[0].moves[1]);
console.log(trainer.team[1].moves.length);
Careful with a link that doesn't exist: `trainer.rival` is `undefined`, and asking `undefined` for `.name` is an error, not another `undefined`.
const trainer = {
name: "Sam"
};
console.log(trainer.rival);
console.log(trainer.rival.name); // This will throw an error
Exercise 9 — Nesting Cheat Sheet
Match each expression with its meaning.
Items to match
• a.b.c
• list[0].name
• a.items.push(x)
• a.missing.x
Definitions
• Property c of the object stored in b
• The name of the first object in list
• Adds x to the array stored in items
• An error: missing is undefined
Exercise 10 — Trainer Profile
Print Sam's profile from the nested data.
1. Print `"Trainer Sam has N Codémon"` using the trainer's name and team size
2. For each team member, print `"- name (level X)"`
3. Print `"Strongest: name"` with the member that has the highest level
4. Print `"Total HP: N"` with the sum of all members' HP
Starter code
const trainer = {
name: "Sam",
team: [
{ name: "Aquachu", level: 5, hp: 40 },
{ name: "Pyrochu", level: 8, hp: 55 },
{ name: "Zap", level: 3, hp: 25 }
]
};
// Write your code here