Call Stack in JavaScript

In JavaScript, the Call Stack is a core mechanism used by the engine to manage and track function execution.

• It keeps track of function calls in the order they are executed.
• It helps determine which function is currently running and what runs next.

Working of Call Stack

JavaScript operates in a single-threaded environment, meaning that it can only execute one operation at a time. The Call Stack is the part of JavaScript that keeps track of the execution process.

• Function Call: When a function is invoked, it is pushed onto the Call Stack and stays there until execution completes.
• Function Execution: The JavaScript engine executes the function’s code until it ends or calls another function.
• Nested Calls: If a function calls another function, the new function is pushed onto the stack while the previous one waits.
• Function Return: After execution finishes, the function is popped from the stack and control returns to the previous function.
• Program Completion: This continues until the stack is empty, indicating the program has finished executing.

The steps and illustrations below explain the call stack of the above function.

• [Step 1]: When the code loads in memory, the global execution context gets pushed in the stack.

• [Step 2]: The f2() function gets called, and the execution context of f2() gets pushed into the stack.

• [Step 3]: When f2() executes and calls f1(), the execution context of f1() is pushed onto the call stack.

• [Step 4]: Now the f1() function starts executing. A new stack frame of the console.log() method will be pushed to the stack.

• [Step 5]: console.log() prints "Hi by f1" and is popped from the stack, followed by f1() once it completes.
• [Step 6]: Similarly, console.log() prints "Hi by f2", then f2() finishes and is popped from the call stack.

Stack Overflow

A stack overflow occurs when the call stack runs out of memory due to too many nested function calls.

• Commonly caused by infinite or uncontrolled recursion.
• Can also occur when too many function calls are made without returning.

• funcA calls funcB, which adds funcA to the stack.
• funcB calls funcA, which adds funcB again.
• This cycle continues, eventually exceeding the available stack space

Need of Call Stack

• Tracks Function Execution: Keeps track of which function is running at any given time.
• Handles Nested Calls: Manages nested function calls, ensuring that functions run in the correct order.
• Manages Recursion: Helps with recursive functions by keeping track of each function call.
• Ensures Correct Return: Returns execution to the appropriate point after a function completes.
• Manages Flow: Maintains proper execution order in programs with multiple functions.