Callbacks in Javascript - Mini Project: Build & Apply

Understanding Callbacks in JavaScript

📖 Scenario: Imagine you are organizing a small event and you want to send invitations. You want to print a message after sending each invitation to confirm it was sent.

🎯 Goal: You will create a simple program that uses a callback function to print a confirmation message after sending each invitation.

📋 What You'll Learn

Create an array of guest names

Create a callback function that prints a confirmation message

Create a function that sends invitations and calls the callback after each send

Call the invitation function and display the confirmation messages

💡 Why This Matters

🌍 Real World

Callbacks are used in real life when you want to do something after a task finishes, like showing a message after a file downloads or a button is clicked.

💼 Career

Understanding callbacks is important for web developers to handle events, asynchronous tasks, and improve user experience.

1

Create the guest list

Create an array called guests with these exact names: 'Alice', 'Bob', 'Charlie'

Javascript

# Create an array called guests with 'Alice', 'Bob', and 'Charlie'
// Your code here

Hint

Use square brackets [] to create an array and separate names with commas.

2

Create the callback function

Create a function called confirmSend that takes one parameter name and prints "Invitation sent to " followed by the name

Javascript

const guests = ['Alice', 'Bob', 'Charlie'];
// Create function confirmSend(name) that prints confirmation
// Your code here

Hint

Use a function declaration and console.log with a template string to print the message.

3

Create the invitation sender function

Create a function called sendInvitations that takes two parameters: guestList and callback. Use a for loop with variable guest to go through guestList and call callback(guest) inside the loop.

Javascript

const guests = ['Alice', 'Bob', 'Charlie'];

function confirmSend(name) {
    console.log(`Invitation sent to ${name}`);
}

// Create function sendInvitations(guestList, callback) with a for loop
// Your code here

Hint

Use a for...of loop to go through each guest and call the callback with the guest name.

4

Call the function and show output

Call the function sendInvitations with guests and confirmSend as arguments to print the confirmation messages.

Javascript

const guests = ['Alice', 'Bob', 'Charlie'];

function confirmSend(name) {
    console.log(`Invitation sent to ${name}`);
}

function sendInvitations(guestList, callback) {
    for (const guest of guestList) {
        callback(guest);
    }
}

// Call sendInvitations with guests and confirmSend
// Your code here

Hint

Call sendInvitations(guests, confirmSend); to see the messages.

Practice

1. What is a callback function in JavaScript?

easy

A. A function that runs immediately without waiting

B. A function passed as an argument to another function to be called later

C. A function that only runs once when the program starts

D. A function that cannot be passed to other functions

Solution

1. Step 1: Understand the role of callbacks

   A callback is a function given to another function to run after some work is done.

2. Step 2: Match the definition

   A function passed as an argument to another function to be called later correctly describes this behavior as a function passed as an argument to be called later.

3. Final Answer:

   A function passed as an argument to another function to be called later -> Option B

4. Quick Check:

   Callback = function passed to run later [OK]

Hint: Callbacks are functions given to run after another function finishes [OK]

Common Mistakes:

• Thinking callbacks run immediately
• Confusing callbacks with event listeners only
• Believing callbacks cannot be passed as arguments

2. Which of the following is the correct syntax to use a callback in JavaScript?

easy

A. function greet(callback) { callback }

B. function greet() { callback(); }

C. function greet(callback) { callback; }

D. function greet(callback) { callback(); }

Solution

1. Step 1: Check how the callback is called

   The callback function must be called with parentheses: callback()

2. Step 2: Identify correct syntax

   function greet(callback) { callback(); } correctly defines a function that takes a callback and calls it with callback()

3. Final Answer:

   function greet(callback) { callback(); } -> Option D

4. Quick Check:

   Call callback with parentheses to execute [OK]

Hint: Call callbacks with parentheses to run them [OK]

Common Mistakes:

• Forgetting parentheses when calling callback
• Not passing callback as a parameter
• Using callback without calling it

3. What will be the output of this code?

function sayHello(name, callback) {
  callback('Hello ' + name);
}
sayHello('Alice', message => console.log(message));

medium

A. Hello Alice

B. message

C. Hello name

D. Error: callback is not a function

Solution

1. Step 1: Understand the function call

   sayHello is called with 'Alice' and a callback that logs the message.

2. Step 2: Trace the callback execution

   The callback receives 'Hello Alice' and logs it to the console.

3. Final Answer:

   Hello Alice -> Option A

4. Quick Check:

   Callback logs 'Hello Alice' [OK]

Hint: Callbacks run with passed data, so output matches callback argument [OK]

Common Mistakes:

• Expecting variable names printed instead of values
• Confusing callback parameter with string 'message'
• Thinking callback is not called

4. Find the error in this code:

function processData(data, callback) {
  callback(data);
}
processData('Test');

medium

A. Callback should not take parameters

B. processData should not have parameters

C. Missing callback function when calling processData

D. No error, code runs fine

Solution

1. Step 1: Check function call arguments

   processData expects two arguments: data and callback function.

2. Step 2: Identify missing argument

   Only one argument ('Test') is passed, so callback is undefined causing error.

3. Final Answer:

   Missing callback function when calling processData -> Option C

4. Quick Check:

   Callback argument missing causes error [OK]

Hint: Always pass callback function when required [OK]

Common Mistakes:

• Not passing callback argument
• Assuming callback is optional without default
• Ignoring function parameter requirements

5. You want to run a function after a timer finishes. Which code correctly uses a callback with setTimeout to print 'Done' after 1 second?

hard

A. setTimeout(() => console.log('Done'), 1000);

B. setTimeout(console.log('Done'), 1000);

C. setTimeout(console.log, 1000);

D. setTimeout(console.log('Done'));

Solution

1. Step 1: Understand setTimeout usage

   setTimeout expects a function as first argument and delay in ms as second.

2. Step 2: Check each option

   setTimeout(() => console.log('Done'), 1000); passes a function that logs 'Done' after 1000ms delay correctly.

3. Final Answer:

   setTimeout(() => console.log('Done'), 1000); -> Option A

4. Quick Check:

   Callback function with delay = correct usage [OK]

Hint: Pass a function, not a function call, to setTimeout [OK]

Common Mistakes:

• Calling function immediately instead of passing it
• Missing delay argument
• Passing wrong argument types