Javascript · Objects
A First Look at this
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — A Method That Knows Its Object
In the last chapter, the bag's methods wrote `bag.items`. It works, but the method depends on the variable name `bag`. Rename the variable and everything breaks. There's a better way:
const zap = {
name: "Zap",
introduce() {
console.log("I am " + this.name + "!");
}
};
zap.introduce();
Inside a method, `this` means the object the method was called on. `this.name` is the `name` of that object. The method doesn't need to know the variable is called `zap`.
Exercise 2 — this Follows the Object
Two objects can have the exact same method. Each call, `this` points to whichever object is in front of the dot:
const aquachu = {
name: "Aquachu",
type: "water",
describe() {
console.log(this.name + " is a " + this.type + " type");
}
};
const pyrochu = {
name: "Pyrochu",
type: "fire",
describe() {
console.log(this.name + " is a " + this.type + " type");
}
};
aquachu.describe();
pyrochu.describe();
object.method();
// inside method, this === object
Exercise 3 — Quiz: Who Is this?
What does this code print?
const metachu = {
level: 12,
show() {
console.log(this.level);
}
};
metachu.show();
Options
• ```12```
• ```undefined```
• ```this.level```
• An error
Hint : Look at which object is in front of the dot in the call.
Exercise 4 — Describe Yourself
Complete the method so it works whatever the object is called.
const florachu = {
name: "Florachu",
level: 4,
describe() {
return ____.name + " (level " + ____.level + ")";
}
};
console.log(florachu.describe());
Options: this this florachu self object
Hint : The method must refer to its own object without naming the variable.
Exercise 5 — Modifying With this
`this` isn't just for reading. A method can change its own object's properties, which is how objects update themselves:
const zap = {
name: "Zap",
level: 3,
levelUp() {
this.level++;
console.log(this.name + " reached level " + this.level);
}
};
zap.levelUp();
zap.levelUp();
Each call changes the real `zap.level`. Methods that read and write `this` are the heart of how objects work in JavaScript.
Exercise 6 — Quiz: After Two Calls
What does the last line print?
const rockachu = {
hp: 50,
rest() {
this.hp += 15;
}
};
rockachu.rest();
rockachu.rest();
console.log(rockachu.hp);
Options
• ```80```
• ```65```
• ```50```
• ```15```
Hint : Each call adds to the object's own property.
Exercise 7 — Heal Method
Complete the method so it adds the amount to the object's own HP.
const aquachu = {
name: "Aquachu",
hp: 30,
heal(amount) {
____.hp ____ amount;
}
};
aquachu.heal(25);
console.log(aquachu.hp);
Options: this += = self aquachu
Hint : Refer to the object without naming it, and add rather than replace.
Exercise 8 — this and Arrays
`this` works with every kind of property, including arrays. Here the bag from the previous chapter, rewritten properly:
const bag = {
items: ["Potion"],
add(item) {
this.items.push(item);
},
count() {
return this.items.length;
}
};
bag.add("Map");
bag.add("Rope");
console.log(bag.count());
`this.items` is the array, then `.push(...)` or `.length` act on it. Now the bag would keep working even if the variable were renamed.
Exercise 9 — this Cheat Sheet
Match each expression with its meaning inside a method called as `zap.method()`.
Items to match
• this
• this.hp
• this.hp++
• this.moves.push(x)
Definitions
• The zap object
• The hp property of zap
• Modifies zap's hp
• Adds x to zap's moves array
Exercise 10 — A Codémon That Manages Itself
Give Pyrochu two methods that use its own properties.
1. `takeDamage(amount)` lowers its HP by the amount, never below 0, then prints `"Pyrochu has X HP left"`
2. `isAlive()` returns `true` if HP is above 0
3. Make Pyrochu take 30 damage, then 40, then print `"Alive? X"` using the second method
Starter code
const pyrochu = {
name: "Pyrochu",
hp: 60,
// Write your methods here
};
// Use Pyrochu here