Johnson Ogwuru
19 Mar 2021
•
5 min read
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:
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;
global execution context
gets created and pushed into the call stack
.randomFunction
, the function is merely defined but not executed at this time.let generatedFunc = randomFunction()
and since it hasn't executed the function randomFunction()
yet, generatedFunc
would equate to undefined
.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()
.randomFunc()
, it begins to run the codes it finds within.multiplyBy2
, and since the function multiplyBy2
isn't executed yet, it would move to the return statement.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:
undefined
since at this time the function it references hasn't been executed.generatedFunc()
. When a local execution context is created, it consists of local memory.2
to the parameter num
.generatedFunc()
would get pushed into the call stack, and assuming the top position, the JavaScript thread would run every code found inside it.num * 2
, and since num
refers to 2
stored initially in local memory, it evaluates the expression 2*2
and returns it. 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
.The key things to take away from this article is that;
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
Ground Floor, Verse Building, 18 Brunswick Place, London, N1 6DZ
108 E 16th Street, New York, NY 10003
Join over 111,000 others and get access to exclusive content, job opportunities and more!