Javascript · Functions (Advanced)
Arrow vs Regular Functions
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Three Ways, One Function
You now know three ways to create the same function. Here they are side by side:
function addA(a, b) {
return a + b;
}
const addB = function (a, b) {
return a + b;
};
const addC = (a, b) => a + b;
console.log(addA(1, 2));
console.log(addB(1, 2));
console.log(addC(1, 2));
All three are called the same way and give the same result. The differences are about when you can call them and how they behave inside objects.
Exercise 2 — Difference 1: Hoisting
Only declarations can be called before their line, because JavaScript reads them first. This works:
console.log(declared(2));
function declared(n) {
return n * 10;
}
Expressions and arrow functions are variables: they only exist from their line onward. Calling one too early is an error:
// console.log(arrow(2)); // Uncomment this line to see the error!
const arrow = (n) => n * 10;
console.log(arrow(2));
Rule of thumb: with arrows and expressions, define first, call after.
Exercise 3 — Difference 2: this
In a method written with the short syntax, `this` is the object. An arrow function has no `this` of its own, so it can't see the object's properties. That makes arrows a bad choice for methods:
const zap = {
level: 3,
good() {
return "Level " + this.level;
},
bad: () => {
return "Level " + this.level;
}
};
console.log(zap.good());
console.log(zap.bad());
The arrow version prints `undefined` for the level. Keep the method shorthand for anything that needs `this`.
Exercise 4 — Quiz: Method Choice
You're writing a method that must read `this.hp`. Which form should you use?
Options
• ```heal() { this.hp += 10; }```
• ```heal: () => { this.hp += 10; }```
• Either one works the same
• Neither can use this
Hint : One of the two forms doesn't have its own this.
Exercise 5 — When to Use Which
There is no single right answer, but here's a simple guide that matches most modern code:
The last row is where arrows truly shine, and it's the subject of the rest of this class.
Exercise 6 — Pick the Right Form
Complete the object so that `describe` can read the object's own properties.
const zap = {
name: "Zap",
level: 3,
describe____ {
return ____.name + " Lv." + this.level;
}
};
console.log(zap.describe());
Options: () this : () => self zap
Hint : Only the method shorthand gives access to the object through the usual keyword.
Exercise 7 — Quiz: Same Result?
What does this code print?
const a = function (n) {
return n + 1;
};
const b = (n) => n + 1;
console.log(a(1) === b(1));
Options
• ```true```
• ```false```
• ```2```
• ```undefined```
Hint : Compute both results, then compare them.
Exercise 8 — Arrow vs Regular
Match each property with the right form.
Items to match
• Can be called before its line
• Has no this of its own
• Allows implicit return
• Uses the function keyword
Definitions
• Declaration
• Arrow function
• Arrow function
• Declaration or expression
Exercise 9 — Fix the Object
This Codémon object is broken: its methods were written as arrow functions, so `this` doesn't work. Rewrite the two methods with the method shorthand so they can use the object's properties. Don't change anything else.
Pyrochu has 50 HP
Pyrochu has 30 HP
Starter code
const pyrochu = {
name: "Pyrochu",
hp: 50,
status: () => {
console.log(this.name + " has " + this.hp + " HP");
},
takeDamage: (amount) => {
this.hp -= amount;
}
};
pyrochu.status();
pyrochu.takeDamage(20);
pyrochu.status();