Event Loop in JavaScript

 JavaScript is synchronous single threaded language

It has one call Stack, it can be do one thing at a time. Call stack present in the JavaScript engine and all the code execute inside a call stack.

Any JavaScript code is run, execution context is created and pushed inside the Call Stack. then this code execute line by line. JavaScript engine go to line 4. this is a function invocation a() so again create a execution context and push inside the call stack. This a() run line by line and print a over here.

then this a() execution is done. it's deleted or popped. the control move one line 5 that is console.log('end'); so it print end our output show line.

a
end

after execution there are nothing more execute so they call Stack popped the global execution context and it will empty. so that is the whole JavaScript engine execute the JavaScript program.

Web APIs in JavaScript

This is the power of JavaScript

• setTimeout()
• Dom APIs
• fetch()
• LocalStorage
• console
• Location
• ...

This is the WebAPIs. it's not part of JavaScript. yeah infact console is not part of JavaScript. this is the features of Browser. in short this is a external super power of JavaScript.

We can used this WebAPIs in JS using window object. bcz window is a global object so it help to connect this features inside a JavaScript engine using web APIs.

JavaScript engine gives the facility to used all this super power with the help of window

How it work?

Supposed we want to use console method to our code, we can easily access this using window.console.log() and it work.

but ? we do not use window.console.log() we just a put consolo.log() and it work. how?

because window is a global keyword and all this powers / features inside it in window object. that's why, if we write a window.console or console it that same thing, 

How Web APIs work internally?

Supposed we want to used DOM  / When run JS code execution context will created and pushed inside the call Stack.

1. First line - it show console it goes inside browser and access console through web APIs and print start in console.
2.  Third line - document it is same like console, js goes to inside browser and access DOM () using window object .  getElementById() it used for manipulating HTML and CSS. we can change or modify HTML and CSS using this.
3. Forth line - addEventListener() is the another super power which given by the browser through the window in the form of web APIs which is the DOM Apis.

DOM means the document object model it is represent the html page. we can change the document structure, style and content using DOM ApIs. DOM APIs it access this HTML code and try to find button with id 'btn' and return it.  and .addEventListener() register a callback on an event, that event is click. .addEventListener('click', function cb(){});  

T
    This WebAPIs enviroment a cb() will registered and that event with attached to it that is 'click' event. this is known as registering callback, then JavaScript engine go to the next line. and print end on console, all execution is done so Global execution context will popped to the callstack, 

    But the cb() is wait in web API env. if user click the button then the cb() pushed inside the callback queue. 

This work of event loop is to monitor the call Stack and callback Queue. if the call Stack is empty and event loop are sees that a function waiting to be executed inside the callback queue. so it take the function and pushed in the call stack and callback method quickly executed them.

When the callback execution is complete, the cb() will popup inside the callStack .

start
end
callback

What is Micro-Queue, promises? how fetch() is work.

Fetch is used to request API's call. This fetch() function return a promise. we have to pass a callback function which will be executed once is promise is resolved.   

setTimeout(function cbT(){
    console.log('cb setTimeout');
}, 5000);
fetch("https://Simpleapi.com").then(function cbF(){
    console.log('cb api call')
});
console.log('End');

    First setTimeout function are execute and it registered in webAPIs environment with attach a timer 5000ms and js engine goes to next line Fetch function are executed and it registered in webAPIs environment same like setTimeout.

    When the timer are expired this cbt() goes to callback queue. and cbf() function is waiting for return data form the server. when server return the data back to fetch once we get the data and cbf() function is ready to execute it goes to micro-task queue.  

    Micro-task queue and callback queue are same means it's work same but Microtask queue has higher priority. whatever callback function are come in microtask queue that is called as mutation observer it will be execute first then execute callback queue.

    The callback function in case of promises it goes to the microtask queue. and the Event loop job is to see the callstack is empty or not. if callstack is empty the callback function push inside the callstack and execute. if microtask all execution will complited. then callback queue inside function is start to execute.