Explore Javascript Part 2 : How javascript works | behind the scene

Photo by pixabay on pexels

Introduction

Javascript is now a universal programming language. Now it dominating in every field like front-end, back-end, mobile apps and many more. If you are working on a project that largely depends on javascript then you have to utilize everything available in javascript. To do that you must have to know how javascript works and then you can utilize everything and make a better performing application. To know how javascript actually works you have to know some terminology or concepts. Let’s learn all of this.

Overview

If you are working with javascript you may have heard these words like javascript engine, call stack, single threat and many more. So if you are a new javascript developer then this blog will help you to use javascript more efficiently.

1. Javascript Runtime

Javascript runtime is the place or we can refer it to a program where javascript run. We use different browsers to surf through the internet. Every browser has a program to run the javascript codes. This program is called Javascript Runtime. For example : V8 , Spidermonkey.

2. V8

In short, V8 is a javascript runtime used by chrome browser. Chrome execute javascript code by the help of V8 engine. Node.js is also using codes of V8 to run javascript in the server.

3. SpiderMonkey :

In one line, spidermonkey is the javascript runtime used in mozilla firefox browser. It is the program by which mozilla executed javascript code.

4. Call Stack

Stack is actually a data structure. It works in the way of first in last out. In javascript interpreter call stack is a mechanism that track where we are in the code. If we have a function that called another function then interpreter will push first function then, it will search for the function inside this. After that the second function will pushed to the call stack list. Second function will execute and get the return value. Then second function will be deleted and then first function will execute and will be deleted from the call stack. The function may be look like this :

5. Callback Queue :

Suppose we have a piece of code like this :

Now we know that we have javascript runtime like v8 or spidermonkey to run javascript. But is v8 or spidermonkey has all the things to run javascript? The answer is ‘No’. We regularly use some function in our code that doesn’t exist in the javascript runtime. For example setTimeout() is one of them. Then how the code will be executed? Let’s have a deep look on it. We have something called web API. This will provide us the setTimeout() function. Firstly, the first console log will be pushed to the call stack and get executed then the setTimeout() will be pushed to call stack list. As this function is provided by the web API it will be send to the web API. Then the third console log will be pushed to the call stack list and get executed. When the time for the setTimeout() is over it will be send to the queued task list. Then it will be send to call stack list to be executed through event loop and got executed. This queued task system is called the callback queue.

6. Heap :

Heap is the part where all memory allocation is happened.

7. Web API (Browser API) :

API is stand for Application Programming Interface. It introduced to programming languages to make complex things easier. Previously we have learn that runtime can’t provide everything to execute the code. The common example for this is setTimeout(). When we call it a countdown is started as the time we have declared in the function. This task is done by the browser. The part of the browser which do this for us is Web API or more specifically we can call it as browser API.

8. Event Loop :

Event loop is a built-in mechanism which handle executing multiple task. It decided if the queued task should go to the call stack to get executed.

9. Task Blocking :

We all know that javascript is a single threated language. It mean that it can do one task at a time. If so then what will have we have multiple task to do? If we imagine for few moments that there is nothing called asynchronous javascript then if we have multiple task to do with js this will stuck untill one task is done. It will block other tasks to execute. This is actually the task blocking mechanism.

10. Concurrency :

Concurrency is a mechanism by which multiple task is executed in one time. We know that javascript is single threated language. But javascript can handle multiple tasks by concurrency.

I am a Web developer. I make all kind of awesome websites.