Arrow Functions

A shorter syntax for writing a function, placed between the parameters and the function body.

Part of: JavaScript Coding without HTML and CSS — Module 42, ACARA Digital Technologies Years 9–10 — Modular and Object-Oriented Programming (JavaScript) — Module 20

Understanding Arrow Functions in JavaScript

What it does: The arrow => is exactly what makes this shorthand possible. Empty parentheses are still needed with zero parameters. The arrow => comes right after the parameters. JavaScript always uses =>, never ->. Arrow functions skip the 'function' keyword entirely. A single parameter can be written without surrounding (). Just like regular functions, parameters are comma-separated. Arrow functions were designed as a more compact syntax.

Common mistakes: Arrow functions use =>, not ->, between parameters and body. Arrow functions don't use the 'function' keyword - remove it.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add Arrow Functions to a class →

This module's key terms are also in a printable crossword (Modules 41–52) and word search (Modules 21–52).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Does => separate the parameters from the function body in an arrow function?

YesNo

Matches

let f = (a, b) -> a + b;

↓

Wrong - use =>, not ->, between parameters and body

Applying

Meanings

Term

Meaning

A shorter syntax for writing a function, placed between the parameters and the function body.

Practice

let add = (a, b) => {

Testing

Gaps

let add = (a, b) {

Check Answer

Spots

1let f = (a, b) -> a + b;

2console.log(f(2, 3));

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. Does => separate the parameters from the function body in an arrow function?

A. Yes ✓

B. No

The arrow => comes right after the parameters.

2. Is -> used instead of => in JavaScript arrow functions?

A. No ✓

B. Yes

JavaScript always uses =>, never ->.

3. Do arrow functions with no parameters still need empty parentheses?

A. No

B. Yes ✓

Even with zero parameters, () is still required.

4. Does an arrow function need the 'function' keyword?

A. Yes

B. No ✓

Arrow functions skip the 'function' keyword entirely.

5. Can an arrow function with a single parameter omit the parentheses?

A. Yes ✓

B. No

A single parameter can be written without surrounding ().

Match the Pairs

(a, b) => a + b → Adds a and b together using an arrow function

x => x * 2 → Doubles x using a single-parameter arrow function

A shorter way of writing a function expression → =>

Required even when an arrow function has no parameters → ()

let f = (a, b) -> a + b; → Wrong - use =>, not ->, between parameters and body

let g = function (x) => x; → Wrong - arrow functions don't use the 'function' keyword

Key Term

=>

A shorter syntax for writing a function, placed between the parameters and the function body.

Fill in the Blanks

1. let add = (a, b) => {

Hint: Type the arrow that separates the parameters from the function body.

2. let double = x => x * 2;

Hint: Type the arrow that separates the parameter from the function body.

3. let greet = () => "Hi";

Hint: Type the opening parenthesis for a no-parameter arrow function.

4. let square = (n) => n * n;

Hint: Type the arrow that separates the parameters from the function body.

5. let multiply = (x, y) => x * y;

Hint: Type the arrow that separates the parameters from the function body.

Spot the Error

Question 1

A let f = (a, b) -> a + b;

B console.log(f(2, 3));

C let g = (x) => x * 2;

Line A — Arrow functions use =>, not ->, between parameters and body.

Question 2

A let h = (x) => x + 1;

B console.log(h(5));

C let i = function (x) => x;

Line C — Arrow functions don't use the 'function' keyword - remove it.

Question 3

A let j = => 5;

B console.log(j());

C let k = () => 10;

Line A — Arrow functions with no parameters need empty parentheses: ().

Question 4

A console.log(m(1, 2));

B let m = (a b) => a + b;

C let n = (x) => x * x;

Line B — Multiple parameters need a comma between them: (a, b).

Question 5

A let p = (x) => x - 1;

B console.log(p(5));

C let q = (y) => y + 1;

D let r = (z) -> z * 2;

Line D — Arrow functions use =>, not ->, between parameters and body.

Student with a class code? Join your class →