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.

Practice

1. What is the main purpose of a callback function in Node.js?

easy

A. To run code after an asynchronous action finishes

B. To stop the program execution immediately

C. To create a new thread for parallel processing

D. To convert synchronous code into asynchronous code automatically

Solution

1. Step 1: Understand asynchronous actions in Node.js

   Node.js uses callbacks to handle tasks that take time, like reading files or fetching data, without stopping the program.

2. Step 2: Identify the role of the callback

   The callback function runs after the task finishes, allowing the program to continue smoothly.

3. Final Answer:

   To run code after an asynchronous action finishes -> Option A

4. Quick Check:

   Callback = run after async task [OK]

Hint: Callbacks run code after tasks finish [OK]

Common Mistakes:

• Thinking callbacks stop program execution
• Confusing callbacks with threads
• Assuming callbacks convert sync to async automatically

2. Which of the following is the correct function declaration syntax to define a callback function in Node.js?

easy

A. function callback { console.log('Done'); }

B. callback => { console.log('Done'); }

C. function callback() { console.log('Done'); }

D. callback() => { console.log('Done'); }

Solution

1. Step 1: Review function declaration syntax

   In JavaScript, a function is declared with the keyword 'function' followed by parentheses and curly braces.

2. Step 2: Check each option for syntax correctness

   function callback() { console.log('Done'); } uses correct syntax. callback => { console.log('Done'); } is an arrow function expression, not a function declaration. function callback { console.log('Done'); } misses parentheses after function name. callback() => { console.log('Done'); } mixes arrow function and parentheses incorrectly.

3. Final Answer:

   function callback() { console.log('Done'); } -> Option C

4. Quick Check:

   Correct function syntax = function callback() { console.log('Done'); } [OK]

Hint: Function syntax: function name() { } [OK]

Common Mistakes:

• Omitting parentheses in function declaration
• Mixing arrow function syntax incorrectly
• Missing curly braces for function body

3. What will be the output of the following code?

function first(callback) {
  setTimeout(() => {
    console.log('First');
    callback();
  }, 100);
}

function second() {
  console.log('Second');
}

first(second);

medium

A. First\nSecond

B. Second\nFirst

C. First

D. Second

Solution

1. Step 1: Understand setTimeout behavior

   setTimeout delays the function inside it by 100 milliseconds, then runs the callback.

2. Step 2: Trace the code execution order

   first() calls setTimeout, which waits 100ms, then logs 'First' and calls second(). So 'First' prints first, then 'Second'.

3. Final Answer:

   First\nSecond -> Option A

4. Quick Check:

   Callback runs after delay = 'First' then 'Second' [OK]

Hint: setTimeout delays code, callback runs after delay [OK]

Common Mistakes:

• Assuming callback runs immediately
• Confusing order of console logs
• Ignoring asynchronous delay

4. Identify the problem in this nested callback code and how to fix it:

readFile('file1.txt', function(err, data1) {
  if (err) throw err;
  readFile('file2.txt', function(err, data2) {
    if (err) throw err;
    readFile('file3.txt', function(err, data3) {
      if (err) throw err;
      console.log(data1, data2, data3);
    });
  });
});

medium

A. Use synchronous readFileSync to avoid callbacks

B. This is callback hell; fix by using Promises or async/await

C. Syntax error: missing semicolons after callbacks

D. No problem; this is the best way to read files sequentially

Solution

1. Step 1: Recognize nested callbacks cause callback hell

   Multiple nested callbacks make code hard to read and maintain, known as callback hell.

2. Step 2: Suggest modern alternatives

   Using Promises or async/await flattens the code, making it cleaner and easier to follow.

3. Final Answer:

   This is callback hell; fix by using Promises or async/await -> Option B

4. Quick Check:

   Nested callbacks = callback hell, use Promises [OK]

Hint: Nested callbacks = callback hell; use Promises [OK]

Common Mistakes:

• Ignoring readability problems
• Thinking semicolons fix callback hell
• Using synchronous calls in async code

5. You have three asynchronous tasks that depend on each other in sequence. Which approach best avoids callback hell while keeping the tasks in order?

hard

A. Use nested callbacks for each task

B. Use setTimeout to delay each task manually

C. Run all tasks in parallel without waiting

D. Use Promises chaining or async/await syntax

Solution

1. Step 1: Understand the problem of callback hell

   Nested callbacks make code messy and hard to maintain when tasks depend on each other.

2. Step 2: Identify better patterns for sequencing async tasks

   Promises chaining or async/await syntax keep code flat and readable while preserving order.

3. Final Answer:

   Use Promises chaining or async/await syntax -> Option D

4. Quick Check:

   Promises/async await = clean sequential async code [OK]

Hint: Use Promises or async/await for clean async flow [OK]

Common Mistakes:

• Using nested callbacks causing callback hell
• Running tasks in parallel when order matters
• Using setTimeout for sequencing tasks