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'.

Practice

1. What is a callback function in JavaScript?

easy

A. A function that runs immediately without waiting

B. A function passed as an argument to another function to be called later

C. A function that only runs once when the program starts

D. A function that cannot be passed to other functions

Solution

1. Step 1: Understand the role of callbacks

   A callback is a function given to another function to run after some work is done.

2. Step 2: Match the definition

   A function passed as an argument to another function to be called later correctly describes this behavior as a function passed as an argument to be called later.

3. Final Answer:

   A function passed as an argument to another function to be called later -> Option B

4. Quick Check:

   Callback = function passed to run later [OK]

Hint: Callbacks are functions given to run after another function finishes [OK]

Common Mistakes:

• Thinking callbacks run immediately
• Confusing callbacks with event listeners only
• Believing callbacks cannot be passed as arguments

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

easy

A. function greet(callback) { callback }

B. function greet() { callback(); }

C. function greet(callback) { callback; }

D. function greet(callback) { callback(); }

Solution

1. Step 1: Check how the callback is called

   The callback function must be called with parentheses: callback()

2. Step 2: Identify correct syntax

   function greet(callback) { callback(); } correctly defines a function that takes a callback and calls it with callback()

3. Final Answer:

   function greet(callback) { callback(); } -> Option D

4. Quick Check:

   Call callback with parentheses to execute [OK]

Hint: Call callbacks with parentheses to run them [OK]

Common Mistakes:

• Forgetting parentheses when calling callback
• Not passing callback as a parameter
• Using callback without calling it

3. What will be the output of this code?

function sayHello(name, callback) {
  callback('Hello ' + name);
}
sayHello('Alice', message => console.log(message));

medium

A. Hello Alice

B. message

C. Hello name

D. Error: callback is not a function

Solution

1. Step 1: Understand the function call

   sayHello is called with 'Alice' and a callback that logs the message.

2. Step 2: Trace the callback execution

   The callback receives 'Hello Alice' and logs it to the console.

3. Final Answer:

   Hello Alice -> Option A

4. Quick Check:

   Callback logs 'Hello Alice' [OK]

Hint: Callbacks run with passed data, so output matches callback argument [OK]

Common Mistakes:

• Expecting variable names printed instead of values
• Confusing callback parameter with string 'message'
• Thinking callback is not called

4. Find the error in this code:

function processData(data, callback) {
  callback(data);
}
processData('Test');

medium

A. Callback should not take parameters

B. processData should not have parameters

C. Missing callback function when calling processData

D. No error, code runs fine

Solution

1. Step 1: Check function call arguments

   processData expects two arguments: data and callback function.

2. Step 2: Identify missing argument

   Only one argument ('Test') is passed, so callback is undefined causing error.

3. Final Answer:

   Missing callback function when calling processData -> Option C

4. Quick Check:

   Callback argument missing causes error [OK]

Hint: Always pass callback function when required [OK]

Common Mistakes:

• Not passing callback argument
• Assuming callback is optional without default
• Ignoring function parameter requirements

5. You want to run a function after a timer finishes. Which code correctly uses a callback with setTimeout to print 'Done' after 1 second?

hard

A. setTimeout(() => console.log('Done'), 1000);

B. setTimeout(console.log('Done'), 1000);

C. setTimeout(console.log, 1000);

D. setTimeout(console.log('Done'));

Solution

1. Step 1: Understand setTimeout usage

   setTimeout expects a function as first argument and delay in ms as second.

2. Step 2: Check each option

   setTimeout(() => console.log('Done'), 1000); passes a function that logs 'Done' after 1000ms delay correctly.

3. Final Answer:

   setTimeout(() => console.log('Done'), 1000); -> Option A

4. Quick Check:

   Callback function with delay = correct usage [OK]

Hint: Pass a function, not a function call, to setTimeout [OK]

Common Mistakes:

• Calling function immediately instead of passing it
• Missing delay argument
• Passing wrong argument types