How does Javascript work? An overview of the fundamentals.
Hey Hey guys, in this article I want to talk about a topic that I didn’t fully understand until some time ago. I’ve been working as a full stack developer for almost 5 years now and to be very honest with you, I didn’t fully understand how the Javascript language worked under the hood.
I studied Computer Science in college and as many of you know, javascript isn’t a language taught in school, like Java or C++. The first time that I came across with Javascript I was already employed as a Junior developer at Itau. Thus, I developed a lot of projects using the language without knowing much of its core concepts. Not that there is a huge problem with not knowing every little detail about the language, but if we want to become better developers we need to have a deeper understanding of the tools that we work with.
A Roman philosopher said:
“While we teach, we learn”.
Seneca
That is why I decided to write this article.
I will start with this statement which I think it’s quite accurate in defining the Javascript language:
Javascript is a single threaded language that can be non-blocking.
Alright, but what does it mean? Let’s have a look on the image below:
The Javascript code that we write needs an environment in which it can be run. Each browser has its own implementation of the JS Environment. In chrome you will find the V8 Engine, edge uses Chakra JS Engine, firefox uses SpiderMonkey and safari WebKit.
The JS Environment is basically compose by a Memory Heap, a Stack and a Call Stack. And, what are those? hahah
The memory heap is where the dynamic memory allocation will take place. e.g. where your objects, functions, arrays will be stored.
The stack is used to store static data whose size is known by the engine during compile time. e.g. primitives, variable initialisation.
The call stack keeps track of which part of the code is being executed.
Let’s see an example of how the Call Stack works.
In the code example above, we have two simple functions declared and on line 8 we call the function one to execute.
The Call Stack will look like this after line 8 executes.
Then, we call function two that will be added to the call stack as well and finally the console.log()will be called and added to the call stack which will look like this:
Then it starts to pop the functions that are finished. First it will pop the console.log() function, then it pops function two and finally function one.
This is a very simple example to illustrate how the call stack works with Javascript.
Do you remember the statement that I mentioned in the beginning of this article?
Javascript is a single threaded language that can be non-blocking.
So, what “single threaded” means is that there is only one Call Stack. In other words, you can do only one thing at a time.
Awesome! now to understand the last part of the statement “a language that can be non-blocking” we will need to talk about the Javascript Run-Time Environment.
The Javascript Run-Time Environment is included in all browsers and on top of the JS Engine it adds the Web APIs, Callback Queue and Event Loop.
As you can see in the image above, setTimeOut is not part of the Javascript itself but it comes from the Web APIs that all browsers makes available for us to use.
To illustrate how all of these concepts work together, let’s see an example.
What order to you think the numbers will be displayed in the console when the code runs? Let’s verify what happens line by line.
First, console.log(1) will be added to the call stack and right after it gets executed it will be popped out from the stack.
Then, we have a setTimeOut function that will be added to the call stack. Now the Call Stack sees it and says:
Hmmm, I have a function here that is not part of the Javascript, but it is from the Web API. Let me notify the Web API that
setTimeOuthas been called.
After that, setTimeOut is popped from the Call Stack and the Web API will start a timer of 2 seconds. It will know that in 2 seconds some task will need to be executed. Now, since the Call Stack is empty, the Javascript Engine goes to line 7 and adds the console.log(3) into the Call Stack.
console.log(3) gets executed and popped out from the Call Stack. And 2 seconds has passed. So, Web API says:
Alright,
setTimeOutneeds to be executed right now. Let me send acallbackto the Callback Queue.
So, setTimeOut gets popped out from the Web API and gets added in the Callback Queue.
Here comes the Event Loop into scene. What this guy does is to keep asking the question:
Hey, is the Call Stack empty?
If the answer is yes, the Event Loop goes and checks the Callback Queue and asks:
hmm, is anything in there? Because the Call Stack is empty and we can throw something in there to be executed.
Finally, callback goes into the Call Stack and by running it we get console.log(2) . Then, console.log(2) and callback are popped out from the Call Stack.
what gets printed in the console:
1
3
2and there you go! Everything is empty again and the whole program was executed.
In conclusion,
Javascript is a single threaded language that can be non-blocking.
In other words, Javascript has only one Call Stack that allows it to do one thing at a time. In order to not block the single thread, Javascript can be asynchronous with callback functions.
Oh boy, that was a lot of information hahahah
But, I hope that makes sense to you.
Nice coding!!
