Javascript · Objects
Methods (Functions Inside Objects)
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — A Function as a Property
A property value can be anything... including a function. A function stored in an object is called a method. You call it with a dot, like reading a property, plus parentheses:
const aquachu = {
name: "Aquachu",
speak: function () {
console.log("Aqua aqua!");
}
};
aquachu.speak();
You've been using methods since the beginning: `team.push()`, `moves.includes()`... Now you know what they are: functions that belong to an object.
Exercise 2 — The Short Syntax
Writing `speak: function () {` works, but JavaScript offers a shorter form: drop the colon and the `function` keyword. This is the modern way, and the one you'll use from now on:
const aquachu = {
name: "Aquachu",
speak() {
console.log("Aqua aqua!");
}
};
aquachu.speak();
const obj = {
methodName() {
// code
}
};
Exercise 3 — Quiz: Call the Method
Which line runs the `attack` method of `zap`?
Options
• ```zap.attack();```
• ```zap.attack;```
• ```attack(zap);```
• ```zap[attack]();```
Hint : A method is called like a function, but through its object.
Exercise 4 — Buzz!
Give Zap a `buzz` method that prints `Bzzt!`, then call it.
const zap = {
name: "Zap",
____() {
console.log("Bzzt!");
}
};
zap.____();
Options: buzz buzz "buzz" function
Hint : The name in the object and the name in the call must be identical, and neither uses quotes.
Exercise 5 — Parameters and return in Methods
A method is a function, so it can take parameters and return a value, exactly like the functions from the previous class:
const healer = {
name: "Nurse Joy",
heal(hp, amount) {
return hp + amount;
}
};
let newHP = healer.heal(30, 25);
console.log(newHP);
And a method can print, compute, loop... anything a function can do:
const announcer = {
introduce(names) {
for (let name of names) {
console.log(name + " enters the arena!");
}
}
};
announcer.introduce(["Aquachu", "Zap"]);
Exercise 6 — Quiz: Returned by a Method
What does this code print?
const calc = {
double(n) {
return n * 2;
}
};
console.log(calc.double(21));
Options
• ```42```
• ```21```
• ```undefined```
• ```n * 2```
Hint : Same rules as any function with a return.
Exercise 7 — Data and Behaviour Together
An object can hold both data (properties) and behaviour (methods). Reading a property has no parentheses, calling a method does:
const zap = {
name: "Zap",
level: 3,
describe() {
return "An electric Codémon";
}
};
console.log(zap.name);
console.log(zap.level);
console.log(zap.describe());
Forget the parentheses and you get the function itself instead of its result, just like `train;` without `()` in the previous class.
Exercise 8 — Burn!
Complete the method so it returns the message, then call it on Florachu.
const pyrochu = {
name: "Pyrochu",
attack(target) {
____ "Pyrochu burns " + target + "!";
}
};
console.log(pyrochu.____("Florachu"));
Options: return attack console.log burn target
Hint : The message must come back to the console.log outside, and the call uses the method's name.
Exercise 9 — Property or Method?
Match each expression with what it gives.
Items to match
• zap.level
• zap.attack()
• zap.attack
• attack() { }
Definitions
• The value of a property
• The result of running the method
• The function itself, not run
• Declares a method (short syntax)
Exercise 10 — Quiz: Missing Parentheses
What does this code print?
const zap = {
roar() {
return "ZAAAP!";
}
};
let sound = zap.roar;
console.log(sound === "ZAAAP!");
Options
• ```false```
• ```true```
• ```ZAAAP!```
• An error
Hint : Without parentheses, what does `sound` receive?
Exercise 11 — The Bag Object
Build a bag that manages its own items. It has an `items` array and three methods:
1. `add(item)` puts the item at the end of `bag.items` and prints `"Picked up X"`
2. `count()` returns the number of items
3. `last()` returns the last item
4. Add `"Potion"` then `"Map"`, then print `"Items: N"` and `"Last: X"` using the methods
Starter code
const bag = {
items: [],
// Write your methods here
};
// Use the bag here