Passing a function as an argument (callback)

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

1. Which line correctly passes the function show to forEach as a callback?

A nums.forEach(show());

B nums.forEach(show);

2. True or false: in nums.map(double), the map method is the one that calls double for each item.

A False

B True

3. Which is an arrow function written directly in the call as a callback?

A nums.map(n => n * 2);

B nums.map(n => n * 2());

4. Why does filter need a callback function?

A It uses the callback to decide whether to keep each item

B It uses the callback to sort the array in order

5. What happens with nums.forEach(show()) if show returns undefined?

A show runs once straight away and undefined is passed, which causes an error

B show runs once for each item in nums

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1nums.forEach(show);		AWrites an arrow function directly in the call as a callback that map runs on every item
2nums.map(n => n * 2);		BPasses the function show as a callback, with no brackets, so forEach calls it once for each item
3To pass a function as a callback, write its name without brackets		CThe brackets after show call the function straight away, so its result (undefined) is passed instead of the function. Write forEach(show).
4forEach, map and filter each need a callback so they know what to do with every item		DThis passes the value n * 2, not a function. The callback needs an arrow function: map(n => n * 2).
5nums.forEach(show());		Escores.filter(isPass);
6nums.map(n * 2);		Fnames.forEach(name => console.log(name));

Definitions

callback

Fill in the Blanks

Complete each line of code by filling in the missing parts.

function show(n) { console.log(n); } nums.forEach(____);

const doubled = nums.map(n __ n * 2);

const big = nums.______(n => n > 10);

nums._______(n => console.log(n));

function repeat(action) { ______(); } repeat(() => console.log("Hi"));

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A const nums = [1, 2, 3];

B nums.forEach(show());

C function show(n) {

D console.log(n);

E }

Question 2

A const nums = [1, 2, 3];

B let d = nums.map(n -> n * 2);

C console.log(d);

Question 3

A const nums = [4, 12, 20];

B const isBig = n => n > 10;

C let big;

D big = nums.filter(isBig());

E console.log(big);

Question 4

A [1, 2, 3].forEach(n) => {

B console.log(n * 2);

C });

Question 5

A const nums = [3, 6, 9];

B const half = n => { n / 2 };

C const h = nums.map(half);

D console.log(h);

Answer Key

Passing a function as an argument (callback)

Section A: Quick Questions

B — nums.forEach(show);

B — True

A — nums.map(n => n * 2);

A — It uses the callback to decide whether to keep each item

A — show runs once straight away and undefined is passed, which causes an error

Section B: Match the Pairs

nums.forEach(show); → Passes the function show as a callback, with no brackets, so forEach calls it once for each item

nums.map(n => n * 2); → Writes an arrow function directly in the call as a callback that map runs on every item

To pass a function as a callback, write its name without brackets → scores.filter(isPass);

forEach, map and filter each need a callback so they know what to do with every item → names.forEach(name => console.log(name));

nums.forEach(show()); → The brackets after show call the function straight away, so its result (undefined) is passed instead of the function. Write forEach(show).

nums.map(n * 2); → This passes the value n * 2, not a function. The callback needs an arrow function: map(n => n * 2).

Section C: Definitions

callback — A function passed as an argument, without brackets, to another function that calls it later. Examples: nums.forEach(show) or nums.map(n => n * 2).

Section D: Fill in the Blanks

function show(n) { console.log(n); }
nums.forEach(show);

const doubled = nums.map(n => n * 2);

const big = nums.filter(n => n > 10);

nums.forEach(n => console.log(n));

function repeat(action) {
  action();
}
repeat(() => console.log("Hi"));

Section E: Spot the Error

B — Brackets after show call the function straight away with no argument. forEach needs the function itself, so write nums.forEach(show);

B — An arrow function uses => and not ->. The callback should be n => n * 2.

D — isBig() runs the function right now with no value, and filter gets false instead of a function. Pass the function name only: nums.filter(isBig).

A — The bracket after n closes the forEach call too early. The arrow function must sit inside the brackets: forEach(n => {

B — Curly braces need an explicit return. Without one the callback returns undefined, so map builds an array of undefined. Use n => n / 2 or { return n / 2; }.