Javascript · Objects
Accessing Properties (dot vs brackets)
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Dot Notation
The most common way to read a property: the object, a dot, the key. You've already used it, here it is in full:
const zap = {
name: "Zap",
type: "electric",
level: 3
};
console.log(zap.name);
console.log(zap.type);
console.log("Level " + zap.level);
A property value behaves like any value: store it in a variable, add it, compare it.
const zap = {
name: "Zap",
level: 3
};
let nextLevel = zap.level + 1;
if (zap.level < 5) {
console.log(zap.name + " is still a rookie, next: " + nextLevel);
}
Exercise 2 — Bracket Notation
The second way uses square brackets with the key as a string. It does exactly the same thing as the dot:
const zap = {
name: "Zap",
level: 3
};
console.log(zap["name"]);
console.log(zap["level"]);
So why two notations? Brackets can do things the dot can't: reading a key with a space, for instance.
const rockachu = {
name: "Rockachu",
"max hp": 80
};
console.log(rockachu["max hp"]);
Avoid keys with spaces
It works, but we advise against it: a key like `"max hp"` forces the bracket notation everywhere and is easy to mistype. Prefer camelCase, `maxHp`, which works with the dot and reads like a normal variable name.
Exercise 3 — Quiz: Read It
What does this code print?
const metachu = {
name: "Metachu",
level: 12,
hp: 90
};
console.log(metachu.level);
Options
• ```12```
• ```90```
• ```"level"```
• ```undefined```
Hint : Find the key after the dot, then read its value.
Exercise 4 — Two Notations
Print the name with the dot, then the max HP with the brackets.
const aquachu = {
name: "Aquachu",
"max hp": 70
};
console.log(aquachu____name);
console.log(aquachu____"max hp"____);
Options: . [ ] ( )
Hint : A key with a space forces the notation that takes a string.
Exercise 5 — Keys From Variables
The real power of brackets: the key can come from a variable. The dot can't do that at all.
const zap = {
name: "Zap",
level: 3,
hp: 45
};
let stat = "hp";
console.log(zap[stat]);
stat = "level";
console.log(zap[stat]);
With the dot, `zap.stat` would look for a property literally called `stat`, which doesn't exist:
const zap = {
name: "Zap",
hp: 45
};
let stat = "hp";
console.log(zap[stat]);
console.log(zap.stat);
Exercise 6 — Quiz: Dot and Variable
What does this code print?
const pyrochu = {
type: "fire",
level: 7
};
let prop = "type";
console.log(pyrochu.prop);
Options
• ```undefined```
• ```"fire"```
• ```"type"```
• An error
Hint : With a dot, the word after it is taken literally.
Exercise 7 — Properties That Don't Exist
Asking for a key the object doesn't have gives `undefined`, without any error. Watch out for typos: `zap.nmae` is just a missing key to JavaScript.
const zap = {
name: "Zap",
level: 3
};
console.log(zap.hp);
console.log(zap.nmae);
You can test for it before using a value:
const zap = {
name: "Zap",
level: 3
};
if (zap.hp === undefined) {
console.log("No HP recorded for " + zap.name);
} else {
console.log("HP: " + zap.hp);
}
Exercise 8 — Which Stat?
Use the `stat` variable to read the matching property.
const zap = {
hp: 45,
attack: 20,
speed: 30
};
let stat = "speed";
console.log(stat + ": " + zap____stat____);
Options: [ ] . " (
Hint : Only one notation accepts a variable as the key.
Exercise 9 — Dot vs Brackets
Match each expression with its meaning.
Items to match
• zap.name
• zap["name"]
• zap[key]
• zap.missing
Definitions
• Reads the name property
• Same as the dot
• Reads the property whose name is in key
• undefined
Exercise 10 — Quiz: Same Thing
Which expression is equivalent to `zap.name`?
Options
• ```zap["name"]```
• ```zap[name]```
• ```zap("name")```
• ```zap.[name]```
Hint : Inside the brackets, the key must be text.
Exercise 11 — Stat Sheet
Print Zap's stat sheet using the `stats` array to choose which properties to read.
1. Print `"=== Zap ==="` using the object's name
2. For each key in `stats`, print `"key: value"`, for example `"hp: 45"`
3. The code must keep working if a stat is added to both the object and the array
Starter code
const zap = {
name: "Zap",
hp: 45,
attack: 20,
speed: 30
};
const stats = ["hp", "attack", "speed"];
// Write your code here