Callback pitfalls in Javascript - Step-by-Step Execution

Concept Flow - Callback pitfalls

Start function with callback

↓

Call async operation

↓

Async operation finishes

↓

Invoke callback

↓

Callback runs with data

↓

Possible issues: callback called multiple times or not at all

↓

End

This flow shows how a callback is passed to an async function, then called later, highlighting common pitfalls like multiple calls or missing calls.

Execution Sample

Javascript

function fetchData(callback) {
  setTimeout(() => {
    callback('data1');
    callback('data2');
  }, 1000);
}

fetchData(console.log);

This code calls the callback twice after 1 second, which can cause unexpected behavior.

Execution Table

Step	Action	Callback Called?	Callback Argument	Effect
1	fetchData called with console.log	No	N/A	Waiting 1 second
2	Timeout triggers first callback call	Yes	'data1'	Logs 'data1'
3	Timeout triggers second callback call	Yes	'data2'	Logs 'data2'
4	No more callback calls	No	N/A	Execution ends

💡 Callback called twice, which can cause unexpected repeated actions.

Variable Tracker

Variable	Start	After 1	After 2	Final
callback calls count	0	1	2	2

Key Moments - 2 Insights

Why is calling the callback twice a problem?

Because the callback runs code that expects to be called once, multiple calls can cause repeated side effects or errors, as shown in execution_table steps 2 and 3.

What happens if the callback is never called?

The caller waits forever for a response, causing the program to hang or timeout, which is a common pitfall if async code forgets to call the callback.

Visual Quiz - 3 Questions

Look at the execution table, how many times is the callback called?

A Twice

B Once

C Never

D Three times

💡 Hint

Check the 'Callback Called?' column in the execution_table rows 2 and 3.

At which step does the callback first get called?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Callback Called?' column and find the first 'Yes'.

If the callback was called only once, how would 'callback calls count' change in variable_tracker?

A It would stay 0

B It would be 2 after first call

C It would be 1 after first call and final

D It would be 3 after final

💡 Hint

Check variable_tracker row for 'callback calls count' and imagine only one callback call.

Concept Snapshot

Callbacks are functions passed to async code to run later.
Pitfall: calling callback multiple times causes repeated effects.
Pitfall: not calling callback causes hanging.
Always ensure callback is called exactly once.
Use flags or promises to avoid multiple calls.

Full Transcript

This example shows a function fetchData that takes a callback and calls it twice after a delay. The execution table traces each callback call and its effect. The variable tracker counts how many times the callback runs. Key moments explain why multiple calls cause problems and what happens if callback is never called. The quiz tests understanding of callback call counts and timing. Remember, callbacks should be called once to avoid bugs.

Practice

1. What is a common problem when using callbacks in JavaScript?

easy

A. Callbacks make code run faster automatically

B. Callbacks can cause nested code that is hard to read

C. Callbacks prevent any errors from happening

D. Callbacks always run synchronously

Solution

1. Step 1: Understand what callbacks do

   Callbacks run code after a task finishes, often asynchronously.

2. Step 2: Identify common issues with callbacks

   Nested callbacks can create complex, hard-to-read code called "callback hell".

3. Final Answer:

   Callbacks can cause nested code that is hard to read -> Option B

4. Quick Check:

   Callback nesting = hard to read [OK]

Hint: Remember: deep nesting means confusing callbacks [OK]

Common Mistakes:

• Thinking callbacks always run immediately
• Assuming callbacks fix errors automatically
• Believing callbacks speed up code by default

2. Which of the following is the correct syntax to pass a callback function in JavaScript?

easy

A. doTask(callback);

B. doTask = callback;

C. doTask(callback());

D. doTask->callback();

Solution

1. Step 1: Understand how to pass functions as callbacks

   Callbacks are passed as function references without parentheses.

2. Step 2: Check each option's syntax

   doTask(callback); passes the function reference correctly. doTask(callback()); calls the function immediately, which is wrong.

3. Final Answer:

   doTask(callback); -> Option A

4. Quick Check:

   Pass function reference without () [OK]

Hint: Pass callback without parentheses to avoid immediate call [OK]

Common Mistakes:

• Calling the callback immediately by adding ()
• Using assignment instead of passing function
• Using invalid syntax like ->

3. What will be the output of this code?

function fetchData(callback) {
  setTimeout(() => {
    callback('Data loaded');
  }, 100);
}

fetchData((message) => {
  console.log(message);
});
console.log('Fetching...');

medium

A. Fetching...Fetching...

B. Data loaded\nFetching...

C. Fetching...\nData loaded

D. Data loadedData loaded

Solution

1. Step 1: Understand asynchronous behavior of setTimeout

   setTimeout delays the callback, so 'Fetching...' logs first.

2. Step 2: Trace the order of console.log calls

   'Fetching...' prints immediately, then after 100ms 'Data loaded' prints.

3. Final Answer:

   Fetching...\nData loaded -> Option C

4. Quick Check:

   Async logs: Fetching first, then Data loaded [OK]

Hint: Async callbacks run after current code finishes [OK]

Common Mistakes:

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

4. Identify the error in this callback usage:

function getData(callback) {
  let data = null;
  callback(data);
}

getData((result) => {
  console.log(result.length);
});

medium

A. Calling callback with null causes error accessing length

B. Callback function is missing parentheses

C. Data should be passed as a string, not null

D. getData should return data instead of using callback

Solution

1. Step 1: Check what value is passed to callback

   Callback receives null as data, which has no length property.

2. Step 2: Understand why accessing length causes error

   Trying to read null.length throws a TypeError.

3. Final Answer:

   Calling callback with null causes error accessing length -> Option A

4. Quick Check:

   Null has no length property [OK]

Hint: Check callback data type before accessing properties [OK]

Common Mistakes:

• Ignoring null and assuming safe property access
• Confusing callback syntax with function call
• Thinking return is needed instead of callback

5. You want to run two asynchronous tasks in sequence using callbacks. Which pattern avoids callback hell and handles errors properly?

function task1(cb) {
  setTimeout(() => cb(null, 'Result1'), 100);
}
function task2(cb) {
  setTimeout(() => cb(null, 'Result2'), 100);
}

Choose the best way to run task1 then task2 with error handling.

hard

A. task1(task2(console.log));

B. task1((err, res1) => {
task2((err, res2) => {
console.log(res1, res2);
});
});

C. task1(); task2(); console.log('Done');

D. task1((err, res1) => {
if (err) throw err;
task2((err, res2) => {
if (err) throw err;
console.log(res1, res2);
});
});

Solution

1. Step 1: Understand sequential callback execution with error checks

   Run task1, check error, then run task2 inside task1's callback with error check.

2. Step 2: Analyze each option for error handling and sequence

   task1((err, res1) => { if (err) throw err; task2((err, res2) => { if (err) throw err; console.log(res1, res2); }); }); properly sequences tasks and handles errors. Others miss error checks or sequence.

3. Final Answer:

   task1((err, res1) => { if (err) throw err; task2((err, res2) => { if (err) throw err; console.log(res1, res2); }); }); -> Option D

4. Quick Check:

   Sequence + error handling = nested callbacks with checks [OK]

Hint: Check errors before next callback to avoid silent failures [OK]

Common Mistakes:

• Ignoring errors in callbacks
• Running tasks in parallel instead of sequence
• Passing wrong arguments to callbacks