Synchronous vs asynchronous execution in Javascript - Practice Questions

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this synchronous code?

Consider the following JavaScript code snippet. What will be printed to the console?

Javascript

console.log('Start');
console.log('Middle');
console.log('End');

A End\nMiddle\nStart

B Middle\nStart\nEnd

C Start\nEnd\nMiddle

D Start\nMiddle\nEnd

💡 Hint

Synchronous code runs line by line in order.

All console.log statements run one after another in the order they appear, so the output is Start, then Middle, then End.

❓ Predict Output

intermediate

What is the output of this asynchronous code with setTimeout?

Look at this JavaScript code using setTimeout. What will be printed to the console and in what order?

Javascript

console.log('First');
setTimeout(() => console.log('Second'), 0);
console.log('Third');

A First\nSecond\nThird

B First\nThird\nSecond

C Second\nFirst\nThird

D Third\nFirst\nSecond

💡 Hint

setTimeout with 0 delay runs after the current call stack is empty.

The synchronous console.log('First') runs first, then console.log('Third'). The setTimeout callback runs last, even with 0 delay.

❓ Predict Output

advanced

What is the output of this Promise-based asynchronous code?

Analyze this JavaScript code using Promises. What will be printed to the console and in what order?

Javascript

console.log('A');
Promise.resolve().then(() => console.log('B'));
console.log('C');

A A\nC\nB

B A\nB\nC

C B\nA\nC

D C\nA\nB

💡 Hint

Promise.then callbacks run after the current synchronous code but before setTimeout callbacks.

The synchronous logs 'A' and 'C' run first. The Promise.then callback runs after, printing 'B'.

❓ Predict Output

advanced

What error does this asynchronous code cause?

What error will this JavaScript code produce when run?

Javascript

setTimeout(() => {
  console.log(x);
}, 10);

let x = 5;

A TypeError: x is not a function

B undefined

C 5

D ReferenceError: Cannot access 'x' before initialization

💡 Hint

Variables declared with let are hoisted but not initialized until their declaration line.

The setTimeout callback runs after 10ms, by which time x is initialized to 5, so it prints 5.

🧠 Conceptual

expert

Which option best describes the JavaScript event loop behavior?

Choose the correct statement about how JavaScript handles synchronous and asynchronous code execution with the event loop.

A Synchronous code runs first, then microtasks, then macrotasks in order.

B Macrotasks run before synchronous code and microtasks.

C Microtasks run only after all macrotasks are completed.

D Asynchronous code runs before any synchronous code.

💡 Hint

Remember the order: synchronous code, then microtasks, then macrotasks.

JavaScript runs all synchronous code first, then microtasks (like Promise callbacks), then macrotasks (like setTimeout callbacks).

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