Javascript · Functions (Advanced)
Arrow Functions
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — A Shorter Way to Write Functions
Function expressions are a bit long to type. Modern JavaScript has a compact form: the arrow function. Same idea, no `function` keyword, and an arrow `=>` between the parameters and the body:
const cheer = () => {
console.log("Go Aquachu!");
};
cheer();
// Expression
const f = function (a, b) {
return a + b;
};
// Arrow: same thing
const f = (a, b) => {
return a + b;
};
Everything else stays the same: parameters between the parentheses, `return` in the body, and a normal call with `f(2, 3)`.
Exercise 2 — Parameters in Arrow Functions
With several parameters, or none, the parentheses are required:
const add = (a, b) => {
return a + b;
};
const sayHi = () => {
console.log("Hi!");
};
console.log(add(3, 4));
sayHi();
With exactly one parameter, you may drop the parentheses. Both forms below are valid:
const double = (n) => {
return n * 2;
};
const triple = n => {
return n * 3;
};
console.log(double(5));
console.log(triple(5));
Exercise 3 — Spot the Arrow
Which line is a valid arrow function?
Options
• ```const f = (x) => { return x + 1; };```
• ```const f = function (x) => { return x + 1; };```
• ```const f = (x) -> { return x + 1; };```
• ```const f = => (x) { return x + 1; };```
Hint : Parameters, then the arrow, then the body. No function keyword.
Exercise 4 — Arrow Heal
Write `heal` as an arrow function that returns the HP plus 20.
const heal = (hp) ____ {
____ hp + 20;
};
console.log(heal(30));
Options: => return -> function ==
Hint : One symbol makes it an arrow function, and the result still has to be sent back.
Exercise 5 — Implicit Return
Here's the real shortcut. When the body is a single expression, you can drop both the braces and the `return`: the expression's value is returned automatically.
const double = (n) => {
return n * 2;
};
// Same function, one line
const double = (n) => n * 2;
const double = (n) => n * 2;
const isAlive = (hp) => hp > 0;
const fullName = (first, last) => first + " " + last;
console.log(double(21));
console.log(isAlive(0));
console.log(fullName("Zap", "the Zappy"));
This is the form you'll see most often in modern code: short functions that compute one thing.
Exercise 6 — Quiz: One-Liner
What does this code print?
const square = (n) => n * n;
console.log(square(6));
Options
• ```36```
• ```undefined```
• ```n * n```
• ```12```
Hint : No braces means the expression is returned on its own.
Exercise 7 — Braces Mean Explicit Return
Classic trap: as soon as you write braces `{ }`, you're back to a normal body, and `return` is required again. Without it, the function returns `undefined`:
const broken = (n) => {
n * 2;
};
const fixed = (n) => {
return n * 2;
};
console.log(broken(5));
console.log(fixed(5));
Rule of thumb: one expression, no braces and no `return`. Several lines, braces and a `return`.
Exercise 8 — Shortest Form
Write `isReady` in the shortest arrow form: it returns whether the level is at least 5.
const isReady = (level) ____ level ____ 5;
console.log(isReady(7));
console.log(isReady(2));
Options: => >= < return {
Hint : No braces, no return keyword: just the arrow and the comparison.
Exercise 9 — Quiz: Forgotten return
What does this code print?
const bonus = (level) => {
level * 10;
};
console.log(bonus(3));
Options
• ```undefined```
• ```30```
• ```level * 10```
• An error
Hint : Braces are there: is anything being sent back?
Exercise 10 — Arrow Cheat Sheet
Match each form with its meaning.
Items to match
• () => { }
• x => x * 2
• (a, b) => { return a + b; }
• (x) => { x * 2; }
Definitions
• No parameter
• One parameter, implicit return
• Two parameters, explicit return
• Returns undefined
Exercise 11 — Arrow Toolkit
Write four small arrow functions, using the shortest form possible for each.
Step 1: `damage(base, level)` returns the base plus twice the level. `damage(10, 5)` returns `20`.
Step 2: `isKO(hp)` returns `true` if HP is 0 or less.
Step 3: `label(name, level)` returns `"name Lv.X"`, for example `"Zap Lv.3"`.
Step 4: `shout(text)` prints the text in uppercase followed by `"!"` (this one prints, it doesn't return).
Then use them to produce the expected output:
22
false
Zap Lv.3
THUNDER!
Starter code
// Write your arrow functions here
// Use them here