Javascript · Objects
Adding and Modifying Properties
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Changing a Value
Reading uses `zap.level`. Writing is the same with `=`: you assign a new value to the property. Zap levels up:
const zap = {
name: "Zap",
level: 3
};
zap.level = 4;
console.log(zap.name + " is now level " + zap.level);
The usual shortcuts work too: `+=`, `-=`, `++`...
const zap = {
name: "Zap",
hp: 45
};
zap.hp -= 20; // takes a hit
zap.hp += 5; // small heal
console.log(zap.hp);
Exercise 2 — Adding a New Property
Assigning to a key that doesn't exist yet doesn't fail: it creates the property. Zap gets a nickname:
const zap = {
name: "Zap",
level: 3
};
zap.nickname = "Zappy";
console.log(zap.nickname);
Before the assignment, `zap.nickname` was `undefined`. After it, the object has three properties. Remember: `const` doesn't prevent this, it only blocks `zap = ...`.
Exercise 3 — Quiz: After Training
What does this code print?
const pyrochu = {
level: 7
};
pyrochu.level += 2;
pyrochu.level++;
console.log(pyrochu.level);
Options
• ```10```
• ```9```
• ```7```
• ```8```
Hint : Apply the two changes one after the other.
Exercise 4 — Level and Nickname
Set the level to 8, then add a `nickname` property worth `"Flame"`.
const pyrochu = {
name: "Pyrochu",
level: 7
};
pyrochu.level ____ 8;
pyrochu.____ = "Flame";
console.log(pyrochu.level);
console.log(pyrochu.nickname);
Options: = nickname "nickname" === level
Hint : Replacing and creating both use plain assignment, and the key after a dot is written bare.
Exercise 5 — Writing With Brackets
Brackets work for writing too, with the same advantage: the key can come from a variable.
const zap = {
name: "Zap"
};
let stat = "speed";
zap[stat] = 30;
console.log(zap.speed);
Handy when the key is decided while the program runs, like a stat chosen by the player.
const boosts = {};
const chosen = ["attack", "speed"];
for (let stat of chosen) {
boosts[stat] = 10;
}
console.log(boosts.attack);
console.log(boosts.speed);
console.log(boosts.hp);
Exercise 6 — Quiz: New Key
`zap` has no `hp` property. What does `zap.hp = 50;` do?
Options
• Creates the hp property with value 50
• Throws an error
• Does nothing
• Replaces the name property
Hint : Assignment to a missing key is not a mistake for JavaScript.
Exercise 7 — Dynamic Boost
Use the `stat` variable to add 15 to the matching property.
const zap = {
attack: 20,
speed: 30
};
let stat = "attack";
zap____stat____ ____ 15;
console.log(zap.attack);
Options: [ ] += . =
Hint : A variable key needs one specific notation, and adding to a value has its own operator.
Exercise 8 — Arrays Inside Objects
When a property holds an array, everything you know about arrays applies to it. Zap learns a new move:
const zap = {
name: "Zap",
moves: ["Spark"]
};
zap.moves.push("Thunder");
console.log(zap.moves.length);
console.log(zap.moves[1]);
Read it left to right: `zap.moves` is the array, then `.push(...)` acts on that array. The same goes for `zap.moves.length` or `zap.moves[1]`.
Exercise 9 — Writing Cheat Sheet
Match each line with its effect. `obj` has a `hp` property but no `mana` property.
Items to match
• obj.hp = 10
• obj.mana = 10
• obj[key] = 10
• obj.moves.push(x)
Definitions
• Replaces the value of hp
• Creates the mana property
• Writes the property named in key
• Adds x to the moves array
Exercise 10 — Level Up!
Zap just won a battle.
1. Increase its level by 1 and its HP by 10
2. It learns `"Thunder"`: add it to its moves
3. Add a new property `wins` worth 1
4. Print `"Zap: level X, Y HP, Z moves, W win(s)"` with the updated values
Starter code
const zap = {
name: "Zap",
level: 3,
hp: 45,
moves: ["Spark"]
};
// Write your code here