Introduction to Asynchronous Javascript | Full Stack Development with React & Node JS - Live

Key Takeaways

hi hi are you sure this course is just for two for nine nights yes and you know this is the only course with this expertise across the world no way yes way don't delay enroll now geeks learning together hello everyone welcome back to geeksforgeeks my name is and i am really sorry for the delay like we are around 10 minutes late because i was facing some internet connectivity issues but we are finally here so just give me a thumbs up in the comment section if i'm perfectly visible and audible to you i hope there are no network glitches now we have chetan with us today and this webinar is going to be really exciting we are going to discuss about asynchronous javascript and a lot of concepts regarding javascript so yes i am really looking forward to this webinar uh okay fine thank you anil thank you ravindra for confirming yeah so i will quickly add chetan now so that you know he can introduce himself and tell us more about asynchronous javascript and what are we going to cover in this webinar so i'll add him now hi jason how are you doing hello everyone so i am doing good thank you how are you yeah i am good as well so before we start with the webinar can you give the audience a brief introduction about yourself so that they can connect with you better yeah sure sure first of all i would like to say sorry due to some technical glitches uh you know we started 10 minutes late so sorry for that so coming to my introduction uh myself jaitan i'm working as a software engineer in one of the product-based company uh in esco actually so we work on printing and then packaging industry so have i have been working from past four years as a software engineer i mean uh i was a qa but i switched my road to software engineer um am i okay so my habits are my passion is to learn new technologies and then you know and you know share the knowledge like i'm passionate about learning new technologies and then reading the books about the technologies and sharing that so uh i won't take much time anyway like we have consumed 10 more minutes 10 10 minutes so maybe uh if there is any question we can take up now otherwise i'll move on to the slides uh right so guys if you have any question maybe we can start for now and if uh the audience will have any questions we will take them up at the end of the webinar if we have not covered it during the webinar right okay sure sure okay let me share my screen yeah let me share my screen let me know when this is visible okay okay is the screen visible uh yes your screen is perfectly fine okay hello everyone uh welcome to this webinar in this webinar i am going to talk about asynchronous javascript so those who don't know about asynchronous javascript do not worry this is one of the advanced topic in the javascript so do not panic or do not worry like if you don't know about this even though like even uh if you don't know about the javascript as well do not worry i'm going to you know teach in a sim tape by taking the simple examples okay and you know why we need to learn asynchronous javascript and then what is this concept is all about see uh this is the main important topic in this javascript this is part of the advanced version of the javascript and then wherever you go to the interviews so this is one of the odd topic in which they will ask the questions about okay so please listen to this topic carefully understand the concepts and then i'm sure i will be providing the more examples so do not worry about that and then just you know take the advantage of it like you know but do not worry if you do not get it so we will you can drop the messages i mean you can drop the questions in the chat and then we will take up in the end okay so moving to the agenda okay so in this webinar i will be talking about synchronous javascript and then how we can make it as asynchronous behavior and then event loop callbacks and then promises so let me tell you one thing before uh proceeding further okay although all the concepts what i am telling now one hour is not enough to talk about because since it is the advanced topic advanced topic so we need minimum you know three hours or uh to talk about one single topic but i'm going to give a simple example and then i'm going to take a basics of it whether it's synchronous i mean asynchronous behavior event loop and callbacks and promises and whenever we get into the course so we will master it okay so coming to the uh synchronous javascript so there is no i mean terminal like we cannot say that it is a synchronous javascript do you know uh you know how javascript works i mean uh you know how the programs uh written in javascript gets executed okay so javascript basically a single threaded application it means so it will be having only one thread to execute the javascript program for example if you have a you know written a node javascript program it every instructions will be going to the one thread to execute it so now uh you may be uh thinking that you know how it will handle in a lot of things so we'll learn that you know in the later point of time do not worry about that actually so and then it executes the instructions line by line in order in which it is written for example if the instruction is given as one two three four i am taking as the you know index and giving the number to the instructions it will be executed in that way as well in that way itself okay so now i'll take to the one of the uh jump board and then i'll show first of all i'll show the uh how it executes our javascript or program gets executed and then i take a simple example and then i'll show that to you okay so coming let me open uh jamboard so okay so i hope uh jamboard is visible so let me just give a second okay [Music] [Music] okay i hope the jump board is visible okay so now how does this javascript or program gets executed okay so i'm running my javascript in a browser assume that i'm running my javascript in the browser so how it will be how the environment looks like so this is something like you call it as a browser okay inside it it provides browser provides a javascript engine that is the v8 v8 engine okay to run the javascript okay so now don't worry about this uh you know handwriting so i'm very bad at it okay so inside this we have something called call stack okay so now whenever i run a file like for example i have created a otherworld.js of it runs like i give the command to run that file so whenever you run a file a global execution context will get created so do not worry about this global execution context even i am not going to explain about this right now okay so now for example you think that you know there are uh three instructions one two three assume that this is your uh yellow yellow word file so i would just say that hello.js so you have written some code okay and then so you are running this so it will get you know execute it so the first instruction will come and then it will go to the call stack one and it will get executed and then the second instruction comes and then it will get executed and the third instructions so do you see that order so whatever the instruction uh order that you have written so in the same way it is getting executed okay now you got this you know how the program is getting executed okay let's see in simple example okay so simple example let me open my ide okay let me open my ide so i have written a three functions okay do not worry like if you are not aware of how to define a function as well do not worry okay so just think that these are all instruction inside this function what i am doing i am just printing console.log means it's a function which prints the things or whatever we provide inside it so it will print on the console in the console okay where output this is we console it is nothing but output area okay so in order to run this i can run here as well but uh for this reason i am taking to you for another browser window okay just paste the path so inspect okay i'm going to the console now your browser has executed this javascript you can see so i have written [Music] okay so this is not a script okay so i have written i have defined these things so this is just a definition so now i am calling first function so the first function will be called and then it will execute the it will print the first task completed and then uh i am calling the second function and then it will go to here and then it will execute this second uh second instruction and then the third function so here it will execute this so you can you know check the order i mean it's you know however the way we have written so it is executing that let us see in the jump board how we can show that okay so we have three things so let me open uh new thing okay so again i write a browser okay so now i have in javascript engine i am not going to name that this is a call stack okay okay now [Music] okay i have a program right i'm calling first okay so anyway a global execution context will be there okay so now first will come so i would say that i would take the index i mean not the index i'm just numbering the instructions okay do not worry about that and then i i this is the second second function and then the third okay so now it will uh we'll call this and then uh something like this is your terminal or this is your console assume that this is the output area this is the console so it will print the first line saying that first task completed okay and then the second and then the third once it is done so it will clear the stack so i hope everybody are following this and then everybody understood how the javascript program gets executed in a synchronous way i mean it is executing line by line and then it's you know uh executing the things the way we have written the order we have written okay so i hope everybody understood that if any doubts just drop it in the comments okay so next okay next i take an example okay so i'll take an example now i'll just you know say this okay now i will give you two scenarios okay so uh okay i'll give you two scenarios something like okay you have to prepare in food i would say that you know prepare a cake [Music] okay [Music] so and then you think that you want to prepare and you want to make an orange juice as well [Music] okay prepare a cake and then how to prepare how do you prepare the cake so you prepare everything keep the ingredients i mean you prepare the ingredients okay and then so i would say that okay prepare prepare the ingredients and also i will keep it in the oven so it will take 30 minutes and you prepare oranges so now if i write this code how would i write that control dot log so this is an example i am saying okay prepare for cake okay console.log [Music] okay now i would say that keep it in the oven and it completes 30 minutes [Music] okay so now the third step is so i'm going to prepare orange juice ok now if i execute this now i will use the node.js environment itself okay so then so anyway i can also use browser okay now if i execute this what it looks like prepare for k keep it in open and then complete 30 minutes complete 30 minutes and then orange juice prepare for orange juice okay so now can like can we optimize this is this a good solution okay can we optimize this solution okay so how can we optimize this okay so now you will prepare the cake and then whatever the ingredients you want and you will keep it in the oven and then you won't wait for 30 minutes okay so that's a background task right so it will keep it in the oven and then whenever uh you know okay 30 minutes got over the microwave gives the beep i mean notification saying that it's done bro so now after that in the background i mean once you keep that in the burbank you will start preparing orange juice so before uh cake gets prepared orange juice gets prepared right why now if you execute this program in a synchronous way if you do this job in a synchronous way see the time back so even though like even though it's happening in the background or even though it's taking time so we are waiting for that so now we have to make this asynchronous behavior so uh like what is asynchronous behavior right now so whatever the long running task whatever the i mean uh background tasks are there push into the background okay and then you can you know execute the remaining code or you execute the remaining task and once it is done so the long running task will be i mean the main program will be informed that you know long running task is done okay so now so now i will show that how to do that okay so now okay i'll comment i'll remove the comment okay so yes i would say that's prepare for cake okay now i would say that [Music] [Music] orange use okay so now if i execute this what happens so okay uh one one instruction got executed two instructions got executed i mean the third instruction whatever prepared or prepared orange juice and then cake is backed at last why at the last i'll rerun it again so you can see that without waiting for cake so orange juice got prepared i mean we made orange juice and after some time the cake is baked okay so what we are doing here so we are pushing the long running task to the back end and then whenever it's done so we are asking them to you know uh give that whatever notification okay so now you can see this uh so the code whatever we have written it's it is not executed in the same order in which we have written right so this is the asynchronous behavior okay if i go to the slides so this is what we call in this behavior the code won't be blocked due to background task okay we are not blocking the you know main program or the remaining code due to the background task so when the long running task get completed the program is informed and gets the access to the results okay so now you got the example as well so i'm using set timeout function okay i'm calling this function and then inside this i am passing some uh parameter i am asking some you know task to do by using callbacks so that function is a callback okay do not worry so what is callbacks and all okay so do not worry about that and then i am giving three thousand so what is this means so set timeout is a function which takes a callbacks as an argument and also the time in milliseconds what does that set timeout do it it takes the uh it executes that instruction whatever given in the callback or it exit calls that callback after the given amount of time in milliseconds for example just now i'm what i am doing is that i am asking this function to get executed after three seconds okay so three thousand milliseconds okay both are not the same okay so now setup at set timeout is function is uh you know this exhaust function gets executed and then it will call and then it will wait until three seconds and then by the time like it's waiting for the three seconds so it will get executed okay now you should have gotten questions but now itself you said that it's a single thread date okay and now itself you know we talked about it ssa you know it will execute the code in the same way whatever we have written but how come this set timeout function is executing in the background so it does javascript supports multi-threaded no no okay i will tell you why you know i will show how this is getting executed okay so let's move on to uh this jump board okay so i'll write a browser [Music] okay see the browser is the super power i can say so uh in the mankind whatever we have built libras our browser is also one of the super power i can say because it does lot of things see for example it provides javascript engine to execute the javascript code i mean javascript is you know it we can say it has the backbone of the web development even though like in front end we use in a lot of places actually so and also like nowadays not nowadays from past few years like we are also using for back-end as well okay and apart from that you know we will get access to some of the servers like what browser will do if you enter the url it goes to the server and then it takes the data and then it will display it over there okay so now so in the browser we have something called web apis [Music] okay so now we can ask uh you know here we have abps but how come we whenever we run this so when uh where the uh you know the functionality will be available so otherwise in the node.js environment we call it as c plus plus api okay so in this web api so we have something called like you i have the you know every access to this i mean the browser provides lot of functionalities i mean web app is like something like you know set timeout so now now you saw that as that time out of it works okay and then dom [Music] okay like if i have an idea about html and css are you know simple like how to create a simple javascript you know web page you have used document.getelement id so that is provided from browser apis actually and then something called like you will get access to session actually you can also store the data okay a lot of things will be there in the browser okay i'm not going to take much time about talking about the browser right now okay so we'll take another session for that and then so this is the call stack okay this is the call stack so now uh there are three instructions right one two three one is preparing cake like i just spread statement saying that prepare for the cake and then console.log you know one thing you know one interesting thing even console.log is part of this browser one okay even console.log like whatever you use so it is part control is part of this okay so whenever we start okay so that's the interesting one okay and then gc gets executed okay i mean jc is put into the stack and then the instruction one it will call the console.log and then prints the first instruction saying that uh what is that repair uh prepare uh prepare the ingredients for the cake okay and the second thing is set timeout function so set timeout function is there so it will call it it will pass the arguments and it is done right so it is done okay now it's the uh you know uh work of this set timeout function to wait for three seconds and then executes the execute the whatever the task given to that later point of time okay and then third instruction what is that orange okay so now without you know uh making to wait for that second instructions we executed all the things okay so this is the asynchronous behavior okay after this now it is you know we have this call stack and then see i will remove everything from the stack okay so now okay so here we have got this set timeout function and then we here we have this cb right with a web apis now uh once 3000 second is done it will be happening in the browser okay do not worry about that you know so just worry about our task now okay just to prepare your cake and then you know taking the cake from the uh oven okay i need to put this instruction or the event to the the stack in order to execute that okay so can i directly put into that yes obviously we can put but that is not the right way to put okay so whenever the timeout happens i mean whenever the three seconds gets completed we have something called task queue okay r i can say that it has a callback cube so it will be put into this okay so cb okay so cb and then [Music] so here comes the event loop so if you have word about event loop what it does it checks whether there are any events present in this queue and then put into this call stack when the call stack is empty now our main program is done so nothing is there in in this call stack so now cp is waiting here callback is uh waiting here so now what we do so we put this call stack here i mean we put this cb in this call stack i mean the console.log the third instruction we say now it gets printed whatever so cake is completed [Music] okay now you got this right so how this set timeout works and then how the asynchronous behavior is happening and then with you know there is no uh things available in the javascript but we can make it as but in the later point of time we will learn but do not worry about that right now so what is the flow now see so the whenever we have the set timeout function it will call this set timeout so do not worry about you know what it is in the background it just waits for three seconds and then it will put the cb or the callback to this queue callback q okay and then so once once it is done uh one once that i know cv is in the queue so event loop will be there event loop will check whether the call stack is empty if it is empty it will pick this and then it will put into the call stack and then call sec executes whatever the events comes so yes i mean this is how we can apply that you know we can learn the asynchronous behavior okay so if you are uh you know uh comfortable with this if you don't you know if you are following this please give the thumbs up in the chat [Music] okay so i'll move on to next okay so now i take to the web api and then event loop you learned about a web web will be provided by the browser and then event loop you know that you know event loop will be uh loop pushes the event from the event queue and it will put into the stack okay now callbacks okay and now i use the term callbacks right okay so in the set timeout function uh i will be explaining about callbacks and then i will be finishing up the uh you know uh promises uh uh yeah you know i won't take much time for this because since there is a time constraint okay maybe we have to uh provide much time for the question questionnaires okay callbacks so what are callbacks okay callbacks if i give the statements is a function passed into another function as an argument which is then you invoked inside the outer function to complete some kind of action okay so let's easily learn the callbacks things okay what is callbacks is nothing but okay so we can pass the function as an argument right now i will write an uh function something like uh function abc okay what it does console.log i think this is my main program okay sorry what happened okay so i would say that main program okay so now so main program is running [Music] okay now okay if i execute this okay okay so i haven't called this okay sorry so abc [Music] okay main program is running so now i want to uh check that you know when it gets finished okay so how can i do this i can add the control dot like here itself but you know i will show it another way okay so what i'll do i'll create another function complete it [Music] okay control dot log [Music] okay so i would say [Music] so now what i'll do it will say that you know it is expecting some parameter okay it is expecting some arguments okay [Music] okay is this enough like someone is asking to zoom the things i mean zoom the page so is this enough okay so now i would say that you know it is expecting some uh you know parameter as a parameter you know argument okay now i will pass this completed function so what is the output of this okay please closely observe okay so still it shows main program is running so now i have passed this okay but i am not using that right so how would i use this [Music] okay now uh okay so i would want to show this with a diagrams but okay so i'll show it here itself okay what we're doing so we are creating a function and then which takes the param which takes a single parameter so and then we are printing this and then after printing this we are using that parameter and calling this function okay so that's what it says in the uh definition callback is a function passed into another function as an argument now we can see this you know i am passing this function as argument to this here and then i'm calling this and then you can see this which is then invoked inside the outer function to complete complete some kind of action you know this is not the only way to use this but this is one of the way i can say okay i tell you like i'll give you an example where this callbacks are useful okay so now i i'm showing that you know i am passing this as an argument okay this we can you know see in simple words we can call it as an callback okay so where it is used so let's uh study i mean you know i've given another example now okay now function sum okay so what is that what it will do it will take two parameters and then written x plus y okay now i'll write another function subtract what it does so it takes two parameters okay written x minus y [Music] okay now for every operation i need to call some subtract so i need to write in general uh function which is called operation [Music] okay which it will take arguments and then it says that you know operate what needs to be operated okay so your variable name you can give whatever you want okay now i would say that okay written [Music] upper rate of x comma y now i would say control dot log operation [Music] and then 2 comma 3 comma sum so what is the uh output we get [Music] hi how we are getting this i am not calling some function so i am calling operation function oh we are doing that so that is what it said so it can be passed in argument and then it also returns some function okay what i am doing i am calling this general function which takes three argument two three and then sum i am calling this callback okay i am passing this call back and inside this i am returning this okay so now this isn't just an argument name the sum will go here and then we will be returning sum of x comma y so then instruction things go here okay executor will go here and then it will return the two plus three in the same way we can execute another thing so that is the subtract so i am giving sub back here [Music] that's all so 2 plus 3 is 5 2 minus 3 is minus 1 so now this is one of the example of callbacks so if i talk about where exactly the callbacks is used so something like you know where we are fetching the data from the databases okay it will take some time right so it's not uh i'll show that as well i won't fetch it from database let's uh you know mimic that okay so i would say that let name so i would say instead of name so i would say that data okay okay now i would say function okay get data from the database and then what i'll say just for an example i would just name that as a data is equal to something like full stack okay full stack now what i'll do i need to print that right so i have retrieved the data from the database like i need to do like whether it's operation right now i do not worry so i need just my task is i just need to print this okay so uh print print data okay now what it does so console dot block so i would say name so i have set it as data okay now why so i'm not calling this [Music] it says undefined that's due to some scope okay so i'm using inside some scope i think so let me pass this so do not worry if it is undefined it should give undefined okay so otherwise i will remove this okay a function okay so maybe i'm using the latest thing so i would say that data is equal to [Music] full stack so now i think it will give the access to it so if i directly print this so now it says that uh you know value is full stack okay so now so let me uh like whenever you talk about databases okay so it will not give directly right i mean uh it will wait for some time so how do i do that now okay so what i'll do i'll create a function yeah actually we are a little short on time so i had to ask you questions about them since there are so many courses already available so what is different about our course okay so the thing is basically in the market you will get to see lot of pre-recorded courses right now we are going live actually so in the pre-recorded courses what we will do like we will go through that uh you know uh content and then we will uh you know execute whatever the the show and then you will do it right so but think of like sometimes you will not uh you know able to get the output whatever they have written because some you know videos are pre-recorded so it will be one year back or two year back and then nowadays you know that javascript right so every day it's getting updated so some of the methods will get deprecated here we are teaching live and then in that uh you know udemy courses or whatever okay so there you don't have the you know option to ask the doubt now now we are asking the doubts right you know you don't have that you know a platform to ask the doubts yeah we are interacting that we are taking that questions and then we are solving it and also we have something called you know doubt portal as well like we'll get that doubt assistance as well so we are solving it in the live sessions instead of you know waiting for someone and then you know resolving that so that will give the most benefit uh out of it actually and also the contents are curated i mean the way that we have organized the content it's very good actually so you don't need any prerequisites uh to you know learn this project uh you know learn this full stack so we will take it from the basic and then you will be the master maybe i think that's great and i think that's a really great reason to enroll for this course and i think this is an opportunity that no one should miss also i would ask that what is the value of a full stack developer today like would you like to say something yes actually there are a lot of demand in the market for the full stack actually so you know basically in the previous in the traditional way of working there were two uh you know sections i mean the two teams front end and the back ends and then you will be expertizing the one thing and then here we are learning all the things including devops obviously you will have the you know you know i demand for you actually if you learn the full stack basically uh it's if you apply for the normal medium based companies you will get surely you will get uh six to ten lakhs i'm talking about some market actually okay in the medium based companies okay if you go to the bigger companies they'll you know pay as much as you want if you have the skills right exactly okay so i i think nowadays you know nobody is you know sticking to the one technology right so we will be working with lot of technologies so that's one of the good thing i mean we will be exposed to every technologies we will learn everything right i could see a lot of questions regarding the course in the comment section i hope jayden answered all of your doubts but still if you have any questions you can put it in the comment section or even later on you can reach out to our team and we would be happy to help uh lastly thank you so much for doing this webinar and you know telling about asynchronous javascript it was detailed explanation and even i was watching the whole webinar it really helped me also a lot thank you so much thank you thank you like did we take some uh questions from the comment section uh yeah sure i'll see the question if there are some questions that we did not cover i would be happy today okay so another tasking will projects be big enough that i can apply in my room and apply to product based company yeah sure sure sure i mean like if you have built some cool projects and then you can upload it to github with github is your profile right it shows that you know what you have done so surely like that will make a big impact or that it will make it can you know making difference while you go to the interviews [Music] so the rest of the questions that i can see are mostly covered by you also there is no open code that you can apply to get count on our course you can avail for it and get a straight discount for rupees 2000 on our particular course so you know just register for this course as soon as possible do not wait for the last day and we would be very happy to give a discount on our goals if there are any other questions wait for another one minute you can ask otherwise so if you want to learn more about this anyway like you know we are giving discounts on that you can take that coupon code and then you can you know get the discounts and then if you want to learn more please enroll to that so you will be you know that that will be interactive session that will be a fun so so we will discuss whatever the topics are there and then yeah we will enjoy the learning uh okay i cannot see any more questions right now but still later on as well if you have any other questions you can reach out to our team and yes with this we can end the webinar thank you again for doing this webinar and bye bye everyone thank you bye everyone