Callback pitfalls in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of asynchronous callback with loop variable

What will be the output of this code snippet?

Javascript

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}

A 0 1 2

B 1 2 3

C 0 0 0

D 3 3 3

💡 Hint

Think about how the variable i is shared in the loop and when the callbacks run.

The variable i is declared with var, which has function scope. By the time the callbacks run, the loop has finished and i is 3. So all callbacks print 3.

❓ Predict Output

intermediate

Fixing callback loop with let

What will be the output of this code snippet?

Javascript

for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}

A 0 1 2

B 3 3 3

C undefined undefined undefined

D 0 0 0

💡 Hint

Consider the scope of let inside the loop.

Using let creates a new binding for each loop iteration. Each callback closes over its own i, so the output is 0, 1, 2.

❓ Predict Output

advanced

Callback with multiple asynchronous calls and variable capture

What will be the output of this code?

Javascript

function fetchData(id, callback) {
  setTimeout(() => {
    callback('Data for ' + id);
  }, 100);
}

for (var i = 1; i <= 3; i++) {
  fetchData(i, function(data) {
    console.log('Received:', data);
  });
}

A

Received: Data for undefined
Received: Data for undefined
Received: Data for undefined

B

Received: Data for 3
Received: Data for 3
Received: Data for 3

C

Received: Data for 1
Received: Data for 2
Received: Data for 3

D

Received: Data for 1
Received: Data for 1
Received: Data for 1

💡 Hint

Check how the argument id is passed to the callback.

The id is passed as an argument to fetchData and used inside the callback. Each call has its own id, so the output matches 1, 2, 3.

❓ Predict Output

advanced

Callback error handling with missing callback

What will happen when this code runs?

Javascript

function doWork(callback) {
  setTimeout(() => {
    if (callback) {
      callback(null, 'Success');
    }
  }, 100);
}

doWork();

A Throws TypeError: callback is not a function

B No output, no error

C Prints 'Success'

D Throws ReferenceError: callback is not defined

💡 Hint

Check if the callback is called only when it exists.

The function checks if callback exists before calling it. Since doWork is called without arguments, no callback is called and no error occurs.

❓ Predict Output

expert

Nested callbacks and variable shadowing

What will be the output of this code?

Javascript

var x = 1;
function outer(callback) {
  var x = 2;
  callback();
}
outer(function() {
  console.log(x);
});

A 1

B ReferenceError

C undefined

D 2

💡 Hint

Consider the scope where the callback is defined and where it is called.

The callback is defined in the global scope where x is 1. Inside outer, x is 2 but the callback does not close over that variable. So it prints 1.

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