Callback pattern and callback hell in Node.js - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a callback function that logs a message.

Node.js

function greet(name, [1]) {
  console.log('Hello ' + name);
  [1]();
}

Drag options to blanks, or click blank then click option'

Aevent

Bpromise

Casync

Dcallback

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'promise' or 'async' as a parameter name instead of 'callback'.

Not calling the callback function inside the main function.

The callback function is passed as an argument and called inside the main function.

2fill in blank

medium

Complete the code to call a function with a callback that logs 'Done'.

Node.js

function doTask(cb) {
  setTimeout(() => {
    console.log('Task complete');
    [1]();
  }, 1000);
}
doTask(() => console.log('Done'));

Drag options to blanks, or click blank then click option'

Acb

Bcallback

Cdone

Dfinish

Attempts:

3 left

💡 Hint

Common Mistakes

Calling a function name not defined as a parameter.

Forgetting to call the callback function.

The callback function passed as 'cb' is called after the task finishes.

3fill in blank

hard

Fix the error in the nested callbacks to avoid callback hell.

Node.js

function step1(cb) {
  setTimeout(() => {
    console.log('Step 1');
    cb();
  }, 500);
}

function step2(cb) {
  setTimeout(() => {
    console.log('Step 2');
    cb();
  }, 500);
}

step1(() => {
  [1](() => {
    console.log('Step 3');
  });
});

Drag options to blanks, or click blank then click option'

Acallback

Bstep2

CsetTimeout

Dstep1

Attempts:

3 left

💡 Hint

Common Mistakes

Calling 'step1' again inside its own callback causing infinite loop.

Using undefined function names.

To avoid callback hell, call the next step function properly inside the previous callback.

4fill in blank

hard

Fill both blanks to create a nested callback structure that logs steps in order.

Node.js

function first(cb) {
  setTimeout(() => {
    console.log('First');
    [1]();
  }, 300);
}

function second(cb) {
  setTimeout(() => {
    console.log('Second');
    [2]();
  }, 300);
}

first(() => {
  second(() => {
    console.log('Done');
  });
});

Drag options to blanks, or click blank then click option'

Acb

Bcallback

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for callback parameters inconsistently.

Not calling the callback functions inside setTimeout.

Both functions call their callback parameter to continue the chain.

5fill in blank

hard

Fill all three blanks to create a callback chain that logs three steps in order.

Node.js

function one(cb) {
  setTimeout(() => {
    console.log('One');
    [1]();
  }, 200);
}

function two(cb) {
  setTimeout(() => {
    console.log('Two');
    [2]();
  }, 200);
}

function three(cb) {
  setTimeout(() => {
    console.log('Three');
    [3]();
  }, 200);
}

one(() => {
  two(() => {
    three(() => {
      console.log('All done');
    });
  });
});

Drag options to blanks, or click blank then click option'

Acb

Bcallback

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing callback parameter names inconsistently.

Forgetting to call the callback in any function.

Each function calls its callback parameter to continue the chain.

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