Callbacks in Javascript - Step-by-Step Execution

Concept Flow - Callbacks

Define function with callback parameter

↓

Call function with callback argument

↓

Function runs main code

↓

Function calls callback

↓

Callback runs with data

↓

End

A callback is a function passed into another function to run later, after some work is done.

Execution Sample

Javascript

function greet(name, callback) {
  const message = `Hello, ${name}!`;
  callback(message);
}

greet('Alice', msg => console.log(msg));

This code defines a greet function that calls a callback with a greeting message.

Execution Table

Step	Action	Evaluation	Result
1	Call greet('Alice', callback)	greet function starts	name='Alice', callback=msg => console.log(msg)
2	Create message	`Hello, Alice!`	message='Hello, Alice!'
3	Call callback(message)	callback('Hello, Alice!')	console.log prints 'Hello, Alice!'
4	Callback runs	console.log('Hello, Alice!')	Output: Hello, Alice!
5	greet function ends	No more code	Return undefined

💡 Function ends after callback runs and prints message

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
name	undefined	'Alice'	'Alice'	'Alice'	'Alice'
callback	undefined	msg => console.log(msg)	msg => console.log(msg)	msg => console.log(msg)	msg => console.log(msg)
message	undefined	undefined	'Hello, Alice!'	'Hello, Alice!'	'Hello, Alice!'

Key Moments - 3 Insights

Why does the callback run only after the message is created?

Because in the execution_table at Step 3, the callback is called with the message variable, so the message must exist first.

Is the callback function called immediately or later?

In this example, the callback is called immediately inside greet, as shown in Step 3 and 4 of the execution_table.

What if we don't pass a callback?

If no callback is passed, calling callback(message) would cause an error. The code expects a function to call.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'message' at Step 2?

A 'Alice'

B undefined

C 'Hello, Alice!'

D callback function

💡 Hint

Check the 'Evaluation' and 'Result' columns at Step 2 in the execution_table.

At which step does the callback function actually run?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look for when console.log prints the message in the execution_table.

If we change the callback to a function that alerts the message instead of console.log, what changes in the execution_table?

A The callback is called at a different step

B The 'Action' and 'Result' at Step 4 change to alert the message

C The 'message' variable changes

D No changes at all

💡 Hint

Focus on the 'Action' and 'Result' columns at Step 4 where the callback runs.

Concept Snapshot

Callbacks are functions passed as arguments to other functions.
They run after the main function finishes some work.
Syntax: function main(callback) { callback(); }
Use callbacks to handle tasks after async or delayed work.
Callbacks can be anonymous or named functions.

Full Transcript

This visual trace shows how a callback works in JavaScript. First, the greet function is called with a name and a callback function. Inside greet, a message is created using the name. Then, the callback is called with the message. The callback runs and prints the message to the console. Variables like name, callback, and message change as the code runs. Key moments include understanding when the callback runs and why the message must exist first. The quiz checks understanding of variable values and callback timing.

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