Callbacks in Javascript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a callback function in JavaScript?

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

beginner

Why do we use callbacks in JavaScript?

Callbacks let us run code after another function finishes, especially for tasks that take time like loading data, so the program doesn’t stop and wait.

beginner

How do you define and use a callback function? Show a simple example.

You define a function and pass it as an argument to another function. For example:<br><pre>function greet(name) {
  console.log('Hello ' + name);
}
function processUserInput(callback) {
  const name = 'Alice';
  callback(name);
}
processUserInput(greet);</pre>

beginner

What problem can callbacks help solve in JavaScript?

Callbacks help manage tasks that take time, like reading files or fetching data, so the program can keep running without waiting and freezing.

intermediate

What is "callback hell" and why should it be avoided?

"Callback hell" happens when callbacks are nested inside callbacks many times, making code hard to read and maintain. It’s better to use promises or async/await to keep code clean.

What is a callback function?

A A function that cannot be called

B A function that returns a value

C A function passed as an argument to another function

D A function that runs only once

A callback is a function passed into another function to be called later.

Why are callbacks useful in JavaScript?

A To stop the program until a task finishes

B To run code after a task finishes without stopping the program

C To make the program run slower

D To create new variables

Callbacks let JavaScript run other code while waiting for tasks like data loading.

Which of these is an example of passing a callback?

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

B let x = 5 + 3

C function add(a, b) { return a + b; }

D console.log('Hello')

setTimeout takes a function as a callback to run after a delay.

What is a common downside of using many nested callbacks?

A Code runs faster

B Code becomes shorter

C Code uses less memory

D Code becomes hard to read and maintain

Many nested callbacks create "callback hell," making code confusing.

Which modern JavaScript feature helps avoid callback hell?

A Promises and async/await

B Global variables

C Loops

D Alerts

Promises and async/await make asynchronous code easier to read and write.

Explain what a callback function is and why it is useful in JavaScript.

Think about how JavaScript runs code that takes time without stopping everything.

Describe what "callback hell" is and how you can avoid it.

Imagine stacking many callbacks inside each other and how that looks.

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