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.