Synchronous vs asynchronous execution in Javascript - Performance Comparison

Time Complexity: Synchronous vs asynchronous execution

O(n)

Understanding Time Complexity

We want to see how the order of running code affects how long it takes. This helps us understand how tasks that wait or run later change the work done.

How does running code one after another compare to running some parts later?

Scenario Under Consideration

Analyze the time complexity of the following code snippet.

function syncTask(n) {
  for (let i = 0; i < n; i++) {
    console.log(i);
  }
}

function asyncTask(n) {
  setTimeout(() => {
    for (let i = 0; i < n; i++) {
      console.log(i);
    }
  }, 0);
}
    

This code shows a loop running immediately (synchronous) and the same loop running after a short delay (asynchronous).

Identify Repeating Operations

Identify the loops, recursion, array traversals that repeat.

• Primary operation: The for-loop that runs from 0 to n-1.
• How many times: Exactly n times in both synchronous and asynchronous versions.

How Execution Grows With Input

As n grows, the number of times the loop runs grows the same way whether synchronous or asynchronous.

Input Size (n)	Approx. Operations
10	10 loop steps
100	100 loop steps
1000	1000 loop steps

Pattern observation: The work inside the loop grows directly with n, no matter when it runs.

Final Time Complexity

Time Complexity: O(n)

This means the time to finish the loop grows in a straight line with the size of n, whether the code runs now or later.

Common Mistake

[X] Wrong: "Asynchronous code always runs faster because it runs later."

[OK] Correct: The total work inside the loop is the same; asynchronous just delays when it runs, not how much work it does.

Interview Connect

Understanding how synchronous and asynchronous code affects timing helps you explain how programs handle tasks and wait times. This skill shows you know how code flow impacts performance.

Self-Check

"What if we changed the asynchronous delay from 0 to 1000 milliseconds? How would the time complexity change?"

Practice

1. Which statement best describes synchronous execution in JavaScript?

easy

A. Tasks run only when the user clicks a button.

B. Tasks run in the background without waiting for others to finish.

C. Tasks run randomly without any order.

D. Tasks run one after another, waiting for each to finish before starting the next.

Solution

1. Step 1: Understand synchronous execution

   Synchronous means tasks happen one by one, each waiting for the previous to finish.

2. Step 2: Match description to options

   Tasks run one after another, waiting for each to finish before starting the next. clearly states tasks run one after another, which matches synchronous behavior.

3. Final Answer:

   Tasks run one after another, waiting for each to finish before starting the next. -> Option D

4. Quick Check:

   Synchronous = sequential task execution [OK]

Hint: Synchronous means wait for each task to finish before next [OK]

Common Mistakes:

• Confusing synchronous with asynchronous execution
• Thinking tasks run at the same time in synchronous
• Believing synchronous tasks run randomly

2. Which of the following is the correct syntax to create a simple asynchronous function in JavaScript?

easy

A. function async myFunction() {}

B. async function myFunction() {}

C. function myFunction async() {}

D. function myFunction() async {}

Solution

1. Step 1: Recall async function syntax

   In JavaScript, the keyword 'async' comes before the function keyword to declare an asynchronous function.

2. Step 2: Check each option

   async function myFunction() {} uses 'async function myFunction() {}' which is correct syntax.

3. Final Answer:

   async function myFunction() {} -> Option B

4. Quick Check:

   Async keyword before function = correct syntax [OK]

Hint: Async keyword goes before function keyword [OK]

Common Mistakes:

• Placing async after function name
• Putting async inside parentheses
• Using invalid order of keywords

3. What will be the output of the following code?

console.log('Start');
setTimeout(() => console.log('Middle'), 0);
console.log('End');

medium

A. Start\nEnd\nMiddle

B. Start\nMiddle\nEnd

C. Middle\nStart\nEnd

D. End\nStart\nMiddle

Solution

1. Step 1: Understand synchronous and asynchronous parts

   'console.log("Start")' runs immediately (synchronous). 'setTimeout' schedules 'Middle' to run later (asynchronous). 'console.log("End")' runs immediately after 'Start'.

2. Step 2: Determine order of output

   Output order is 'Start', then 'End', then 'Middle' because 'setTimeout' callback runs after current code finishes.

3. Final Answer:

   Start End Middle -> Option A

4. Quick Check:

   setTimeout delays callback, so logs after synchronous code [OK]

Hint: setTimeout callback runs after current code finishes [OK]

Common Mistakes:

• Assuming setTimeout runs immediately
• Thinking output order matches code order exactly
• Ignoring asynchronous delay even if zero

4. Identify the error in this code snippet that tries to use asynchronous execution:

function fetchData() {
  let data;
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(json => data = json);
  return data;
}
console.log(fetchData());

medium

A. Syntax error in arrow functions

B. fetch is not a function

C. fetchData returns before data is assigned, so returns undefined

D. Missing async keyword on fetchData

Solution

1. Step 1: Analyze asynchronous fetch behavior

   fetch returns a promise and .then callbacks run later, but fetchData returns immediately before data is set.

2. Step 2: Understand return value timing

   Since data is assigned asynchronously, fetchData returns undefined because data is not ready yet.

3. Final Answer:

   fetchData returns before data is assigned, so returns undefined -> Option C

4. Quick Check:

   Async assignment happens after return, so undefined returned [OK]

Hint: Return happens before async data arrives, so returns undefined [OK]

Common Mistakes:

• Thinking fetchData waits for fetch to finish
• Assuming data is ready immediately
• Confusing syntax errors with logic errors

5. You want to run three tasks: A, B, and C. Task B depends on A finishing, but C can run anytime. Which approach correctly uses asynchronous execution to run tasks efficiently?

hard

A. Run A asynchronously, then run B in A's callback, and run C asynchronously at the same time as A.

B. Run B and C asynchronously first, then run A synchronously after both finish.

C. Run A synchronously, then B synchronously, then C synchronously after both.

D. Run all tasks synchronously one after another.

Solution

1. Step 1: Understand task dependencies

   Task B depends on A finishing, so B must wait for A. Task C can run anytime, so it can run in parallel.

2. Step 2: Choose asynchronous approach respecting dependencies

   Run A asynchronously, then run B in A's callback, and run C asynchronously at the same time as A. runs A asynchronously, then runs B in A's callback (after A finishes), and runs C asynchronously at the same time as A, maximizing efficiency.

3. Final Answer:

   Run A asynchronously, then run B in A's callback, and run C asynchronously at the same time as A. -> Option A

4. Quick Check:

   Respect dependencies and run independent tasks in parallel [OK]

Hint: Run dependent tasks in callbacks, independent tasks in parallel [OK]

Common Mistakes:

• Running dependent tasks in parallel ignoring order
• Running all tasks synchronously wasting time
• Running independent tasks sequentially unnecessarily