Callback pattern and callback hell in Node.js - Step-by-Step Execution

Concept Flow - Callback pattern and callback hell

Start Function

↓

Call async task 1

↓

Callback 1 executes

↓

Call async task 2 inside Callback 1

↓

Callback 2 executes

↓

Call async task 3 inside Callback 2

↓

Callback 3 executes

↓

End or handle error

This flow shows how callbacks are nested inside each other, causing deeper indentation and complexity known as callback hell.

Execution Sample

Node.js

function task1(cb) {
  setTimeout(() => cb(null, 'Result 1'), 100);
}
function task2(cb) {
  setTimeout(() => cb(null, 'Result 2'), 100);
}
function task3(cb) {
  setTimeout(() => cb(null, 'Result 3'), 100);
}

// Nested callbacks
 task1((err, res1) => {
  if (err) return console.error(err);
  console.log(res1);
  task2((err, res2) => {
    if (err) return console.error(err);
    console.log(res2);
    task3((err, res3) => {
      if (err) return console.error(err);
      console.log(res3);
    });
  });
});

This code runs three asynchronous tasks one after another using nested callbacks, illustrating callback hell.

Execution Table

Step	Action	Callback Level	Output	Next Action
1	Call task1	0	No output yet	Wait for task1 completion
2	task1 completes	1	Result 1 logged	Call task2 inside callback
3	task2 completes	2	Result 2 logged	Call task3 inside callback
4	task3 completes	3	Result 3 logged	End callbacks
5	No more callbacks	-	All tasks done	Exit

💡 All asynchronous tasks completed, callbacks finished executing.

Variable Tracker

Variable	Start	After task1	After task2	After task3
err	null	null	null	null
res1	undefined	'Result 1'	'Result 1'	'Result 1'
res2	undefined	undefined	'Result 2'	'Result 2'
res3	undefined	undefined	undefined	'Result 3'

Key Moments - 3 Insights

Why do callbacks get nested inside each other?

Each callback waits for the previous async task to finish before starting the next, so nesting happens to keep order, as shown in steps 2 and 3 of the execution_table.

What causes callback hell?

Callback hell happens because each async call is inside the previous callback, increasing indentation and making code hard to read, as seen by the increasing Callback Level in the execution_table.

How do errors get handled in nested callbacks?

Errors are checked inside each callback before proceeding, stopping further calls if an error occurs, as shown by the 'if (err) return' lines in the code and the 'err' variable staying null in variable_tracker.

Visual Quiz - 3 Questions

Look at the execution_table, at which step does the second callback start executing?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Check the 'Callback Level' and 'Next Action' columns in the execution_table.

According to variable_tracker, what is the value of res2 after task2 completes?

A 'Result 2'

B 'Result 1'

C 'Result 3'

D undefined

💡 Hint

Look at the 'After task2' column for variable 'res2' in variable_tracker.

If task2 had an error, what would happen to the callback chain?

A task3 would still run

B task1 would run again

C task3 would not run

D All tasks would run in parallel

💡 Hint

Refer to the error handling in the code sample and the 'err' variable in variable_tracker.

Concept Snapshot

Callback pattern runs async tasks by passing functions to run after completion.
Callbacks nested inside callbacks cause 'callback hell' with deep indentation.
Each callback waits for the previous task to finish before starting.
Errors must be checked in each callback to stop the chain if needed.
Callback hell makes code hard to read and maintain.

Full Transcript

This lesson shows how Node.js uses callbacks to handle asynchronous tasks. Each task runs and then calls a callback function when done. When tasks depend on each other, callbacks get nested inside previous callbacks. This nesting is called callback hell because it makes code deeply indented and hard to follow. We traced a simple example with three tasks running one after another using nested callbacks. We saw how variables like results and errors change after each task. We also learned that errors must be checked in each callback to stop further tasks if something goes wrong. Understanding this helps beginners see why callback hell happens and why newer patterns like promises or async/await are used to avoid it.