JavaScript is a single-threaded, single concurrent language, meaning it can handle 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 would 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.
Since the call stack is single, 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 execution context 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 is simply put as the environment in which a JavaScript code is executed. An execution context consists of:
- The thread of execution and
- 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, and JavaScript creates an execution context for that functions 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 execution context
is created, this time local
, it is pushed into the call stack, where it assumes the top position and automatically, this is where the JavaScript thread would move to, running instructions it finds there.
JavaScript knows it's 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.
So the moment, JavaScript encounters a return statement in the course of executing a function, it immediately knows that's the end of the function and erases the execution context that was created and 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.
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;
- The
global execution context
gets created and pushed into thecall stack
. - 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. - Next JavaScript, comes to the statement
let generatedFunc = randomFunction()
and since it hasn't executed the functionrandomFunction()
yet,generatedFunc
would equate toundefined
. - Now, since JavaScript has encountered 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 callglobal()
further down in the call stack, making the JavaScript thread to reside in the contextrandomFunc()
. - Since the JavaScript thread is inside the
randomFunc()
, it begins to run the codes it finds within. - 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 functionmultiplyBy2
isn't executed yet, it would move to the return statement. - 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:
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:
- The variable result is equated to
undefined
since at this time the function it references hasn't been executed. - JavaScript creates another execution context we would call
generatedFunc()
. When a local execution context is created, it consists of local memory. - In the local memory, we would assign the argument
2
to the parameternum
. - Let's not forget, the local execution context
generatedFunc()
would get pushed into the call stack, and assuming the top position, the JavaScript thread would run every code found inside it. - When JavaScript encounters the return statement, it evaluates
num * 2
, and sincenum
refers to2
stored initially in local memory, it evaluates the expression2*2
and returns it. - In returning the evaluation of the expression
2*2
, JavaScript terminates the execution of thegeneratedFunc
function, the returned value gets stored in the variableresult
then the call stack gets popped, removing thegeneratedFunc()
context and getting the thread back to theglobal()
context. So when weconsole.log(result)
, we get4
.
In conclusion:
The key things 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 is how the JavaScript thread learns which environment to take instruction from and execute.
Thank you for reading. If this article was helpful please give it some reactions and share, so others can find it. I will like to read your comments also.
credits to FreecodeCamp
for the images used in this article
Top comments (12)
Nice writeup! The call stack is something that I don't really know how it works, but always feel like I should 🤣So this helps.
BTW, a quick tip if you want neat syntax highlighting on your examples, you can put
javascript
in your code examples, like this:To get highlighted output like this:
Good post!
Yeah, you should 🤣. Thanks for the tip, have applied it now.
Great article!!!
Thank you
I've to read the article or some sections more than once time, but "non ti preocupare" It was for my english hehe. Nice post,man, so illuminating and interesting ;)
Hehe, I'm glad you enjoyed it. Thanks alot, for teaching me an Italian phrase... 'non ti preocupare'(no worries) 😁
Inside Javascript. Nice read!
I'm glad you enjoyed it chinedu
Very nice. Thank you. I've been developing JavaScript for most of a decade and the call stack still holds mystery. I appreciate the explanation.
One pedantic suggestion: "encase" -> "in case"
Thanks, Clint. And Good catch too.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.