Stories by Gayathri on Medium

Event Loop in JS

Gayathri — Tue, 13 Jul 2021 18:52:59 GMT

Hi folks !! Today we are going to see about event loop. This is just a content sharing…..over content is injurious to health so i just gave a small amount of content . Just read the content and live well!!!
First of all what is event loop ?
Event loop is nothing but a built-in mechanism which handles the execution of multiple chunks of your program.

Let’s dive into event loop:

consider the following code:
console.log(“hello”);
setTimeout(function cb(){
console.log(“inside timeout”);
},3000);
Console.log(“final”);

Execution of the code:
Firstly, the console.log(“hello”) moved to call stack(Reference:call stack), then print it in console
Then setTimeout pushed inside the call stack, (setTimeout is a function not provided by js but by the browser.) So it moved to the webAPI [web api is a thread that we can’t access just make calls to them]from call stack
Browser immediately start the timer for call back function
Controls moved to console.log(“final”) and print it in console.
Finally our setTimeout comes into picture, once the time expired, call back function moved to the queue called task/callback queue

call back queue:
A queue where the asynchronous code is enqueued. i.e,. The code return by the web api’s.

Then how call back function placed inside the call stack ?
Here only the event loop comes!!!

EVENT LOOP:
The main job of event loop is keep monitoring the call stack and callback queue. If the call stack is empty then event loop check the callback queue whether it contains task or not. If the callback queue contains task/function then event loop take the task from queue and push into the call stack and call stack immediately execute it.

In our code the cb() moved to the callback queue once the time expired. Event loop checks the call stack , if it’s empty then push cb() to call stack, then console.log(“inside timeout”) logged into console.

Execution of call back function

suppose if we are using fetch (refer here: fetch)in our code, then what will happen ? don’t overthink. Just recall the setTimeout function execution above. Instead of waiting for the time to expire , browser wait for the response from server. Because we used fetch to get some response from the server for the given URL. After receiving response ,the fetch API have some function or some lines of code to execute. So, that function can be placed inside microtask queue. Then event loop start it’s work. But wait !! what is microtask queue??? we placed setTimeout callback function inside callback queue but fetch function placed inside micro task queue? yes, high priority task will be placed inside the micro task queue, low priority task will be placed inside the call back queue. Event loop always executes the tasks inside micro task queue then only execute the call back queue task.

consider if we have multiple tasks inside microtask queue and only one task inside the call back queue. Event loop checks the call back queue only after finish executing all the task inside the microtask queue.
But, here is the problem. microtask queue have multiple say 100 tasks but in call back queue have only one task. so task inside the call back queue wait for event loop to finish all the 100 task inside microtask queue. so task inside callback queue become starved.
Then next question !!! what is starvation?

STARVATION:
The process/task waits for long time to execute because of high priority task execution is called starvation. Sometime the low priority task [i.e,. in our case task inside call back queue] wait indefinitely.

Thanks for reading.

Chatbot using Javascript

Gayathri — Sun, 02 May 2021 16:54:23 GMT

Chatbot using Javascript

simple chatbot code using javascript:
Here is my chatbot.html:

In this I just use “input” field and “button”. After clicking the button the replyToChat function will be called to get a response.

Here is my Js file:

var words={
“hi”:”Hello”,
“how are you”:”Fine! and you?”
};

Sample chatbot

Hope you understand! I’ll post next version of chatbot soon..

Javascript execution

Gayathri — Tue, 09 Feb 2021 07:08:22 GMT

Javascript is asynchronous and single thread language. I. e,. Every request handled one by one.
Every operation happened within execution context. It has 2 components.one is memory and another one is code.

In memory all the variable and functions are stored. In code component, every single line of code is executed one by one.
For example our java script code is like below,

var a=5; function sum(){ let b=5; let c=2; }

once our javascript program ready to execute, our variable and function are stored in memory with undefined values. Then our first line code is executed the code section take the variable from memory part and assign the value to it. Next in our memory part value of ‘a’ changed from undefined to 5.The same will be happen for function. once all the execution is completed the code part will be cleared.