What is the Call Stack in JavaScript ?

In this article, we will learn about the Call Stack in Javascript which is a mechanism to keep track of the multiple function calls.

Introduction to Call Stack in JavaScript

A call stack is a way for the Java engine to keep track of its place in code that calls multiple functions. It has the information on what function is currently being run and what functions are invoked from within that function…

Also, the JavaScript engine uses a call stack to manage execution context:

• Global execution context
• Function execution context

The call stack works based on the LIFO principle i.e., last-in-first-out.

When you execute a script, the JavaScript engine creates a global execution context and pushes it on top of the call stack.

Whenever a function is called, the JavaScript engine creates a function execution context for the function, pushes it on top of the call stack, and starts executing the function.

If a function calls another function, the JavaScript engine creates a new function execution context for the function that is being called and pushes it on top of the call stack.

When the current function completes, the JavaScript engine pops it off the call stack and resumes the execution where it left off.

The script will stop when the call stack is empty.

JavaScript call stack example

Let’s start with the following example:

function sum(sum1, sum2) {
    return sum1 + sum2;
}

function averageValue(sum1, sum2) {
    return sum(sum1, sum2) / 2;
}

let y = averageValue(20, 30);

• When the JavaScript engine executes this script, it places the global execution context (denoted by main() or global() function on the call stack.
• The global execution context enters the creation phase and moves to the execution phase.
• The JavaScript engine executes the call to the averageValue(20, 30) function and creates a function execution context for the average() function and pushes it on top of the call stack.
• The JavaScript engine starts executing the averageValue() since because the averageValue() function is on the top of the call stack.
• The averageValue() function calls sum() function. At this point, the JavaScript engine creates another function execution context for the sum( ) function and places it on the top of the call stack.
• JavaScript engine executes the sum() function and pops it off the call stack.
• At this point, the averageValue() function is on the top of the call stack, JavaScript engine executes and pops it off the call stack.
• Now, the call stack is empty so the script stops executing.

Stack overflow

The call stack has a fixed size, depending on the implementation of the host environment, either the web browser or Node.js.

If the number of the execution contexts exceeds the size of the stack, a stack overflow error will occur.

For example, when you execute a recursive function that has no exit condition, the JavaScript engine will issue a stack overflow error:

function fn() {
    fn();
}

fn(); // stack overflow

Asynchronous JavaScript

JavaScript is the single-threaded programming language. This means that the JavaScript engine has only one call stack. Therefore, it only can do one thing at a time.

When executing a script, the JavaScript engine executes code from top to bottom, line by line. In other words, it is synchronous.

Asynchronous means the JavaScript engine can execute other tasks while waiting for another task to be completed. For example, the JavaScript engine can:

• Request for data from a remote server.
• Display a spinner
• When the data is available, display it on the webpage.

To do this, the JavaScript engine uses an event loop, which will be covered in the next tutorial.

Summary

• JavaScript engine uses a call stack to manage execution contexts.
• The call stack uses the stack data structure that works based on the LIFO (last-in-first-out) principle.