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.

Practice

1. What happens when a JavaScript function is defined but not called?

easy

A. The function runs twice.

B. The function code does not run.

C. The program crashes.

D. The function runs automatically once defined.

Solution

1. Step 1: Understand function definition

   Defining a function only tells the program what the function does but does not run it.

2. Step 2: Recognize function call requirement

   The function code runs only when the function is called explicitly.

3. Final Answer:

   The function code does not run. -> Option B

4. Quick Check:

   Function runs only when called [OK]

Hint: Functions run only when called, not when defined [OK]

Common Mistakes:

• Thinking function runs on definition
• Confusing declaration with execution
• Assuming automatic call

2. Which of the following is the correct way to call a function named greet in JavaScript?

easy

A. greet[];

B. call greet;

C. function greet();

D. greet();

Solution

1. Step 1: Identify function call syntax

   In JavaScript, calling a function requires its name followed by parentheses.

2. Step 2: Check each option

   greet(); uses greet(); which is correct. Others use invalid syntax.

3. Final Answer:

   greet(); -> Option D

4. Quick Check:

   Function call = name + () [OK]

Hint: Call functions with parentheses after name [OK]

Common Mistakes:

• Omitting parentheses
• Using wrong keywords
• Using brackets instead of parentheses

3. What is the output of the following code?

function add(a, b) {
  return a + b;
}

console.log(add(3, 4));

medium

A. 7

B. 34

C. undefined

D. NaN

Solution

1. Step 1: Understand function parameters and return

   The function add takes two numbers and returns their sum.

2. Step 2: Calculate the return value for add(3, 4)

   3 + 4 equals 7, so the function returns 7.

3. Final Answer:

   7 -> Option A

4. Quick Check:

   3 + 4 = 7 [OK]

Hint: Return adds numbers, not concatenates without strings [OK]

Common Mistakes:

• Treating numbers as strings
• Missing return statement
• Confusing output with parameters

4. Find the error in this code snippet:

function sayHi() {
  console.log('Hi!');
}
sayHi

medium

A. Missing parentheses to call the function.

B. Function name is incorrect.

C. console.log syntax error.

D. Function cannot be called outside definition.

Solution

1. Step 1: Check how the function is called

   The function sayHi is referenced but not called because parentheses are missing.

2. Step 2: Understand function call syntax

   To run the function, it must be called with parentheses: sayHi();

3. Final Answer:

   Missing parentheses to call the function. -> Option A

4. Quick Check:

   Function call needs () [OK]

Hint: Always use () to call functions [OK]

Common Mistakes:

• Forgetting parentheses
• Confusing function reference with call
• Assuming function runs automatically

5. Consider this code:

function multiply(x, y) {
  return x * y;
}

function calculate() {
  let result = multiply(2, 3);
  return result + 4;
}

console.log(calculate());

What is the output and why?

hard

A. 7, because multiply returns 3 and 3 + 4 = 7.

B. 24, because multiply returns 6 and 6 * 4 = 24.

C. 10, because multiply returns 6 and 6 + 4 = 10.

D. Error, because multiply is not called inside calculate.

Solution

1. Step 1: Trace multiply function call

   Calling multiply(2, 3) returns 2 * 3 = 6.

2. Step 2: Calculate final result in calculate

   The variable result is 6, then result + 4 equals 10.

3. Final Answer:

   10, because multiply returns 6 and 6 + 4 = 10. -> Option C

4. Quick Check:

   2*3=6; 6+4=10 [OK]

Hint: Follow return values step-by-step [OK]

Common Mistakes:

• Multiplying instead of adding final step
• Ignoring return values
• Assuming function not called