JavascriptDemystifying the JavaScript call stack

Johnson Ogwuru

Johnson Ogwuru

7 minutes read

Originally published here

JavaScript is a single-threaded, concurrent language. As a concurrent language, it only handles one task at a time or a piece of code at a time. It has a single call stack, which along with other parts constitutes the Javascript Concurrency Model (implemented inside of V8).

This article will be focusing on explaining what the call stack is, and why it's important and needed by JavaScript.

At the most basic level, the call stack is a data structure that utilizes the Last in, First out(LIFO) principle to store and manage function invocations.

Because there is only one call stack, function execution is done one at a time from top to bottom, making the call stack synchronous. In managing and storing function invocations, the call stack follows the Last in, First Out principle(LIFO) and this entails that the last function execution that gets pushed into the call stack is always the one to be cleared off, the moment the call stack is popped.

What purpose does the call stack serve in a JavaScript application? How does JavaScript make use of this feature?

When the JavaScript engine runs your code, an execution context is created. This is the first execution context that is created and it is called the Global Execution Context. Initially, this Execution Context will consist of two things - a global object and a variable called this.

Now when a function is executed in JavaScript (when a function is called with the () after its label), JavaScript creates a new execution context called the local execution context. So for each function execution, a new execution context is created.

Just in case you were wondering, an execution context simply put, is the environment in which a JavaScript code is executed. An execution context consists of:

  • The thread of execution
  • A local memory

Since JavaScript would be creating a whole bunch of execution contexts(or execution environments), and it has just a single thread, how does it keep track of which execution context its thread should be in and which it should return to? We simply say the call stack.

What happens is that, when a function is executed, JavaScript creates an execution context for that function's execution. The newly created execution context is pushed to the call stack. Now whatever is on top of the call stack is where the JavaScript thread would reside in. Initially, when JavaScript runs an application and creates the global execution context, it pushes this context into the call stack and since it appears to be the only entry in the call stack, the JavaScript thread lives in this context and runs every code found there.

Now, the moment a function is executed, a new local execution context is created and is pushed into the call stack, where it assumes the top position. Automatically, this top position is where the JavaScript thread would move to, in order to run the instructions it finds there.

JavaScript knows it is time to stop executing a function once it gets to a return statement or just curly braces. If a function has no explicit return statement, it returns undefined. Either way, a return happens, and the created execution context is erased. At the same time, the execution context that was erased gets popped off the call stack and the JavaScript thread continues to the execution context that assumes the top position.

To further illustrate how this works, let's take a look at the piece of code below, I would work us through how it is executed.

1 2 3 4 5 6 7 8 9 10 function randomFunction() { function multiplyBy2(num) { return num * 2; } return multiplyBy2; } let generatedFunc = randomFunction(); let result = generatedFunc(2); console.log(result) //4

With the little function above, I would illustrate how JavaScript runs applications and how it makes use of the call stack.

The first time JavaScript runs this application if we remember the global execution context gets pushed into the call stack, for our function above the same thing happens, let's walk through it;

  1. The global execution context gets created and pushed into the call stack.
  2. JavaScript creates a space in memory to save the function definition and assign it to a label randomFunction, the function is merely defined but not executed at this time.
  3. Next JavaScript, comes to the statement let generatedFunc = randomFunction() and since it hasn't executed the function randomFunction() yet, generatedFunc would equate to undefined.
  4. Next up, JavaScript encounters a parenthesis, which signifies that a function is to be executed. It executes the function, and from earlier we remember that when a function is executed, a new execution context is created, the same thing happens here. A new execution context we may call randomFunc() is created and it gets pushed into the call stack, taking the top position and pushing the global execution context, which we would call global() further down in the call stack, making the JavaScript thread to reside in the context randomFunc().
  5. Since the JavaScript thread is inside the randomFunc(), it begins to run the codes it finds within.
  6. It begins by asking JavaScript to make space in memory for a function definition which it would assign to the label multiplyBy2, and since the function multiplyBy2 isn't executed yet, it would move to the return statement.
  7. By the time JavaScript encounters the return keyword, we already know what would happen right? JavaScript terminates the execution of that function, deletes the execution context created for the function, and pops the call stack, removing the execution context of the function from the call stack. For our function when JavaScript encounters the return statement, it returns whatever value it is instructed to return to the next execution context following and in this case, it is our global() execution context.

In the statement, return multiplyBy2, it would be good to note that, what is returned isn't the label multiplyBy2 but the value of multiplyBy2. Remember we had asked JavaScript to create a space in memory to store the function definition and assign it to the label multiplyBy2. So when we return, what gets returned is the function definition and this gets assigned to the variable generatedFunc, making generatedFunc what we have below:

1 2 3 4 5 let generatedFunc = function(num) { return num * 2; };

Now we are saying, JavaScript should create a space in memory for the function definition previously knowns as multiplyBy2 and this time, assign it to the variable or label generatedFunc.

In the next line, let result = generatedFunc(2), we execute the function definition which generatedFunc refers to (previously our multiplyBy2), then this happens:

  1. The variable result is equated to undefined since at this time the function it references hasn't been executed.
  2. JavaScript creates another execution context, this time a local execution context we would call generatedFunc(). When a local execution context is created, it comes with it a local memory.
  3. In the local memory, we would assign the argument 2 to the parameter num.
  4. Let's not forget that the local execution context generatedFunc() would get pushed into the call stack, and assuming the top position, and the JavaScript thread would run every code found inside it.
  5. When JavaScript encounters the return statement, it evaluates num * 2, and since num refers to 2 stored initially in local memory, it evaluates the expression 2*2 and returns it.
  6. In returning the evaluation of the expression 2*2, JavaScript terminates the execution of the generatedFunc function, the returned value gets stored in the variable result then the call stack gets popped, removing the generatedFunc() context and getting the thread back to the global() context. So when we console.log(result), we get 4.

In conclusion:

The key thing to take away from this article is that - For every function execution, a new execution context is created, which gets popped into the call stack and this is how the JavaScript thread learns which environment to take instructions from for execution.

Johnson Ogwuru
Senior Software Engineer

Johnson is a Software Engineer at Factorial. He loves taking code to production and the “god feeling” he gets when people are served by his innovation.

Liked this read?Join our team of lovely humans

We're looking for outstanding people like you to become part of our team. Do you like shipping code that adds value on a daily basis while working closely with an amazing bunch of people?

Made with ❤️ by Factorial's Team