Callback pitfalls in Javascript - Mini Project: Build & Apply

Callback Pitfalls

📖 Scenario: You are building a simple program that simulates fetching user data from a server. The server takes some time to respond, so you use callbacks to handle the data once it arrives.However, callbacks can sometimes cause confusion if not used carefully. This project will help you understand how callbacks work and how to avoid common mistakes.

🎯 Goal: Create a program that fetches user names using callbacks and prints them in order. You will learn how to set up callbacks correctly and avoid pitfalls like calling callbacks too early or too late.

📋 What You'll Learn

Create a function that simulates fetching user data with a callback

Use a callback function to handle the fetched data

Avoid calling the callback before the data is ready

Print the user names after fetching them

💡 Why This Matters

🌍 Real World

Callbacks are used in real web apps to handle data loading, user actions, and server responses without freezing the page.

💼 Career

Understanding callbacks is essential for JavaScript developers working on interactive websites and asynchronous programming.

1

Create the user data array

Create an array called users with these exact strings: 'Alice', 'Bob', 'Charlie'.

Javascript

// Create the users array with 'Alice', 'Bob', and 'Charlie'
// Your code here

Hint

Use square brackets [] to create an array and separate the names with commas.

2

Create the fetchUser function with a callback

Create a function called fetchUser that takes two parameters: index and callback. Inside the function, use setTimeout to simulate a delay of 100 milliseconds, then call callback with the user name at position index from the users array.

Javascript

const users = ['Alice', 'Bob', 'Charlie'];

// Create fetchUser function with index and callback parameters
// Your code here

Hint

Use setTimeout to delay calling the callback. The callback should receive the user name from the users array at the given index.

3

Fetch all users using callbacks

Use fetchUser to fetch each user by index 0, 1, and 2. For each call, pass a callback function that takes a parameter name and adds it to an array called fetchedUsers. Create the fetchedUsers array before the calls.

Javascript

const users = ['Alice', 'Bob', 'Charlie'];

function fetchUser(index, callback) {
    setTimeout(() => {
        callback(users[index]);
    }, 100);
}

// Create an empty array called fetchedUsers
// Use fetchUser for index 0, 1, and 2
// For each, pass a callback that adds the name to fetchedUsers
// Your code here

Hint

Remember to create the fetchedUsers array before calling fetchUser. Each callback should add the received name to this array.

4

Print the fetched users after delay

Use setTimeout with a delay of 500 milliseconds to print the fetchedUsers array using console.log. This ensures all callbacks have finished before printing.

Javascript

const users = ['Alice', 'Bob', 'Charlie'];

function fetchUser(index, callback) {
    setTimeout(() => {
        callback(users[index]);
    }, 100);
}

const fetchedUsers = [];
fetchUser(0, (name) => {
    fetchedUsers.push(name);
});
fetchUser(1, (name) => {
    fetchedUsers.push(name);
});
fetchUser(2, (name) => {
    fetchedUsers.push(name);
});

// Use setTimeout with 500ms delay to print fetchedUsers
// Your code here

Hint

Use setTimeout to delay printing so all user names are fetched and added to the array first.

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