Function execution flow in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of nested function calls

What is the output of the following JavaScript code?

Javascript

function first() {
  return second();
}

function second() {
  return third();
}

function third() {
  return 'Done';
}

console.log(first());

A Error: third is not defined

B undefined

C "Done"

D "first"

💡 Hint

Think about how functions return values and how they call each other.

The function first calls second, which calls third, which returns the string 'Done'. This value is returned back through the call stack and logged.

❓ Predict Output

intermediate

Understanding asynchronous function execution

What will be printed to the console when this code runs?

Javascript

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

A "Start" "End" "Middle"

B "End" "Start" "Middle"

C "Middle" "Start" "End"

D "Start" "Middle" "End"

💡 Hint

Remember how setTimeout works with the event loop.

The synchronous console.logs run first, printing "Start" then "End". The setTimeout callback runs after the current call stack is empty, so "Middle" prints last.

🔧 Debug

advanced

Identify the error in recursive function

What does countdown(3) return when executed?

Javascript

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

countdown(3);

A undefined

B RangeError: Maximum call stack size exceeded

C "Done"

D 3 2 1

💡 Hint

Look at what the function returns and what is logged.

The function logs numbers 3, 2, 1 but does not return anything from recursive calls, so the overall call returns undefined.

❓ Predict Output

advanced

Output of function with variable shadowing

What is the output of this code?

Javascript

let x = 10;
function test() {
  let x = 20;
  function inner() {
    x++;
    console.log(x);
  }
  inner();
  console.log(x);
}
test();
console.log(x);

A 21 20 10

B 20 21 10

C 21 20 20

D 21 21 10

💡 Hint

Consider which x each function is using and how increments affect them.

The inner function increments the x declared in test (20 to 21) and logs 21. Then test logs x (21). The global x remains 10.

❓ Predict Output

expert

Output of complex function execution with closures and async

What will be the output of this code?

Javascript

function createCounter() {
  let count = 0;
  return {
    increment() {
      count++;
      console.log(count);
    },
    incrementAsync() {
      setTimeout(() => {
        count++;
        console.log(count);
      }, 0);
    }
  };
}

const counter = createCounter();
counter.increment();
counter.incrementAsync();
counter.increment();

A 1 3 2

B 1 2 3

C 1 2 2

D 1 3 3

💡 Hint

Think about when the async increment runs compared to synchronous increments.

First increment logs 1. Then incrementAsync schedules an increment after current code. Then increment logs 2. After current code finishes, incrementAsync runs, increments count to 3 and logs 3.