JavaScript execution flow - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Understanding event loop with setTimeout

What will be the output of the following code snippet?

Javascript

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

A "Start" "Timeout" "End"

B "End" "Start" "Timeout"

C "Start" "End" "Timeout"

D "Timeout" "Start" "End"

💡 Hint

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

The synchronous console.log statements run first, printing "Start" then "End". The setTimeout callback runs last, printing "Timeout".

❓ Predict Output

intermediate

Variable hoisting with var

What will be the output of this code?

Javascript

console.log(x);
var x = 5;
console.log(x);

A undefined undefined

B ReferenceError 5

C 5 5

D undefined 5

💡 Hint

Variables declared with var are hoisted but not initialized.

The declaration of x is hoisted, so the first console.log prints undefined. Then x is assigned 5, so the second console.log prints 5.

❓ Predict Output

advanced

Promise execution order

What is the output order of this code?

Javascript

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

A "C" "A" "B"

B "A" "C" "B"

C "B" "A" "C"

D "A" "B" "C"

💡 Hint

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

"A" and "C" are logged synchronously. The Promise callback logs "B" after the synchronous code.

❓ Predict Output

advanced

Async function execution flow

What will this code print?

Javascript

async function f() {
  console.log('1');
  await null;
  console.log('2');
}
f();
console.log('3');

A "1" "3" "2"

B "1" "2" "3"

C "3" "1" "2"

D "3" "2" "1"

💡 Hint

Await pauses the async function after the current synchronous code.

"1" is logged immediately. Then the function pauses at await. "3" logs next. Finally, "2" logs after the await.

🧠 Conceptual

expert

Call stack and recursion depth

Consider this recursive function. What will happen when calling recurse(3)?

Javascript

function recurse(n) {
  if (n === 0) return 'Done';
  return recurse(n - 1) + n;
}
console.log(recurse(3));

A "Done123"

B "123Done"

C TypeError

D RangeError

💡 Hint

Think about how the recursion returns and concatenates strings.

The base case returns "Done". Then each recursive call adds the current number to the string, resulting in "Done123".