What is the Call Stack in JavaScript ?

In JavaScript, the Call Stack is an essential concept that helps the JavaScript engine keep track of function execution. It plays a vital role in managing the execution order of functions and determining how the JavaScript program handles function calls.

How Does the Call Stack Work?

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 called, the JavaScript engine pushes the function onto the Call Stack. The function remains in the stack until it completes its execution.
• Executing the Function: The JavaScript engine processes the function in the stack. It runs the code inside the function until it reaches the end or encounters another function call.
• Nested Function Calls: If a function calls another function, the new function is pushed onto the Call Stack. The engine continues to execute the newly pushed function while the previous one waits for completion.
• Returning from a Function: Once a function finishes executing, it is removed (popped) from the stack. The JavaScript engine then continues executing the function that is now at the top of the stack.
• Completion of Program: The process continues until all functions in the stack are executed and removed. Once the stack is empty, the JavaScript engine has completed the execution of the program.

Now let's understand this with the help of example

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

function f2() {
    f1();
    console.log('Hi by f2!');
}

f2();

Output

Hi by f1!
Hi by f2!

In this example: 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: The execution of f2() starts and during its execution, the f1() function gets called inside the f2() function. This causes the execution context of f1() to get pushed in 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: When the console.log() method runs, it will print "Hi by f1" and then it will be popped from the stack. The execution context will go back to the function and now there are no lines of code that remain in the f1() function, and as a result, it will be popped from the call stack.
• Step 6: This will similarly happen with the console.log() method that prints the line "Hi by f2" and then finally the function f2() would finish and would be pushed off the stack.

What is Stack Overflow ?

A stack overflow occurs when the call stack exceeds its memory limit, typically due to excessive function calls. This can happen when a program enters into infinite recursion or if too many functions are called and the stack runs out of space.

function funcA() {
  funcB();
}

function funcB() {
  funcA();
}

In this example

• 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

Why Do We Need the 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 Proper Return: Ensures the program returns to the correct point after each function finishes executing.
• Manages Program Flow: Helps maintain the correct flow of execution, especially in complex programs with many functions.

Conclusion

The Call Stack in JavaScript manages the order of function execution, handling nested calls and recursion. It ensures functions run in the correct sequence and are properly returned to after execution. Improper use, like infinite recursion, can lead to a stack overflow. Understanding it is key to maintaining efficient program flow.

Execution Context

Visit Course