Callback pitfalls in Javascript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a callback function in JavaScript?

A callback function is a function passed as an argument to another function, which is then called inside the outer function to complete some kind of action.

beginner

What is 'callback hell'?

Callback hell happens when callbacks are nested inside other callbacks many levels deep, making code hard to read and maintain.

intermediate

Why can callbacks cause unexpected behavior with loops?

Because callbacks run later, variables in loops might have changed by the time the callback runs, causing all callbacks to use the last loop value.

intermediate

How can you avoid callback hell?

You can avoid callback hell by using named functions, promises, async/await, or modularizing code to keep callbacks flat and readable.

beginner

What is a common mistake when handling errors in callbacks?

A common mistake is ignoring the error argument or not checking it before proceeding, which can cause bugs or crashes.

What problem does 'callback hell' mainly cause?

A Variables lose their values

B Code becomes hard to read and maintain

C Functions run too fast

D Callbacks stop working

Callback hell makes code deeply nested and confusing, which hurts readability and maintenance.

Why might callbacks inside a loop all use the same variable value?

A Because the loop variable changes before callbacks run

B Because callbacks run immediately

C Because callbacks copy variables automatically

D Because loops freeze variables

Callbacks run later, so the loop variable may have changed by then, causing all callbacks to see the last value.

Which method helps avoid callback hell by making asynchronous code look synchronous?

A forEach

B setTimeout

C async/await

D console.log

async/await lets you write asynchronous code in a clear, linear style, avoiding nested callbacks.

What should you always check first in a callback with an error argument?

A If there is an error

B If the callback is named

C If the function is synchronous

D If the variable is global

Always check if an error exists before continuing to avoid bugs or crashes.

Which of these is NOT a way to improve callback code?

A Using promises

B Using named functions

C Using async/await

D Nesting more callbacks

Nesting more callbacks makes callback hell worse, not better.

Explain what 'callback hell' is and why it is a problem in JavaScript.

Think about how many layers of callbacks can make code confusing.

Describe how you can avoid common pitfalls when using callbacks in loops.

Consider how to keep each callback's variable value separate.

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