JavaScript Call Stack for Functions and Execution Contexts.

What is the Call Stack?

Every javascript execution environment has a call stack. That call stack is used to track function invocations.

A Stack is a last-in-first-out (LIFO) simple data structure. The top element that we can top out of the stack is the last element that we push into it.

In the case of the JavaScript call stack, these elements are function references.

Since JavaScript is single-threaded, there is only one stack and it can do one thing at a time. If the stack is executing something, nothing else will happen until the stack is done executing that thing.

function f1() { f2(); };
function f2() { f3(); };
function f3() { f4(); };
function f4() { display.log('done'); };

f1();        

When we call multiple functions that call each other, we naturally form a stack then we backtrack the function invocations back to the first caller.

Let’s walk through a simple example to demonstrate what happens in the stack when we invoke functions.

Here we have 3 simple functions: add(). double() which calls add(). printDouble() which calls double().

const add = (a, b) => z;

const double = (a) => add(a, a);

const printDouble = (a) => {
  const output = double(a);
  display.log(output);
};

printDouble(9);        

Now let’s assume that all these functions are wrapped in an immediately invoked function expression (IIFE).

When we run the above code, JavaScript uses the stack to record where the program is currently executing. Every time we step into a function, a reference to that function gets pushed into the call stack and every time we return from a function, its reference gets popped out of the call stack It’s really that simple.

So the execution starts with the Wrapping IFFY function which is an anonymous function. So we push that into the stack. The IFFY function defines other functions but only executes printDouble. PrintDouble gets pushed into the stack. PrintDouble() calls double(), so we push double() into the stack, double() calls add() and we push add() into the stack. And so far, we’re still executing all functions we have not returned from any of them.

Note how every time a function is added to the stack, its arguments and local variables are added too in that same level.

You’ll sometimes hear the term stack frame to reference the function and its arguments and variables.

Now When we return from add(), we pop add out of the stack. We’re done with it. Then we return from double(), so double() gets popped out of the stack too. Now the execution continues in printDouble(). We get into a new function called console.log that gets pushed into the stack and then it gets popped immediately because it did not call any other functions. Then we implicitly return from printDouble(), so we pop printDouble() out of the stack and finally, we pop the anonymous iffy itself out of the stack.

Conclusion:

In conclusion, the JavaScript call stack is a crucial mechanism for tracking function invocations in the execution environment. It operates as a last-in-first-out (LIFO) data structure, with each function reference being pushed onto the stack when invoked and popped out when the function completes. As JavaScript is single-threaded, the stack ensures that only one task is executed at a time. The stack frames, comprising function references along with their arguments and local variables, illustrate the execution flow. In the provided example, the IIFE initiates the stack, and as functions are called and returned, the stack dynamically adjusts, reflecting the sequential execution of the program. Understanding the call stack is fundamental for comprehending the flow of function execution in JavaScript.

If you found this article to be useful, kindly show your appreciation by giving it a thumbs up.