Javascript Tutorial | JavaScript Runtime Secrets | Event Loop, Task, Task Queue, Micro Task Queue transcript

hi guys iiz welcome you to Cod master so finally after a very very long time I'm back with another interesting video on JavaScript frun time so before I start let me set some context here that what we are going to learn in this video so guys in this video we are going to learn about the internals of JavaScript runtime that how JavaScript runtime actually executes the script what are the components of JavaScript run time like execution context event Loop micro macro que functional calls stag and so on and so forth so we are going to learn about all of these Concepts all of these components and how all of these components sync with each other to execute this script so I hope you are also excited to learn about the internals of JavaScript runtime so let's get started and let's dive deep into the JavaScript runtime all right guys so let's start this video with the very basic and simple example so here on the screen you can see that here is a script index.js and in this script we have two statement one is console. log 1 and console. log 2 now guys if I ask you that what is the output of this script then your simple answer would be that it will print one and two on the screen and definitely your answer is 100% correct but have you ever thought that how the script is executed internally in the JavaScript and time if no then don't worry my friend I'm here to tell you the exactly how this script is executed inside the JavaScript on time so let's get started so guys JavaScript runtime internally maintains a set of agents and these agents are responsible for executing the script now you might ask that what are agents so guys the agent are like thing or person whose responsibility is to execute the script and Guys these agents are also made up of some components like execution context execution context function call stack a main thread for the event Loop a set of additional threads for workers for task que for microtask que and last but not the least event Loop now let me explain all of these components one by one so now the first one is execution context so guys execution context is the only context where the script runs and what is the execution context function call stack this is the context where our functions run or function executes or we can say that in this execution context the functions are stack on top of each other while executing okay the next one is the main thread so guys this is a main thread which is responsible for running the event queue and the responsibility of men is also for listening for the click events uh for doing the rendering of the UI and all of these stuffs okay now here you can see two uh thing that are task q and microtask Q so before I explain you what is Task q and microtask Q first we have to understand what is task in JavaScript runtime so guys in JavaScript runtime whatever code you have scheduled to be executed by standard mechanism that is called task so in our example we can say that this script is a task for JavaScript run time okay now what is the task Q so guys to execute task JavaScript runtime maintains the internal queue where the task are pushed and pick up by the main thread or the event Loop for execution now what is microtask Q so guys microtask Q is used to push the task related to asynchronous programming or the async code we will come to the microtask Q in a bit okay so I hope all of these components are clear to you the most important one is execution context task q and the event Loop okay so let's move on to this example so what is the output of this code the output is one and two definitely sure but what is happening behind the scene so guys when you uh when you ask JavaScript runtime to execute this script internally it's going to create agent and this agent has few components like it's going to uh create a task in this case the the execution of this script is itself a task it's going to create a execution context for executing this script it's going to create a function call St it's going to create a event Loop task q and microtask Q so these are all the responsibilities of agent for executing this task now how actually this task is going to execute inside of JavaScript R time so I have created a task T here and this task you is continuously watched by event Loop okay and I hope you understand how event Loop works if not then let me give you a brief introduction about event Loop so event Loop is nothing but it's a continuous loop which uh watch for the new events as soon as new events arrive or new task arrives it picks up the task and executes it and this process goes on continuously so this is the main purpose of event que and task Q okay so here we have task Q we have Micro task Q we have call stack and we have logs okay so what happens when we execute this script so our JavaScript runtime execute this script one by one because you know JavaScript is interpreted language so it interprets all the statement one by one so first of all the task is the Run script so this task is pushed in a task Cube where the event Loop is going to pick up this task and start executing it so it it's going to push a script on the call St okay so right now the Run script task is running and the script is on the call stack and this run script task is what running this script as simple as that now in the execution of this script the JavaScript is going to see this console.log and it will log one on the console then it uh moves one step ahead and it sees the console.log two and two gets printed on the screen so once the script is finished the script is popped out from the call stack like this okay and once the call stack is finished which means the task is also finished though so the task is also popped out from the task Cube now the task CU is again empty and the event Loop keeps waiting for the new task in the task CU okay so this is how this simple script is going to execute but let me show you the actual execution flow of this script so when we give this script to our JavaScript runtime it's going to create the execution context for this script okay so after the execution is uh so after the execution context is created it's going to create a function call step and it set up everything which is required for executing these script the first responsibility of the uh main thread is to execute this script until the function call is empty so it keeps on executing this script until the function called is empty so this is the first response responsibility of the main head or we can say agent okay now what is the second responsibility the second responsibility is to pick up the oldest task from the task CU and execute it until function call is empty so this is the second responsibility now there is one more responsibility and that responsibility is if there are any task in the microtask CU then pick up the oldest microtask q and run it until function call St is empty and repeat this step for all the micro task Q unless and until the microtask que is empty and the next responsibility is to render the UI and paint the screen so basically there are four responsibility of the main thread which is under the agent okay the first responsibility is to execute this script the second one is pick up the oldest task and execute it until function call is empty the third responsibility is executing the oldest microtask run it until the function call St is empty and repeat this step for all the micro task present in the queue and the fourth responsibility is render the UI and after this step the main threat is going to repeat from the step two and what is the step two again looking for the oldest task in the task so this is the actual execution flow of JavaScript runtime okay and there are total of four responsibility for executing the script for executing the task for executing the M microtask for rendering the UI and then repeat the same step so I hope the execution flow is clear to you and I hope the components of agents are clear to you I know the microtask is not clear yet but we will see different examples and there it's going to clear for you okay so this is the simplest example I have shown you so now let's introduce some more complexity to this code so that we can understand the internal of JavaScript runtime very well so let's move on to the browser and here you can see that I have open a tool and this tool is used used to visualize the execution of JavaScript on time so this is the code I have pasted here here we have console.log we have console.log and we have one function called so now we will see how this function is uh now we will see how this script is going to execute here okay and for your reference here we have task cues where the task is entered we have microtask q we have call stack and then we have event Loop and as I said that there are four responsibility of the event Loop one is to evaluate the script then run the task run all the microtask and then render okay so let's start this process let's click Run Okay so the first responsibility is to execute the script that is why you can say that and that is why you can see that uh the first option is open synchronously execute the script as though it were a function body run until the call stag is empty so you can see that call stag is empty but the responsibility is not finished yet we have to execute this script till the end so let's click Next Step you can see that after interpreting first statement the one is logged on the screen let's click on Next Step so here we have a function call so as we know that function call exist or reside in the function call stack and there it gets executed so this function is executed inside of function called stag okay let's click next so inside this function there is a console.log so you can see that two gets printed on the screen okay after this click next step and if you see that the execution of this function called stack is uh the execution of this function is finished so it gets pop out from the call stack and there we go right now so the execution reaches here now let's click step okay you can see that conso dolog appears on the screen and all the task are finished evaluation of the script is finished there are no tasks so it skips there are no micro task so it skips now we reach to the render step okay so this is the first iteration of event Loop so in the first iteration of event Loop it executes the script and call the function and that's it we do not have any run task uh so we do not have any task in the task CU and we do not have the task in the microtask you so it skips the two step and reach to fourth step now again it's going to repeat the same step from from step two not step one because the step one is to evaluate the script and the script is already evaluated okay so I hope this example is clear to you and now you have a little bit clear idea about how this script is executed and how this function called St works and what are the steps now let's introduce a little bit more complexity in this example let me show you another example so let's edit this example and paste another example over here so now this time we have console.log we have function we have set time out and then we have console.log now we are going to see how this script is going to execute so let's click run well all right we are going to evaluate this script because this is the first responsibility of the main thread okay and this script is itself a task okay so let's click step you can see that console. log one on the screen then we have function call this function is going to ex execute in the function called stack after execution the two gets logged on the screen then we have set timeout Now set timeout is a function and this function is used to schedule a task in the task CU and what is the task so task is nothing but it's a function in JavaScript so as I said that whatever code we are going to schedule uh in a JavaScript and execute through standard mechanism that is a task so set time out is a method which is you used to schedule a task and here the task is Time Out call back so it is pushed in the task CU okay now our execution reaches here now let's click next okay the three is uh printed on the screen and the first Loop of uh event Loop gets completed and it reaches to fourth step that is the render so now the main thread can render anything on the screen okay so this is the first iteration of event Loop now let's go to the next iteration in next iteration it will start from here so it start from here so do we have any task in the queue yes so this time let's click step now we have task in the task Q so it picks up the task and that task is Timeout call back so it pops the task from the task you and push in the function called stack for execution so let's see it let's click step you can see that the task pops out of the task q and push into function call stack now here the execution of this function taking place now after the execution of this function you can see that four is printed on the screen okay once the execution is finished this function gets pop out from the call St and where is the last step because we don't have any microtask in the microtask Q so where is the fourth step and again it's going to repeat the same steps from step two and that is finding the oldest task in the task so right now we do not not have any task in the task so it keeps on running the event Loop keeps on running and finding the task in the task CU so I hope now this is clear to you that how the execution of script is going on internally in the JavaScript run time and how the task you is used internally to pick up the task and execute now let me introduce a little bit more complexity on this code and now we are going to see the final example of this video so in this example we are going to see the how microtask Q works and how JavaScript internally use microtask cues okay so it is as simple as that we have console.log we have function call you already know about it you already know about it how set time out works the additional thing here is the promise so now let's see how the promises are handled in JavaScript internally because it's a asynchronous code okay and as I said that for asynchronous code microtask Q is used by the JavaScript front time let's click run okay let's click step okay one is printed on the screen function is executed two is printed on the screen set time out is scheduled the timeout uh call back in the task VI and the execution uh resume and then you can see that when the execution reaches to promise the promise has one function and this is a promise call back and this call back has resolve and reject so obviously it is a function so this function is pushed in the function call step for examp execution so the execution of this function is going on and inside of this function we have set timeout and as I said that what is the responsibility of set timeout the set time out schedule a task in a task Q so after execution you will see that the promise time time call back is push in the task CU let's click Next Step you can see the Promise time out call back appears here and then the execution moves to next step and the next step is nothing but to pop the promise call back and then move to next step and that is the console. log 3 so here you can see that the first iteration of event Loop is completed and we start from the evaluate script we go to run task then we go to run all task so in the first tration we do not have any task in the task CU although we pushed a task in the task CU but we are not going to consider that okay so in the first ration we have pushed the task in the task CU but we do not have task in the first ration it will process all the task in the next iteration okay we do not have any tasks in the microtask CU so we reaches the last step that is the render step now the event loop again going to uh watch for the new task in the task CU and this time we have two task in the task and it will going to repeat the same step again but starting from the step two and step two is finding the oldest task now what is the oldest task here the oldest task is Timeout call so let's click step you can see that select the oldest task task from the task Q run it until the call stack is empty click step now this timeout call back will be pop out of the task q and push to the call step for the execution let's click step you can see the execution is started so four is printed on the screen because timeout call back is executed and this timeout call back is popped out from the call stack now after running this task it's going to check is there any microtask in the queue so we do not have any task in the microtask que so so it goes to the last step and that is the render the UI so we have done two iteration of the event Loop so now again the event Loop is start from the Second Step that is the running a task and what is the task promise timeout call so it pops out this task from the task Q push it in a call stack for execution and what is there inside of promised timeout call back we have the resolve method okay so which means the this PR is going to resolve inside of this function let's click step now you can see that after resolving we have denable and denable also have one function call back and this function call back is pushed in the microtask Q and why is it so because promise is asynchronous by default so in JavaScript runtime microtask Q is used to schedule the asynchronous code that is the promises Isn or theable that is why we write promises in JavaScript and as soon as promise gets fulfilled we get the result back why is it so because microtask Q is a high priority task so before the next iteration of the event Loop the event Loop checks that is there any microtask in the microtask CU if is there any then it gets executed all one by one now we are at step number two now step number three is to check if there are any tasks in the microtask Q and this time we have it so let's click step this function is going to be pop out from the call stack and we reach to the third step now we are going to find all the task in microtask Q and run it until the call stack is empty so uh so the runtime is going to pick up this task from microtas q and push it on a call stack for the execution now what is inside this function is console.log so if I click step the function the number five is printed on the screen and the denable call back is pop out from the call St and finally after executing task and microtask we reach the next step that is the render step so basically to execute this code the event Loop took three iterations right three iterations so guys if you still have any confusion please go back and start playing this video from this example and your doubts will be cleared so guys as I said that event Loop is taken three iteration to run this code and it finally reaches the render now this time we have nothing in the task you so that event Loop keeps waiting for the new task so guys I hope now you have a very very good understanding of how JavaScript internally Works how script is executed in JavaScript engine what are the different components of JavaScript R time for example task execution context function call stack event Loop task que and microtask Q if you still have doubt then I recommend watch this video again from the starting so that your concept will be cleared and if you want to learn by reading then I will uh put all the links of the reading materials in the description given below please check it out [Music]