Call stack behavior in Javascript - Mini Project: Build & Apply

Understanding Call Stack Behavior in JavaScript

📖 Scenario: Imagine you are baking a cake and following a recipe step-by-step. Each step must finish before moving to the next. In programming, the call stack works similarly, keeping track of which function is running and what to do next.

🎯 Goal: You will write a simple JavaScript program with three functions calling each other. You will observe how the call stack works by printing messages when entering and exiting each function.

📋 What You'll Learn

Create three functions named first, second, and third.

Each function should print a message when it starts and when it ends.

The first function should call second, and second should call third.

Call the first function to start the chain.

Print the messages in the correct order to show call stack behavior.

💡 Why This Matters

🌍 Real World

Understanding the call stack helps debug errors and understand how programs run step-by-step.

💼 Career

Many programming jobs require understanding function calls and debugging call stack errors.

1

Create the third function

Write a function called third that prints "Entering third" when it starts and "Exiting third" when it ends.

Javascript

// Your code here

Hint

Use console.log to print messages inside the third function.

2

Create the second function that calls third

Write a function called second that prints "Entering second" when it starts, then calls the third function, and finally prints "Exiting second" when it ends.

Javascript

function third() {
    console.log("Entering third");
    console.log("Exiting third");
}

// Your code here

Hint

Call the third() function between the two console.log statements.

3

Create the first function that calls second

Write a function called first that prints "Entering first" when it starts, then calls the second function, and finally prints "Exiting first" when it ends.

Javascript

function third() {
    console.log("Entering third");
    console.log("Exiting third");
}

function second() {
    console.log("Entering second");
    third();
    console.log("Exiting second");
}

// Your code here

Hint

Call the second() function between the two console.log statements.

4

Call the first function and observe output

Write a line of code to call the first function to start the chain of calls and print all messages.

Javascript

function third() {
    console.log("Entering third");
    console.log("Exiting third");
}

function second() {
    console.log("Entering second");
    third();
    console.log("Exiting second");
}

function first() {
    console.log("Entering first");
    second();
    console.log("Exiting first");
}

// Your code here

Hint

Simply write first(); to start the function calls.

Practice

1. What does the call stack do in JavaScript?

easy

A. Keeps track of function calls in the order they are called

B. Stores variables and their values

C. Manages asynchronous events

D. Handles network requests

Solution

1. Step 1: Understand the role of the call stack

   The call stack tracks which functions are currently running and in what order.

2. Step 2: Differentiate from other JavaScript components

   Variables are stored in memory, asynchronous events are handled by the event loop, and network requests are managed separately.

3. Final Answer:

   Keeps track of function calls in the order they are called -> Option A

4. Quick Check:

   Call stack = function order tracking [OK]

Hint: Call stack = function call order tracker [OK]

Common Mistakes:

• Confusing call stack with event loop
• Thinking call stack stores variables
• Mixing call stack with network handling

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

easy

A. call foo();

B. function foo();

C. execute foo();

D. foo();

Solution

1. Step 1: Recall JavaScript function call syntax

   Functions are called by writing their name followed by parentheses, like foo();.

2. Step 2: Identify incorrect options

   "call foo();" and "execute foo();" are not valid JavaScript syntax. "function foo();" is a function declaration, not a call.

3. Final Answer:

   foo(); -> Option D

4. Quick Check:

   Function call = name + () [OK]

Hint: Call functions with name and parentheses () [OK]

Common Mistakes:

• Using 'call' keyword incorrectly
• Confusing declaration with call
• Adding extra keywords like 'execute'

3. What will be the output of the following code?

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

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

first();

medium

A. second\nfirst\nfirst again

B. first\nsecond\nfirst again

C. first\nfirst again\nsecond

D. first again\nsecond\nfirst

Solution

1. Step 1: Trace the call stack execution order

   Calling first() prints 'first', then calls second() which prints 'second'. After second() finishes, control returns to first() and prints 'first again'.

2. Step 2: Confirm output sequence

   The output lines are: 'first', 'second', 'first again' in that order.

3. Final Answer:

   first second first again -> Option B

4. Quick Check:

   Call stack order = first, second, first again [OK]

Hint: Follow function calls step-by-step [OK]

Common Mistakes:

• Assuming all logs run before second()
• Mixing order of console logs
• Ignoring return to first() after second()

4. Identify the error in the following code related to call stack behavior:

function a() {
  b();
}

function b() {
  a();
}

a();

medium

A. Function b is not defined

B. Syntax error due to missing semicolons

C. Infinite recursion causing stack overflow

D. No error, code runs fine

Solution

1. Step 1: Analyze function calls and recursion

   Function a() calls b(), and b() calls a() again, creating an endless loop.

2. Step 2: Understand call stack impact

   This infinite mutual recursion causes the call stack to grow until it overflows, leading to a runtime error.

3. Final Answer:

   Infinite recursion causing stack overflow -> Option C

4. Quick Check:

   Mutual recursion without stop = stack overflow [OK]

Hint: Watch for functions calling each other endlessly [OK]

Common Mistakes:

• Thinking missing semicolons cause error
• Assuming functions are undefined
• Believing code runs without error

5. Consider this code:

function factorial(n) {
  if (n === 0) return 1;
  return n * factorial(n - 1);
}

console.log(factorial(3));

How many times is the factorial function added to the call stack during factorial(3) execution?

hard

A. 4 times

B. 6 times

C. 1 time

D. 3 times

Solution

1. Step 1: Trace recursive calls for factorial(3)

   Calls happen for n=3, n=2, n=1, and n=0. Each call adds a new frame to the call stack.

2. Step 2: Count total calls added to the stack

   There are 4 calls total before reaching the base case (n=0), so 4 stack frames are added.

3. Final Answer:

   4 times -> Option A

4. Quick Check:

   Recursive calls = n+1 stack frames [OK]

Hint: Count calls including base case for recursion [OK]

Common Mistakes:

• Counting only n times, missing base case call
• Confusing total calls with return steps
• Assuming single call for recursion