How JavaScript work behind the scene
Tags: javascript, programming, beginners, eventloop
Published: 2022-06-21 00:24:43

> 
## Did you ask yourself before how JavaScript code is executed?🤔
 
Let's go in-depth to understand how 

We all know that JavaScript is a single-threaded and non-blocking scripting language ,what is that mean ? 
 
**Single-threaded**: which means that only one thing can happen at a time
**Non-blocking** : imagine you’re running a function which takes 30 seconds during that task we’re waiting for 30 seconds before anything else can happen !! Of course, that doesn't happen  
It means that it doesn't wait for the response of an asynchronous code

To better understand asynchronous JavaScript, let’s look at the code below:

```js
console.log("Hello 1"); 

setTimeout(function() {
  console.log("Goodbye!");    
                      
}, 3000);

console.log("Hello 2 ");
```

> Think with me what is the final result ..

![code result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3q0t1c7vhvg5646a59c.jpeg)

> what happen in the above code ?

JavaScript run line by line but it is non blocking language so it will run ready functions and functions take time execute later 
So with asynchronous JavaScript, the JavaScript doesn’t wait for responses when executing a function, so it executes 'Hello 1' at first then 'Hello 2' and after 3 seconds it execute 'Goodbye!'



![JavaScript execution ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5iw460fnparwf0hyedx1.png) 


The actual JavaScript execution is really simple, but it ties to four concepts you need to understand first.


- Call stack
- Web APIs
- Callback Queue
- Event loop



**Call stack** :
   JavaScript has only one call stack, The call stack is part of 
   the JS engine, When we run code we invoke a function, it gets 
   added to the call stack. If this function is asynchronous like 
   (timeout(setTimeOut),Ajax request, ..) it moves to web Apis . 
   This means that only one thing can be executed at a time


**Web Apis** :
   It is a place where asynchronous functions exist till it 
   have finished execution, after finishing It simple gets added 
   to the Callback queue



**Callback Queue**:
   When the browser is done with the time (or any other API which 
   it provides for JS), it doesn't transfer the codes to be 
   executed back to JavaScript immediately. When the browser is 
   done, it stores the codes in a callback queue. It is a queue 
   containing some functions or codes which would be called back 
   at a later time.  
 


**Event loop**:
   has one simple job, it checks if the main stack is empty, and 
   when it is empty, it checks the Callback Queue. If there are 
   codes in the queue to be executed, they are transferred one by 
   one to the call stack. After the code is executed, it leaves 
   the stack and the next one in the queue comes up until the 
   queue is empty






![stack ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4ux5jlavfmhpuikum8l.gif)



> above gif explain the idea 
 we can see that the first function is pushed to the call stack 
 and Hi is immediately executed in the console, then asynchronous 
 function (setTimeOut) transfer from call stack to web apis till 
 it finish execution then move to callback queue , when call stack 
 is empty event loop transfer asynchronous function to stack to 
 execute .




**Conclusion**  
  we learned who synchronous and asynchronous code is execute 
  behind the scene , and we know what is the meaning of call 
  stack, web apis, callback queue and event loop .