Call stack behavior in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of nested function calls?

Consider the following JavaScript code. What will be printed to the console when start() is called?

Javascript

function first() {
  console.log('first');
}

function second() {
  first();
  console.log('second');
}

function start() {
  second();
  console.log('start');
}

start();

A "first" "second" "start"

B "start" "second" "first"

C "second" "first" "start"

D "first" "start" "second"

💡 Hint

Think about the order functions are called and when console.log runs inside each.

The call stack runs start(), which calls second(), which calls first(). So first() logs first, then second() logs, then start() logs last.

❓ Predict Output

intermediate

What happens with recursive calls?

Look at this recursive function. What will be the last number printed before the function stops?

Javascript

function countdown(n) {
  if (n <= 0) {
    console.log('Done');
    return;
  }
  console.log(n);
  countdown(n - 1);
}

countdown(3);

A "3"

B "1"

C "Done"

D "0"

💡 Hint

Think about when the base case is reached and what it prints.

The function prints numbers 3, 2, 1, then when n reaches 0 it prints 'Done' and stops.

❓ Predict Output

advanced

What is the output with asynchronous calls and call stack?

What will be the order of console logs when this code runs?

Javascript

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

A "Start" "Timeout" "End"

B "Timeout" "Start" "End"

C "End" "Start" "Timeout"

D "Start" "End" "Timeout"

💡 Hint

Remember that setTimeout callback runs after the current call stack is empty.

The synchronous logs run first: 'Start' then 'End'. The 'Timeout' runs later after the call stack clears.

❓ Predict Output

advanced

What error occurs with infinite recursion?

What error will this code produce when run?

Javascript

function recurse() {
  recurse();
}

recurse();

A ReferenceError: recurse is not defined

B RangeError: Maximum call stack size exceeded

C SyntaxError: Unexpected token

D TypeError: recurse is not a function

💡 Hint

Think about what happens when a function calls itself endlessly without stopping.

The function calls itself endlessly, filling the call stack until it overflows, causing a RangeError.

🧠 Conceptual

expert

How does the call stack handle nested asynchronous functions?

Given the code below, what is the order of console logs printed?

Javascript

async function first() {
  console.log('first start');
  await second();
  console.log('first end');
}

async function second() {
  console.log('second start');
  await Promise.resolve();
  console.log('second end');
}

first();
console.log('script end');

A "first start" "second start" "script end" "second end" "first end"

B "script end" "first start" "second start" "second end" "first end"

C "first start" "second start" "second end" "first end" "script end"

D "first start" "script end" "second start" "second end" "first end"

💡 Hint

Remember that await pauses the async function and lets the event loop run other code.

The synchronous logs run first: 'first start', then 'second start'. Then the code hits await and returns control to the event loop, so 'script end' prints next. Then the promises resolve and 'second end' and 'first end' print in order.