Callbacks in Javascript - Time & Space Complexity

Time Complexity: Callbacks

O(n)

Understanding Time Complexity

When using callbacks in JavaScript, it's important to understand how the time to run your code changes as the input grows.

We want to see how callbacks affect the number of steps the program takes.

Scenario Under Consideration

Analyze the time complexity of the following code snippet.

function processItems(items, callback) {
  for (let i = 0; i < items.length; i++) {
    callback(items[i]);
  }
}

const data = [1, 2, 3, 4, 5];
processItems(data, item => console.log(item));
    

This code runs a callback function on each item in an array.

Identify Repeating Operations

Identify the loops, recursion, array traversals that repeat.

• Primary operation: The for-loop that goes through each item in the array.
• How many times: Once for each item in the array, so as many times as the array length.

How Execution Grows With Input

As the number of items grows, the number of times the callback runs grows the same way.

Input Size (n)	Approx. Operations
10	10 callback calls
100	100 callback calls
1000	1000 callback calls

Pattern observation: The work grows directly with the number of items.

Final Time Complexity

Time Complexity: O(n)

This means the time to finish grows in a straight line with the number of items.

Common Mistake

[X] Wrong: "Callbacks make the code slower in a way that changes the time complexity."

[OK] Correct: Callbacks just run code you give them; the main time depends on how many times you call them, not on callbacks themselves.

Interview Connect

Understanding how callbacks affect time helps you explain your code clearly and shows you know how your program grows with input size.

Self-Check

"What if the callback itself contains a loop over the entire array? How would the time complexity change?"

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