Understanding the JavaScript call stack through illustrations

Judicial gavel and books
according to Racool_studio from freepik

In the simplest terms, the call stack is the stack that controls the order in which functions are executed. This is it. It is the mechanism that controls which function is executed and when.

A stack is a LIFO data structure – last in, first out. This means that the last function entered into the call stack will be executed first.
How does a function get into the call stack?

As the code evaluates, each function that is executed is pushed onto the call stack. Another interesting question (even more interesting) is when does the function come off the call stack? this happens only after all the functions that were started have been executed (if any) and after all the lines of code in it have been evaluated.

In this case, we will see that each function is completed when all the lines of code in it are executed.

The animation shows the call stack and the creation of containers within it
Image by the author

In this case, we will have a function call from within another function.

In the call stack in this case we will see:

Image by the author

In this example, we can better understand the term “stack”. By calling a function inside another function, we can see how these “boxes” pile up on top of each other to form a stack of “boxes”.
Each box will run the code inside it. If the function is called, a new “box” is created inside. If there is a simple command such as console.log, it will simply be executed. After all the code is executed, the “box” exits the stack.

I’m glad you asked. These fields are the context of the execution of the function. Each time a function is called, a new function execution context is created. The execution context is responsible for storing all members and declarations executed in or passed to the function.

An example is shown in the animation above. Function callingToWitness gets a parameter witnessNumber this parameter is kept in the context of its execution. We see that this function is executed multiple times, but its context is different each time.

What happens if we try to print a member that is not declared in our execution context? Let’s see:

Image by the author

Thus, the first execution context is the general execution context and contains all code that is outside the declared functions. Inside it we will see execution contexts for each function execution.
In the above example we can see that while call a witness function was executed, its execution context did not contain a named member the name of the judge or Prosecutor’s namebut one of the ancestral execution contexts of these members had.
Let’s understand better call a witness function execution:

  1. Press who am I: This parameter is declared in the execution scope of the function and in each of the execution contexts of its predecessor. It is loaded from the execution context of the function. We will always look for the nearest execution context in which the member is declared, obviously in this case it is the execution context of the current function.
  2. Press Prosecutor’s name: This parameter was not declared in the function itself. We can see that it was declared in prosecution function, this is the execution context that executed our function and therefore our function can read its members.
  3. Press the name of the judge: This parameter was also not declared in the function itself. It was declared in a generic execution context, which is one of the ancestors of our function, so it can read its members.

Call stack should be understood more like a matryoshka than a simple stack.
Execution contexts open inside each other and have, in addition to their own context, the context of their ancestor’s execution contexts.

matryoshka doll
photo from Didssph on the Unsplash

I hope the given examples helped you better understand the call stack, execution order and parameters available to the currently executing code. You should now have a strong foundation for understanding execution context and the order in which code is executed.


Scroll to Top