Javascript · Objects
Looping with for...in
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Looping Over the Keys
Arrays have `for...of` to visit every value. Objects have `for...in`, which visits every key:
const stats = {
hp: 45,
attack: 20,
speed: 30
};
for (let key in stats) {
console.log(key);
}
At each turn, `key` holds the name of a property, as a string: `"hp"`, then `"attack"`, then `"speed"`.
for (let key in object) {
// key is each property name, one after the other
}
Exercise 2 — Key and Value
To get the value that goes with the key, use the bracket notation: the key is a variable, so the dot won't work.
const stats = {
hp: 45,
attack: 20,
speed: 30
};
for (let key in stats) {
console.log(key + ": " + stats[key]);
}
This is the classic way to display an entire object, whatever its properties are. Add a property to `stats` and run again: it shows up automatically.
Exercise 3 — Quiz: What Is Printed?
What does this code print?
const zap = {
name: "Zap",
level: 3
};
for (let k in zap) {
console.log(k);
}
Options
• ```name``` then ```level```
• ```Zap``` then ```3```
• ```0``` then ```1```
• ```undefined```
Hint : This loop gives you the property names, not their contents.
Exercise 4 — Show Every Stat
Complete the loop so it prints each stat with its value.
const stats = {
hp: 45,
attack: 20
};
for (let ____ in stats) {
console.log(key + ": " + stats____key____);
}
Options: key [ ] . of
Hint : The loop variable is used in the body, and a variable key requires one specific notation.
Exercise 5 — for...in vs for...of
Easy to mix up, so here is the rule: `for...of` gives the values of an array, `for...in` gives the keys of an object.
const team = ["Aquachu", "Pyrochu"];
for (let cdm of team) {
console.log("of: " + cdm);
}
for (let index in team) {
console.log("in: " + index);
}
Using `for...in` on an array gives the indexes as strings, which is rarely what you want. Keep `of` for arrays and `in` for objects.
Dot inside for...in
`stats.key` inside the loop looks for a property literally named `key`. Always use `stats[key]`.
Exercise 6 — Quiz: The Dot Trap
What does this code print at each turn?
const stats = {
hp: 45,
speed: 30
};
for (let key in stats) {
console.log(stats.key);
}
Options
• ```undefined``` twice
• ```45``` then ```30```
• ```hp``` then ```speed```
• An error
Hint : The dot doesn't look inside the variable.
Exercise 7 — Counting and Summing
Since `for...in` visits every property, you can count them with a counter:
const zap = {
name: "Zap",
type: "electric",
level: 3
};
let count = 0;
for (let key in zap) {
count++;
}
console.log("Properties: " + count);
Or add up the values, exactly like the total of an array:
const stats = {
hp: 45,
attack: 20,
speed: 30
};
let total = 0;
for (let key in stats) {
total += stats[key];
}
console.log("Total: " + total);
Exercise 8 — Total Power
Add up every stat into `total`.
const stats = {
attack: 20,
defense: 15,
speed: 30
};
let total = 0;
for (let stat in stats) {
total ____ stats[____];
}
console.log(total);
Options: += stat = "stat" total
Hint : Accumulate rather than replace, and read the value through the loop variable.
Exercise 9 — Two Loops, Two Uses
Match each element with its role.
Items to match
• for (let k in obj)
• for (let v of arr)
• obj[k]
• obj.k
Definitions
• Visits the keys of an object
• Visits the values of an array
• The value of the current key
• Looks for a property literally named k
Exercise 10 — Stat Report
Print a full report of Zap's stats.
1. Print `"Zap's stats:"`
2. Print each stat as `"key: value"`, one per line
3. Print `"Total: N"` with the sum of all values
4. Print `"Highest: key"` with the name of the stat that has the biggest value
Your code must keep working if stats are added to the object.
Starter code
const stats = {
hp: 45,
attack: 20,
defense: 15,
speed: 30
};
// Write your code here