What is Call Stack in JavaScript

call-stack-in-javascript

JavaScript Call Stack is a mechanism to keep track of multiple function calls or we can say call stack is to manage execution contexts.  The call stack is where the whole javascript code is getting executed.

When a function invokes execution, the JavaScript engine creates a function execution context for that function and gets pushed into the call stack. And when return from the function, the specified execution context gets popped out from the call stack. It follows the Last In First Out (LIFO) principle.

Let's see how the below code is executed in the call stack.

function a(){
	console.log("inside function a");
}

function b(){
	a();
}

b();

1. When the script begins, the JavaScript engine creates a global execution context (global() function) and pushed it into the call stack.

global execution context

2.  When JS invokes function b(), it creates an execution content to b() and is placed on top of global execution content.

functional execution diagram

3. Then begin to execute b(), because it was at the top of the call stack. And when function a() was invoked from function b(), another execution context for a() was created and placed on top of b().

functional execution diagram

 

4. Here global() is the global execution context, a() and b() are functional execution context. 
After the execution of function a(), the execution context for a() was popped out from the call stack.

popped out diagram

5. Then execution context for function b() gets popped out. Finally, the call stack gets empty the script stops execution.

When the call stack was filled with many execution contexts(like infinite recursive function calls), It results in Uncaught RangeError: Maximum call stack size exceeded.

Related Blogs

pm2 cluster

Scaling Node.js Applications With PM2 Clusters

Learn cluster modules in node js, install and configure PM2 in production, and implement PM2 clusters using the PM2 ecosystem without any modification in the current application code.

Factory Design Pattern in JavaScript

Factory Design Pattern in JavaScript

Factory allows you to handle all the object creation in a centralized location which helps the code clean, concise, and maintainable. Understand deeply with examples.

event loop and callback queue

Event Loop and Callback Queue in JavaScript

The event loop keeps monitoring the call stack and callback queue for executing callback functions. Read more about web APIs, callback queue, microtask queue, event loops, and starvation.

Cannot read property of undefined in JavaScript

Cannot read property of undefined in JavaScript

The TypeError: Cannot read property of undefined occurs when we try to read a property on an undefined variable or when we try to access a property on a DOM element that doesn't exist.

Can't set headers after they are sent to the client

Can't set headers after they are sent to the client

Error “Can't set headers after they are sent to the client” occurs when an express.js application tries to send multiple responses for a single request.

Greatest Common Divisor (GCD) in JavaScript

Find greatest common divisor (GCD) in JavaScript

Find the Greatest Common Divisor(GCD) of two numbers using the Euclidean algorithm in javascript. Calculate GCD for a given integer array.

How to Fix error:0308010C:digital envelope routines::unsupported

How to Fix error:0308010C:digital envelope routines::unsupported

To fix the error:0308010C:digital envelope routines::unsupported, enable the legacy provider for Node.js by passing --openssl-legacy-provider flag to webpack.

Javascript

What are Parameters, Arguments and Arguments Object in JavaScript

In JavaScript, the terms parameters, arguments, and arguments object are related to functions. Explains what they are with examples.

ckeditor

How to Integrate Custom Build CKEditor5 with React

Explains how to create a custom build CKEditor5 and integrate with react with sample code.