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.