Let's understand about JavaScript Call Stack

JavaScript engine uses a call stack to manage execution contexts: the Global Execution Context and Function Execution Contexts.

Call Stack is based on the LIFO principle. LIFO stands for Last-In-First-Out

Example

function second() { } function first() { second() }

first();

When the script runs, the JavaScript engine places the global execution context on the call stack.

After that JavaScript Engine executes the call to the first function and creates a function execution context for the first() function and pushes it on top of the call stack.

Then JavaScript engine starts executing the first() since it is at the top of the call stack.

The first() function calls second() function. And, the JavaScript engine creates another function execution context for the second() function and places it on the top of the call stack.

JavaScript engine executes the second() function and pops it off the call stack. Then it executes the first() function and pops it off all stack.

Now, the call stack is empty so the script stops executing.

What if the number of the execution contexts exceeds the size of the stack?

The call stack has a fixed size, depending on the implementation of the host environment, either the web browser or NodeJS and if the number of the execution contexts exceeds the size then Stack Overflow will occur.

For example, when you execute a recursive function that has no exit condition, it will result in a stack overflow error.