Understand Functions in Javascript | Full Stack Development with React & Node JS | GeeksforGeeks

Key Takeaways

so we are live so hello everyone my name is welcome back to geeksforgeeks today we are yet here with another webinar so you know before i add my guest to the stream and give a brief introduction about what the webinar is going to be about just give me a thumbs up in the comment section if i'm perfectly visible inaudible so you know there are no technical glitches in this entire webinar you can just give me a thumbs up in the comment section and then i will start the webinar the webinar is going to be really interesting one and you you are going to learn a lot so i'll suggest all of you who are watching this webinar stay till the end of the webinar right so yes thank you others for confirming others can also send a thumbs up in the comment section and also invite your friends if possible right okay thank you vamsi for giving a thumbs up we'll just wait for another one minutes so that you know more people can join the webinar we have pushed singh with us today he's going to tell us about uh understanding javascript functions and more about javascript and we are going to learn a lot from him so yes stay tuned for the webinar it is going to be a really interesting one i'll add him to the stream in another one minute thank you vishal thank you anuradha right i think we can add push to the stream hi mustang how are you i am doing good how are you yeah doing great thank you thank you for asking and thanks for inviting me for this webinar webinar and i believe this is a great stage an opportunity to showcase the technical stuff to the people out there and especially to the engineer working professional so yep yes definitely thank you thank you for coming to geeksforgeeks and you know taking this webinar it's our pleasure i can already see a lot of students have joined like it's been just not even five minutes the webinar started and people are really excited in the comment section so i hope it goes really well so before we start with javascript functions you know you take forward the webinar you give us brief introduction about yourself so that the audience the next will be better yeah sure uh uh i mean i think uh giving introduction is one of the crucial part of starting any webinar at least the audience will i mean i what i would like the audience will get a better clarity like who is uh giving the webinar and uh how he has been doing the stuff so yeah myself singh and i'm working as weber engineer for the company continues and moreover i'm a tech evangelist i keep contributing to open source even i act as an interviewer for most of the other organizations as a kind of helping them as a kind of goodwill to take mock interviews uh even i help others especially the engineers or working professional learn code because i believe in today's world everyone knows to write code but there are very few who actually knows how to write code the good code this is the thing i have observed and second thing is in current date javascript one of the most widely used language throughout the companies especially the product companies are using javascript previously we had a java where it was getting used widely and now javascript is preceding the java and it is one of the language which is used everywhere and knowing javascript is the demand of the market at this point of time so i thought of okay let's spare some of my time and uh introduce the mostly asked interview questions in javascript where most of the candidate gets stuck right i think that's a really good thing that you're doing you know helping out the student community that is out there and even like i'm also in my fourth year so even i will sit back and you know watch the whole webinar really carefully and i hope all the students who have joined it they will you know by the end of the webinar they will learn a lot right so we can start the webinar i will take a leave and you can carry on from here on yeah sure thank you thank you ms khan uh so yes i mean this webinar is of one hour duration and i would be breaking this webinar into two different segments i would say topics so the first topic i would be uh discussing about the functions how javascript function works behind the scene so i believe most of you might have written or continuously writing the javascript function like function and doing all the stuff and executing the function and you are getting the result but have you ever thought when you have written the function and when you have invoked the function invoke the function means when you are calling that function so what happens behind the javascript engine or i would say browser for now just uh listen like i'm talking about javascript engine but i'll talk more about what is javascript engine but as a normal engineer have we ever thought like once we have executed any function how that function is giving a result or what is exactly happening behind the scene so yes today i would be going to show you the live demo as well of some theoretical part how exactly a function runs behind the scene that is inside the browser and the javascript engine is the thing which do all the stuff this would be the first part of my segment of this webinar the second segment is the event loop this is one of the most widely asked interview question and most of the candidate goes into a rabbit hole while answering this question the reason might be they are not completely aware of what is even look or they might be lagging the basics like how even works or exa or something like what exactly they even took even the question itself is a confusing so i would be covering this into my second segment of this webinar so yep starting my first segment and i would be sharing my screen so please let me know whether my screen is visible all right so i have written something here and if it is visible for everyone please let me know using thumbs up so that i can start further stuff all right so i got a comment like it is visible fine so i'm going to write on a small function which every one right in their day-to-day life or day-to-day their programming life so the very first thing i would be writing say for example a function it city name and yes obviously you might be thinking why i'm writing into a developer console and why i'm not using ide or some available online id so i would say if you prefer writing your coding stuff into this google developer console it will give you more flexibility to understand what you write because here you want to be getting more of the intelligence like suggestions this provides a suggestion to anything but most of the time you have to write manually so writing a code manually will give you more practice to understand what you are writing so i'm creating a variable say for example a city and right say for example i'm writing a bhopal and i'm doing console.log and i'm just printing this city this is very easy right and i'm just zooming this screen so that it would be visible for everyone and i'm copying this function and i'm writing another function called state and i'm writing state this is very basic you might be thinking like what i'm doing but let me tell you what exactly i want to show you and i would say name is equals to right now i'll invoke this function here and i'll invoke this function here now you might be thinking like hey why i'm invoking this function here generally how you used to do or the people used to do you have written this function and then you would be invoking the function at the end something like this if i'm not wrong this is a normal way the engineers do or vp do but what i have done instead of invoking the function here so the word i'm using invoking invoking means calling a function all right so this is called a function declaration you are declaring a function declaration generally contains a function name and the structure of the function or the body invoking a function means you are calling a function so coming to the point now you would be asking like why i'm invoking this function even before it is declared so if you are aware of fire sting or you if you have the term hoisting so this has to be related to the hoisting so if you have a basic understanding of hoisting you would be knowing or it would be comfortable like this is one of the way of doing and if you are not aware of hoisting i would be covering it into some other session but for timing just for your reference this is example of hoisting or how hoisting work but yeah hoisting is not part of this session so yeah i'm just trying to show you this so i have written this function now i just put this function here so this is a function we have written and now when you execute this function now do console log here and i'll show you all right okay some typo error is here so let's see where is the type error this is console this is console and here i made a mistake i have not written log all right now see if you execute this function this will uh output you this variable this will output you this the function this function got called and it is just displaying the result now coming to our main topic have you ever wondered how these results are appear onto the console or how these functions are getting executed so now coming to our draw board and i want to show you whenever any function is called two things happen what is the two thing which will happen uh let me show you whenever we run a function a global execution context is created if you are thinking what is a global execution context so think global execution context as a box or a container which contains all the functions i would say the javascript function where all the javascript function run so global execution context is a part of javascript engine and java script engine is a part of a browser so whenever we run any javascript application the javascript application runs inside a global execution context and the global execution context you can think is as a container so the when you run the this program a global execution context will get created now once global execution context is created so there happens to think please bear with my drawing so first a memory is created i would say um memory uh creation happens and the second thing is code execution happens word execution so these two things happens in a global execution context or when you run a javascript program okay so let me just drag it here so memory allocation and code execution so if you see my right side here my first variable is name so it memory allocation all the variables would be stored so if you see here so my first variable is name name will be stored okay and second variable is the get city name so gate city name will also get stored here so for you gate city name is a function but actually this is also a variable according to java script engine so javascript engine will treat it as a initial variable so get cp name likewise gate state name will also get stored get state name all right so you see the variable to the right side the my snippet at the right side name it will be stored in a memory creation phase or it will get initialized there get city name and get state name now what would be the initial value of name so whenever a variable is inserted inside a global execution context and the memory is allocated to it the initial value to a variable is undefined so the initial value will be undefined to this variable and the initial value to this function let me create make it some good line something like this okay and initial value which is assigned to a function is the function structure so the whole function if you see get a city name the whole function will be copied inside this so the whole function will be inside this so very and if you are aware of hoisting again i'm saying like if you are aware of fasting you might be aware like why this is happening for a variable undefined will be initialized for a function the whole function structure or the function code will get copied so this happens in a memory creation phase where the variable is initialized with undefined and function is initialized with the function a structure or the whole structure of function is copied now in code execution what happens now if you see this snippet so now in code execution all the code will run line by line you you know java script is a synchronous and single threaded language so what happens everything in a java script runs in a single thread and even it runs sequentially i mean one by one or line by line so the very first thing where name will get into a code execution phase because now we already have initialized memory for each variable and you know in order to assign any value to a variable the very first thing is done is to allocate a memory because the value are always stored in a memory so the very first thing javascript does is memory allocation until and unless memory is not allocated your program will not execute because once the program start execution it will start inserting the values and the value will get inserted into the allocated memory just understand like example like nowadays the builder are creating apartments and they are creating a multiple of flats so until and unless the flat is not created or the flat is not constructed the family will want to be able to come and live in so for that the flat must be constructed or a house must be constructed so so house is a space and once the house is constructed the family member can start and they can come and start living so you can relate this live example to this javascript memory creation so memory is a kind of a house or the space which we have and once you got the space then you can just ask the value to come and reside all right so now coming to this snippet which is right side so we have the initial value which is where name so what happens the var name will start executing here okay so it will come something like this inside a code execution phase okay so now once the variable will start executing it will see like hey name is already uh residing here i mean name is already initialized let's just store the value of name to the actual name which is inside my memory so what will happen this variable name i mean the value will be assigned to this and this line of code will get executed so if you see the variable name came because the first line of code is name variable so name variable will be executed and once it will see like we have the value so the value will get assigned to the actual name and once the values assigned your code i mean your line number one will get executed and it will be removed from your code execution phase so it will be removed from codex equation phase now it will come to this line gate city name which is a function so if you are aware of call stack if you are not aware of call stack i would be taking this call stack segment in the next topic which i would be covering so i'll tell you call stack is a container which contains all the function which need to be executed so don't worry about if you are not understanding call stack as of now i just explained the call stack because we need a call stack here but i'll be explaining the call stack in a detail in the next topic so just for your information when gate city name function is executed or when the control will come to this function then what will happen it will see like hey where is gate city name it will find like oh the gate city name is here so once it will find like get city name is declared it will create a execution context so execution context will be created inside the code execution block and it will have again two phase which is a memory creation phase which is a memory creation phase and this is a code execution phase the same as the global so you see the bigger box or the bigger container has a memory creation phase and code execution which is a global context so this one is a global execution context which is a bigger box all right and whenever any function is executed so every function has their own execution context which is a local execution context so now you would be thinking like hey we have a global execution context then why we need a local execution context so you can think a global execution context is the parent container where all functions execute all right if you have multiple functions so every function will have their own execution context so this global execution context will get created automatically when a java script function is running when i say javascript function it means the actual function which i have written here like the whole when you run whole so this is treated as a main function or i would say this is a main thread basically we talk everything in term of thread so when you run this function actually a main thread is running which is the main java script thread is running so when a main javascript thread runs a global execution is created and inside a main thread you are having this function you are having this function you can have a multiple function so every function will have their own execution context right so here if we see get city name this is a function so it will create its own execution context here and it will do the same thing as we have done for the global execution context now you can see a variable called city so here we will have a city city because you can see a variable city and then it will see like here now we don't have anything to execute in terms of function so the memory will ex will initialized as undefined for this city i think i can make this diagram little bit bigger otherwise the confusion will be created so for timing just this uh i mean bear with me and you can think this city will be initialized as undefined in a memory space right and now when the code will start executing it will copy the whole this whole variable in a code execution just like here so it will copy everything in a code execution of phase it will comes like this and when it will come in a code execution phase it's like a city is there and city is already in the memory so just any assign the value bhopal to the undefined so now what will happen this value will be assigned to the city variable and this line will get deleted because this code will get executed so once the code get executed it will be removed from the execution context so just forward information whenever you are running a function or whenever a variable is getting executed once their execution is over they will popped out of the calls and they were they are popped out of your execution context okay so now variable this function is executed and this variable will get executed it will assign a value to the city and it will get popped up now the control will come to the get city name so you would be also asking now gate city name is done like the execution of gate city name this function is done so what will happen to this execution context as i mentioned whenever any variable or any function execution is over that function or variable is popped out so now the work of gate city name is done i mean it has done the execution so what will happen the whole of the execution context will be popped out or get deleted from the actual code execution phase so this is a code execution phase and my program is still running because my function gate city name is over but still gate city name is left so once this function is done it will say like hey we have another function called get city name so it will again come to this part and again it will create the same um it will create a same execution context which will have a memory here i mean it will have a memory phase and it will have a code execution phase similarly to the previous one and it will again do uh for for the state and like it will have a state here and it will be think what would be the initial value of the state if it is here i might not be seeing your comment but let me know what would be the initial value of the state variable here i'm not writing the initial value so meanwhile you can put in the comment or the chat box and i'm just going to the next part which is a code execution phase so let me know what would be the value of state here this variable value what would be the value of this initial value of this variable during the memory creation phase so once memory is created we would be going to inside the function okay the function execution so in function execution the whole line will get copied and it will get copied and if you have mentioned undefined during memory creation phase correct so initial value would be undefined and now when this variable or this line will be executed which is where state is equals to mp that will get mapped to the actual state variable and this will be removed so this will happen in memory creation phase okay so now the actual value of the state is assigned while a memory creation and now the console log will come into the picture so if you have seen what i have talked throughout this phase is memory creation and the code execution okay before going to the conclusion once the function get city get a city state is executed this whole execution context and also just to note this is a execution context which is a local execution context if you see this and the bigger box which you see is a global execution context so don't get confused between the execution context and the global execution context generally we say execution context and execution context is local or it has a limited scope or it has a limited accessibility global execution context has a wider scope and it has a wider accessibility even just by the name you can also relate global even we say global variable it means it can be accessed throughout the program so likewise we have a global execution context and execution context so you can think if someone says execution context it means you can relate it as a local execution context which has a limited accessibility and it can have the accessibility in a limited manner but for a global it has a wider accessibility okay so once the function has done its execution it will be popped out of the code execution phase and then gate city state this function will also get popped out and we have something as a console like we will have a console box like this one okay so after execution of once the execution is done the result you can see in your console so the browser will not wait for all the function to get executed and then it will return the value to the console so right now if you see this name when the when the javascript will start executing the first line it will be creating a memory creation and memory execution okay and once the value is assigned to the name and you are doing a console.log i mean you can if you have written here console.log and name all right if you have written something like this so once actual value is assigned to this variable and when the program will come to this line it will just print here gigs for gigs it will print here okay it will print or i would say it will output this variable now it will come to this function which is a gate city name and then it will come here and all the execution memory creation and code execution phase will happen and it will see the variable and it will initialize the variable with initial value as undefined and then the actual thing will go into your code execution phase and then we will assign the actual value to this variable and it will print out so here if you see after this it will print this one and aft after that it will print the state name so this is how you will get the output the three output you can get and if i enlarge my screen if i show you and if i go to the one so you can see geeks forgives mobile and mp and here geek score gives for gigs and mp the same result it will display so this is all about the function behaves when you execute okay so the takeaway okay before the takeaway i would be mentioning now you have executed everything here and now this is a global execution context so now once the javascript program has finished running everything and it will see like hey we don't have anything to execute now then it will say like just remove this global execution context as well because you are done with your work and now you don't need anything so the whole execution context will be removed something like this and you will be left with nothing and it will be completely blank and you will get this result so this is how the javascript program or the function works behind the scene now this is everything about the theory now let me show you with the practical or the demo this is uh i have written small snippet of code i'm just adding a debugger here okay and you know what the debugger does if you are not aware of what debugger does it uh i would say like it apply a break to a function execution just like a car your car is running and when you apply a brake your car will get slow it will not completely stop but it will get slow down so the debugger does the same thing when you add a debugger so what it does it will pause your function or your javascript program for a specific time until and unless you do not execute it manually so now here the automatic execution will not happen now the manual execution will happen so now i'll execute this function so you can see debugger it means now i have applied a break now i came to the manual transmission mode nowadays the car is coming with auto transmission and manual transmission so you can think of now from the auto transmission it change to the manual transmission now you have to shift the gear and everything yourself okay so what i was saying you can see the debugger is at line number two i have variable name i talked two to three things i talked about global execution context i talked about a local execution context and even i talked about the memory creation and code execution so if you see the name here this name let's try to find this name inside see this is a call stack okay the anonymous if you see this anonymous function this is actually a global execution context get created which get created automatically so whenever you run your javascript program just go to your sources or just see your debugger you will be able to see all these stuff which is called a call stack which is called a thread and i mentioned javascript is a single threaded so you see there are one two three four thread but my current control is at main thread once the main thread is done its work then this second thread work third thread will work and fourth so it's a single threaded and it works sequentially okay now this is a call stack and inside a call stack our global execution context and local execution context is created also with the name call stack if you see the stack is there and if you are aware of something our data structure so we have learnt about the stack and queue data structure so this works on the logic of a stack data structure stack means last come first out right this is how it happens we have a stack uh something like this and we have a stack and you just push thing into the stack like first second third so this if this is the last you have pushed so last game and first out so whatever comes to the last it will go first which is only four last in first out all right okay coming back to our debugger so if i want to see this variable value currently name so where i can find this variable value this is a scope inside the score which is a global scope if i expand this global scope and let me just search the name all right you see this name is geeks4geeks it's coming okay initially it should be undefined as per the uh theory which i have demoed so it should be undefined but why it is showing name geeks for gigs for geeks let me run and show you so it seems like it already have executed all right let me execute it one more time and my debugger is here and let's come let's see name okay so the name is saying geeks for gigs you know why initially it should be undefined because we are initializing our memory creation phase during the memory creation phase the value should always be undefined right but why it is coming x gigs for gigs any idea if no i'll let you know but let's see if what about other function i said like the other function the structure of the function will get copied so let's find gate city name so let me search for get city name and see like what it is there so see the gate city name the actual functional structure is copied this is what i said right gate city name the whole function structure is copied the whole code is copied here and in get state name whole code is copied but why it is not happening for this name which is called a where it should be initialized as undefined initially but why it is not doing that i'll show you but let's move to the next line which is this where now i came to this where and let's see the name here again it should not change and it should be geeks for gigs only bear with me like looks like the system is slow and i'm just searching for the n because the variable name is in okay so it is still geeks for gigs all right just keep this in mind like it is geeks four gigs for now but it should be initialized to undefined all right let me go to this function the debugger will come to this function and get city name and if the control will come to this function gets it name it will see it will search like here whether get city name is there in our code or not it will find like hey we have a get city name then it will jump to this so if you see here now if you see the initial value of this city is undefined now let me just collapse the global now see first of all if you see my cursor in a call stack we have this gate city name which is a local execution context the anonymous is a global execution context and the gate city name when this function is executed so local execution context is created okay so local execution context is created and even use if you see this scope if i'll just collapse it there are two scope which is a local scope and a global scope as i mentioned gate city name belongs to your local execution context or simply a execution context so if you expand this you see city actually this my debugger is at line number 12 and initially it should be bhopal like as per the logic if you were seeing for happening for the name name was the printing gigs for gigs but this is not printing the bobal it should be bhopal but it is not it is printing undefined why because at this point of time memory is created and inside memory the variable called city is inserted and the default value or the initial value which is given to this city is undefined so this is the initial value assigned to this variable city during a memory creation phase which is undefined okay now let me go to line number putting the debugger and execute this now see the city name if you see my cursor here now the city name has changed to bhupal from undefined to vopal now what happened this code is executed it means it went to the execution phase and once the execution phase started executing it so like hey we have the city we have to console out the city and we have the variable city as assigned as a bhopal so let's initialize this city to the actual variable here and now the city got initialized as bhopal and previously it was undefined right so this is how now gate city name is working and i said you once the function is done its execution it will be popped out from the call stack so see right now it is inside the call stack if you see and as i said once this is done working i mean it's done its execution it will be removed from the call stack because once it will remove from the call stack then it will give chance to another function to get inserted in the call stack and do the work so okay let's see i'm now putting my debugger i'm just removing my debugger from everywhere and putting my debugger at get city name because line number seven got executed so if i i hit this debugger and now my control came to line number eight and now you see the call stack now the call stack from the call stack the local execution context previously which was city name gate city name it was there right now it got removed i mean the popped up okay so now my call stack again has a global execution context now my control came to get city state and it will see like hey do we have any function uh called gate city state throughout the program and it was like hey i do have so let me put a debugger here line number 18 and let me show you i'm executing my debugger let's see once i'll start my debugger in call stack get city state will get stored or will it will get pushed because it's a stack so now stack will operate two thing push or pop operation okay i'm hitting my debugger see get city state came inside the call stack see how beautiful javascript works so javascript is really beautiful and you can understand everything i mean step by step and it's really very easy if you understand the logic and the basics so yeah see in a call stack now get city state came so this got added or pushed i would say pushed not added because since we are talking about a stack and a stack is based on the data structure which operate on operation called push and pop so better to say use a word push so now a local execution context is created and it is pushed inside a call stack which is a gate city name okay and again if you see my right side the variable state the variable name is state and it is mp but it is undefined it's weird right why weird because initially for my var name geeks4geeks it was printing the gigs for gigs but for everything which is in my function i mean local it is printing undefined either i might have explained wrong or something is happening wrong inside the javascript right i mean two things can happen either i might have explained wrong in the initial or something is happening wrong here right no both of the things are correct at their own place okay one thing for you to do a research why the name is coming as a geeks for geeks when we are executing this program instead of undefined i'll give you a hint this is a intentional i wrote okay fine now let's come to our function so get city state and we have the variable called state and state is undefined and if you go to line number 19 if i execute it will initialize the value mp this one and now you got the variable and if you see the console also here see currently geeks4geeks is printed and vopal is printed but still mp is not printed because i have applied brake on my car and i'm doing a manual transmission so if i'm doing a manual transmission i have executed this function i have executed this variable but i have not executed this function right because this function is still in progress because i have applied a debugger here so until now we have got only two result which is gigs for gigs which is coming from the variable name and this profile which is coming from this function get city name okay third would be mp but why it is not displaying because still my function is in the execution phase i mean this is still executing okay so now the state is mp now if i hit a debugger here i have clicked on the debugger see i clicked on the debugger it printed mp it means now the code execution is done fine so now the java script has done with the code execution or i would say the complete thread execution the complete thread is executed but still if you see i don't have my debugger there i mean this is a breakpoint i just added so this can be removed but debugger is vanished right this breakpoint is there because i just added but no debugger now if you see the call stack the call stack is empty right the call stack is completely empty it means the call stack even it don't have a global execution context which i mentioned whenever a javascript thread or a program runs the initial execution context which creates is a global execution context which is a anonymous which acts as an anonymous function and if you have given a keen i to the global execution context it was showing anonymous function if you have not seen it with the eagle eye i would say once the session will get over just rewind and see on this point that was showing an anonymous function so anonymous function is something which need not to get executed manually it will automatically get executed and hence the global execution context behave the same so this is all about a global global execution context local execution context it got finished and now the call stack is completely empty and you got this result everything fine hope you have got something to learn from this i'll take a pause i mean i'll just stop push fine i think i can stop sharing my screen and just to give a overall of a summary and i have nine minutes so i'll try to cover event loop but to be honest event loop itself takes more than one hour to complete and it is really very good interesting thing and is a heavy knowledge loaded stuff so i think i can explain in this amount of time i can give you a overall uh i would say brief introduction of event loop so that i can create your base and i can prepare your mind like if you study you even do what you can expect but before going to the even loop let me summarize what we have learnt here and i would say or i would request you once this session is over just try to i mean run this code and see how the things are working because everyone believe me everyone knows to write a code but there are very few who knows actually to write a good quality of code and if you are targeting for a product company i bet you if you know to write a code this will not help you if you know to write a quality code that will help you and i'm saying you based on my experience okay so we have seen a global execution context we have seen a local execution context we have a small intro of call stack i have not covered because it's a part of even loop but the overall take away from this session would be to understand whenever you run a javascript program what happens behind the scene so when a program is run first of all memory creation phase is created and then code execution phase is completed i mean created in memory execution phase everything everything i mean all the variable and the function will be initialized with the default value and just to a node this is a tricky interview question interviewer can ask you like why the variable is initialized with undefined but a function is initialized with the function structure if you have seen the variable initial value is undefined but the function takes the whole copy or the whole i would say the whole code function code is get initialized why this happens why not i mean the function should also be initialized as undefined but why the function code is copied during memory creation phase but only the variable so just for your information variable is initialized as undefined and function is initialized at the whole function copy if you really want to understand i would say like explore into a google if i'm in search on a google if you don't know the answer or you are not getting a satisfactory answer put into the comment any one of us will try to get you and let you know how this works and i mean why the function is not initialized with undefined okay so if we you have understood this session completely so i would say after going uh from this session you will have at least a basic understanding or if someone will ask you like how javascript program works behind the scene i bet at least you would be able to say two things at least two thing i think you will be able to see like okay whenever a function execute a memory creation phase is done i mean created and a code execution phase is created two phase happens there are two phase which which happens when a code is run so i think this is one of the basic which you can take away from here and more you can see how it happened i would say like you can remind rewind this uh session and you can see line by line what happens one homework for you as i said variable is initialized with undefined but why it was showing geeks for gigs for the variable one tip i would say i would like to give you a hint the variable which i declared was on the global scope if you see this is a global variable just don't concentrate on this where i can even give it as a let as well like even it can be lit it can be const doesn't matter if you really want to dig deeper you can just change this variable and see what works so just a hint this is onto a global scope but this is into a local scope okay so this was just oh sorry i think i have not shared my screen let me share my screen what actually i was trying to say so initially this variable as a global scope and this variable this city variable has a local scope okay so you will see like why where i can use lit so okay you can try using a lit you can try using a const and just tell me are you getting the same value like x for gigs even if you are changing so one hint this is a global scope and this is a local scope so this can be the reason but yeah i'll uh this is a homework for you and just try to find it out why it is happening so yeah this is all about how javascript program uh works behind the scene now coming to the event loop i'll just take a five minutes not more than that i'll just take a five minute to explain a theoretical part of event loop and you really if you like the theory you can ask us we can create uh schedule one more session and we it would be completely focused on even loop i thought of covering both of the stuff but knowing the fact it would be unfair to start the event loop at this point because it's so knowledge heavier stuff and these are the things getting asked in the interview so i would like to give a quality and a proper time to explain the even loop but if someone asks you even loop or if someone asks you what is a event loop okay so the basic answer what you should give or you would say like event loop is responsible for executing the code collecting the processing events and executing the queued subtask i know this is very very much technical definition so just to uh mold this definition you can think event loop as a supervisor uh i would say uh event management or you can think of the event manager like what is the role of the event manager a lot of request comes to the event manager like they organize lots of events so lots of request comes to the event manager like hey i want to organize this event at 5 pm i want to organize this event at 6 00 pm and all those so event manager takes all the request and it process the request and it keeps watching whether the request is coming or not if the request is coming it will keep taking the request and it will keep executing the request this is the work of actual event manager just like event loop is also a event manager it keeps checking for the event and it keeps executing for the event so events are the actions which is getting executed in a javascript engine okay so like i have executed these two functions so all these functions which i have shown you in a in a demo that's uh that's are known as events so whenever a event is executed the event loop come into the picture it supervises the event and it keeps executing the events so this is the event loop and i can explain more about the event loop and but just for your information event loop executes inside a browser engine which is a javascript engine and the javascript engine is inside the browser so think browser as a whole container inside a whole container there is another container which is a javascript engine and inside a javascript engine the event loop stays and it executes everything so right now what i have demoed you i mean the function like memory creation everything these all are executed inside the event loop which i have not shown you so event loop take care of everything which happens so yeah this is the very basic definition of even loop and what takeaway you can have from the event loop is it acts as a event manager it keeps managing the events which is coming and we have used the word loop like if if you think from the english grammar perspective what is a loop even you might have used do loop while loop for loop so loop keeps executing the program until the condition is satisfied so just like even who will keep executing the events until and unless it is getting the event like we are doing while i is equals to 10 i i less than 10 and keeps executing so until i is less than 10 it will keep executing the value so likewise event loop will keep executing the value until and unless it is getting the value so this is about the even loop so i think i'm good at this point of time in explaining both of uh the topic but yeah i'm really sorry i have not taken for the even loop because it takes more time so better in the next session we will uh take care so if you have any questions you can put in a comment section i will stay another for another one minute and meanwhile i'm going through the comment and i'll see if you have anything for me any technical question non-technical question anything you can ask me and also please do comment uh what thing you have understood throughout this session and what you have not understood or what confusion you have is still okay from jai shah i uh he is asking if we have to apply for react js developer then company has front-end engineer role or any yes i mean to this question every company have a specific role to them if you know react obviously most of the companies to hire for the react developer or noted developer and everything but currently most of the companies are hiring for react and react is of good demand in the market so yep and before doing that i would say like if you have like this webinar and if you want to enroll in the course which i'm taking from the 10th september which would be a full stack uh development course where we would be learning html css javascript node.js and basics of the javascript i always focus on the basics of javascript because if you know java script you can learn anything you can crack any of the front-end engineering interview question in the product company service company whatsoever but mostly people focus on the product company so that is the thing i mean my course would be a very much dedicated to get crack the product company so you can use the code which is live to live 20 off and you will get a 2 000 offer on the course if you enroll and we'll have a very fun learning the course and lot of things we would be discussing and solving online and through the demo so yeah so hope you i have answered your question so i mean react is in a great demand and for next couple of two to three year as per my experience i think it will be boosting until and unless we don't get any other framework so yep so if anyone don't have any comments or question okay can we go and find company by this course okay this is a nice question i would say treat don't treat this as a course treat this as a base because this course will provide you a base to crack any of the interview so cracking the interview does not need you know everything what it need you know the basic and you know how to solve or interview questions if you know how to solve an interview question with some optimization with some performance and with a good quote quality you can go to any of the fan company it's not about only any fan company any product company so fan company don't looks like you are able to solve code they also see the code quality they see how well you approach a code like what is your thought process they don't see like you have written the code and your code is working if this is the case then everyone would be in the product company they see a lot of stuff so yep so i think i'm done from my site and if jolly if you want to come online and for the great session give me a second yeah hello so anyone who is in doubt they can fill the form available in chat box in comment section so we our team will connect them okay thanks push and thanks audience to join the session and there is one more questions in our chat box let's take that one also okay this design process understand a good knowledge giving a problem statement this design process understanding a good knowledge given a problem statement i think i'm little bit not sure what is being asked but what i can understand from this question is like jr is asking about a system design basically a system design high level design a low level design so yes if you have a basic understanding i don't see like you just have to be very expert in a system design because system design is a kind of open-ended question and nobody is perfect in the system design interview something you will be doing here and there so you must be aware how actually the system works even if you give something wrong answer that is not going to make any difference because it's open-ended kind of a discussion or system design what you need to know a basic how the system works if you know this you are good to crack any system design interview even if you give some flaky answer but yes your answer must have a logic okay this one is the last question for our web from preheaters uh how i build a dsa visualizer website using jsa so i think if you are if you are talking about the visualizer and if i'm getting your question correctly a dc a visualizer so you can use a react but react itself is not sufficient because you need lots of back-end stuff there as well so but yes for a front end i mean only for a front end you can use a react but i mean that will not suffice you need a back-end stuff as well like you need a database as well you need some visualization or library as well just to add a visualization effect but answer to this question if you want you can create using a react the ui part rest of the part you need to take a stack yep i think you are on