Callbacks in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Understanding callback execution order

What is the output of the following code?

Javascript

function first(cb) {
  console.log('First');
  cb();
}

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

first(second);
console.log('Third');

A First\nSecond\nThird

B First\nThird\nSecond

C Second\nFirst\nThird

D Third\nFirst\nSecond

💡 Hint

Remember that callbacks run inside the function when called.

The function 'first' logs 'First', then calls the callback 'second' which logs 'Second'. After 'first' finishes, 'Third' is logged.

❓ Predict Output

intermediate

Callback with asynchronous behavior

What will be printed to the console when this code runs?

Javascript

function asyncOperation(cb) {
  setTimeout(() => {
    cb('Done');
  }, 100);
}

asyncOperation((message) => {
  console.log(message);
});
console.log('Start');

A Done

B Done\nStart

C Start

D Start\nDone

💡 Hint

setTimeout delays the callback, so the last console.log runs first.

The 'Start' message logs immediately. The callback inside setTimeout runs after 100ms, logging 'Done'.

❓ Predict Output

advanced

Callback with error handling

What is the output of this code?

Javascript

function fetchData(callback) {
  const error = null;
  const data = { id: 1, name: 'Test' };
  callback(error, data);
}

fetchData((err, result) => {
  if (err) {
    console.log('Error:', err);
  } else {
    console.log('Data:', result.name);
  }
});

A Data: Test

B Error: null

C Data: undefined

D Error: undefined

💡 Hint

Check how the callback handles the error and data parameters.

Since error is null, the else branch runs and logs the data's name property.

❓ Predict Output

advanced

Callback with multiple asynchronous calls

What will be the output of this code?

Javascript

function task1(cb) {
  setTimeout(() => {
    console.log('Task 1 done');
    cb();
  }, 200);
}

function task2() {
  console.log('Task 2 done');
}

task1(task2);
console.log('Start tasks');

A Task 2 done\nStart tasks\nTask 1 done

B Start tasks\nTask 1 done\nTask 2 done

C Task 1 done\nTask 2 done\nStart tasks

D Start tasks\nTask 2 done\nTask 1 done

💡 Hint

Remember setTimeout delays the callback, so synchronous logs run first.

The 'Start tasks' logs immediately. After 200ms, 'Task 1 done' logs, then callback runs logging 'Task 2 done'.

❓ Predict Output

expert

Nested callbacks and variable scope

What is the output of this code?

Javascript

function outer(cb) {
  let count = 0;
  function inner() {
    count++;
    cb(count);
  }
  inner();
  inner();
}

outer((num) => {
  console.log('Count:', num);
});

A Count: undefined

B Count: 2

C Count: 1\nCount: 2

D Count: 1

💡 Hint

Check how many times the callback is called and what it logs each time.

outer calls inner() twice. Each time, count is incremented (to 1 then 2) and the callback is invoked with the current count, logging 'Count: 1' then 'Count: 2'.