JavaScript runtime overview - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of asynchronous code with setTimeout

What is the output of this JavaScript code snippet?

Javascript

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

A "Timeout" "Start" "End"

B "Start" "End" "Timeout"

C "Start" "Timeout" "End"

D "End" "Start" "Timeout"

💡 Hint

Remember that setTimeout callbacks run after the current call stack is empty.

The synchronous console.log('Start') runs first, then setTimeout schedules the callback to run later, and finally console.log('End') runs. The callback runs after the synchronous code, so the output order is Start, End, Timeout.

🧠 Conceptual

intermediate

Understanding the call stack and event loop

Which statement best describes the role of the event loop in the JavaScript runtime?

A It handles asynchronous callbacks by moving them from the callback queue to the call stack when the stack is empty.

B It manages the execution of synchronous code only.

C It pauses the call stack until all asynchronous operations complete.

D It executes all asynchronous code immediately before synchronous code.

💡 Hint

Think about how JavaScript handles asynchronous events without blocking synchronous code.

The event loop waits for the call stack to be empty and then moves callbacks from the callback queue to the call stack to execute them. This allows asynchronous code to run without blocking synchronous code.

❓ Predict Output

advanced

Output of Promise and microtasks

What will be the output of this code snippet?

Javascript

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

A "B" "A" "C"

B "A" "B" "C"

C "A" "C" "B"

D "C" "A" "B"

💡 Hint

Promises use microtasks which run after the current synchronous code but before setTimeout callbacks.

First, console.log('A') runs. Then the promise callback is scheduled as a microtask. Next, console.log('C') runs synchronously. After the synchronous code finishes, the microtask runs, printing B.

🔧 Debug

advanced

Identify the error in this asynchronous code

What error will this code produce when run?

Javascript

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

A SyntaxError

B undefined

C 10

D ReferenceError: Cannot access 'x' before initialization

💡 Hint

Consider how variable declarations with let behave inside blocks.

The variable x is declared with let after it is accessed. This causes a temporal dead zone error, so accessing x before its declaration throws a ReferenceError.

🚀 Application

expert

Predict the output of nested asynchronous calls

What is the output order of this code?

Javascript

console.log('1');
setTimeout(() => {
  console.log('2');
  Promise.resolve().then(() => console.log('3'));
}, 0);
Promise.resolve().then(() => console.log('4'));
console.log('5');

A "1" "5" "4" "2" "3"

B "1" "2" "3" "4" "5"

C "1" "5" "2" "4" "3"

D "1" "4" "5" "2" "3"

💡 Hint

Remember microtasks run after synchronous code but before setTimeout callbacks. Also, microtasks inside setTimeout run after that callback.

First, console.log('1') runs. Then setTimeout schedules a callback. Next, Promise.resolve().then(() => console.log('4')) schedules a microtask. Then console.log('5') runs. After the synchronous code finishes, the microtask runs printing 4. Then the setTimeout callback runs printing 2. Inside it, a promise microtask is scheduled and runs right after the callback finishes, printing 3.