Javascript topics for Interview Part 1

Key Takeaways

Hello. We live. Give me one sec. Yes, I believe we are live. Okay. So, good afternoon. Good afternoon and welcome again. Okay. Okay. Okay. So, let's move what actually we have discussed so far. Am I audible? Let me open the chat as [Music] well. Am I audible or my screen is visible? Just do let me know. Yes. Power. Thank you. Some hi. Hi. I show him. Okay. So now what we have done so far let's have a recap of this we have done code with the leap yes hi hi hi the leip can you please avoid hindi and explain things in English yeah I'll try to uh be in English as well but I'll try to use some Hindi keyword as well so that some student that is very comfortable in Hindi Uh they might understand that as well. Okay. I'm good. Uh the leap. I'm good. How are you? Okay. Now let's start. First thing first, I'm we have uh taken a deep dive into a concept called what is web right we have done what is web any doubt in what is web I'll just recap it once again that when you click on uh some website what when you search some website what happens next right so when you click on some website through routers it goes to where it goes to a server Server done. What server gives you? It's a request that goes that comes what is called response. Okay. And how response comes? How response travels from server through router to your UI? I have discussed that also that it comes into three file. What is the HTML file, CSS file and JavaScript file. Right? So I believe you will be understanding what is the role of HTML. I have covered that as well in the previous session that HTML is just for the structure part right that means skeleton. When you are building something right for example you are building a house what do you require? Require foundation you require structure of it. Pillars bricks you require some component. What are those component is bricks cement dust. So these component in HTML are different than that you call in a normal language. It calls element and tags right. So what you discussed what you learn in HTML is basically the structure part and you the structure that you learn is through tags and elements. There are multiple tags. Right? Yes. It's a hypertest markup language. But what you need to know the what interviewer need to listen what they expect from you is not hypert markup language. They want to understand how deep how easily can you get the understanding to me that what exactly HTML is. So where the HTML you want to explain the what is the role and what is the motive of the those session that I am conducting is to give you the idea that how you respond to a interviewer right because I am also interview I take interview on daily basis so I understand what needs to say as the perspective of interviewer as well and I have also given multiple interviews so I also know what I have made mistake in my interviews and what should I avoid at that time so results should be different right that kind of scenario I'll explain what you need to speak and what need what kind of example you need to take to just put the perfect picture of that concept right though everybody understand that HTML is hypertext markup language right so hypertest markup language there is a term in that full form is markup what do you understand by markup let us start from Here what do you understand by markup and how it is a markup language and what is the difference between markup language and programming language and somebody asked that HTML is a programming language. So you directly say no right do you know the logic behind it how you are saying no right so markup language is something that is used to give the structure part so structure is given through text and element what kind of text some are nonsemantics some are semantics and what are semantics and what are nonsemantics the different story right we are going to deep this session will be going out 3 4 hour long right what I want to convey in that particular session is do you understand the basic fundamental that you need to speak and what is the topics and what are the keyword that you need to uh speak in the interview that will show that okay you get the you got that particular concept grasp in you right so when interviewer asks what is HTML what is use of it you'll see that HTML is generally the known as hypertest markup language but the major task of HTML is to give a structure or skeleton to a web page. Right? So how you give the structure to the web page through text and element right. So what are the text and how much they are useful and how many type of the tags we have in HTML. So type HTML text nonsemantics. Second one is semantics. What are the semantic text and what are nonsemantic text? Basically semantic text for example if let me take a web page. This is consider you as a web page. Consider it a web page. What are the part that we have? For example, this is navbar. This is sidebar. This is main. And for example, this was a footer. Okay. So what I'm trying to say that for when they ask what is semantic text. So there are few element and text in HTML like headings, paragraphs, image and many more time. You can call it a span, you can call it a PR tag, multimode tag. So or there is one famous tag that you usually use is div right. Div is container. This is a division tech section is also there. So what I am going to talk about is when uh you understand SEO search engine optimization. How many of you understand what is search engine optimization is? Let me check the comment section as well. What is SEO? normal common sense what exactly the semantics is. Okay. For example, what happens now in Indian kitchen there is a container of for example born vita the empty box that you use there was a powder in some time few days back now it is empty what our mothers used to do they put something else in this box and close it and put into the kitchen right so when you enter as a newbie when you enter as a user into the kitchen. What do you see? The box of bone beer. The you don't know what is inside. What do you perceive? Okay, there is a box of born beta. And what do you perceive exactly? That there will be a born beta powder in it. Right? You consider like this is a common sense. Now we are habitual that there will be no born beta powder in the box. But in their common language what we perceive as a user is there is there is a box named as born beta there will be a born beta in it and it goes with everything in the same thing goes with website as well when a user when a browser pass the whole document of your index.html HTML or whatever it is. So it understand few keywords. When there is a navbar if I am putting the dev bar into div there's a general container. Can browser understand by just seeing the div that there will be a nav bar in it? What do you think? Can browser understand by just seeing the div that there will be a navbar in it or forget our navbar. This is sidebar. Can I also wrapping this sidebar into a div. Can browser or search search engine optimization keyword can understand this that in this div there is a navbar. In this div there is a sidebar. No, they can't. What they consider is as a general code. when they pass the general code then they just see the property and align it over the UI. So what happens? It triggers and it hampers our ranking, right? It hampers our search engine optimization. It hampers our visibility of a page. Then what do we do to prevent this? There are SEO friendly keywords that we use in general cases. But as a HTML developer, H web developer, what you need to do? You need to use semantics tag. What are semantic text? Semantic text means that I'll be putting a label onto a certain container. I'll be having a separate container for salt, separate container for pulses, separate container for bone beta in the kitchen. So when a user enters into a kitchen, he understand immediately that in this box this is ba in this box this is spice, this is pulses, this is salt. How we do that? We take semantic text. Semantic text means the text which speaks about themsel on their own behalf. Right? this nav in this website nav. So if I'm wrapping some code into the nav, what do you perceive when I'm wrapping into a uh some code into a nav tag? What do you perceive as a user or what do you perceive as a browser? What will be in it bar? No, there will be a nav bar in it. That means the tag speak itself that what is it all about? That means same is if there is a a side tag there is a side tag as well. If there is a site tag that mean there will be a sidebar or the side content will be there. And there is also one more tag that comes under semantic is main tag. If there is a main tag that means there will be the main content that will be hovering around that will be wrapping around in this main tag. Right? Perfect. And at last there will be footer. So any developer do what do you think? Can any developer put man tag or man content into a footer? No. like main content side section right understood what are those semantics. So sometimes what they ask in interview is what is semantics and how they help in SEO. So when browser pass when browser mount your website it knows when they pass it is very easier to pass your document like this is nebar this is home this is me this is footer this is aside and done browser doesn't need to understand this is div kender they can this is ne this is nba this is alli that means it is nba no it doesn't work like that right so by their name itself they got the meaning that what they are doing So that's how you explain a semantics in HTML. If you are able to explain, if you are able to use those keywords in front of interviewer, that means you are going into a good direction. That means next question will be there right. What that happens now that when you want to maneuver your interview around what do you want is only way the you explain when you explain a certain topic in certain manner when you highlight some keywords that interviewer are forced to ask question on that keyword itself right that's how you manipulate that's how you maneuver your interview that's how you run your interview in there are two parties that sit into interview this is party one this This is party two. This is interviewer. This is interview kind of a candidate. Interviewer. So what happens now in early 5 minutes what happens? We are asking your intro. We are trying to create a pressure situation for you. Now it it's kind of make or break situation in those five minute there will be two cases. I'll take the command of the interview first case. But in those five minute if you are able to maneuver your interview around certain keyword you highlight your introduction that I am proficient in this. when kind of interviewer are triggered interviewer are bound to ask those question that you are already prepared about right so when you are introducing yourself when you are saying okay sir my name is this I'm proficient in reactjs I have done project in this where I have included this this this APIs and this this authentication authorization I have used this library for example redux library I have used you have highlighted this keyword so I as an interviewer is bound to ask that okay let's start with the project itself. Explain me the Redux what you have used and what were the benefits of those Redux library or Redux toolkit that you have used and what are the outcomes that you suggest to use in the project. That means now you have the command. Now you are in the driver's seat of the interview. That's how you take control of the interview. Okay? If you are able to control your interview that means you are the driver. In early 5 minutes, early 7 minutes you have to control that. If you are not able to that means interviewer will be dominating uh the whole interview. He will be asking question from anywhere and that's is the most confusing uh time for the interview. He doesn't know what is coming next. But when you introduce yourself when you set a tone in the starting five minute when you highlight certain topics the interview revolves around only those concept. I'm not asking that Right now let's move on to the our agenda. What we are about to discuss today what we have discussed yesterday I have explained you uh regarding the same. Now the most important agenda of today is to dissect JavaScript right what I told you uh in the yesterday's class we will see what is JavaScript what is do and how it perform it action how it manipulate the object whatever it is right so first thing first what is JavaScript and what it do to your web page Any idea? Let me check comments. JS is a scripting language. Okay. What next? What is scripting language? Tell me also dynamic language. Okay. So if I wait uh browser paint UI through JS okay okay so when you when somebody ask that what is JS okay so what's today's agenda is I'll give you the topics and the few keyword that you uh take the keyword and revol the definition around it in the JavaScript right so first question in the fresher they can ask what do you understand about JavaScript. Give me a brief about the JavaScript. So JavaScript definition or JavaScript introduction revolves around three keywords. Okay. The first keyword is single thread synchronous dynamically typed. Right? These are the am I audible? These are the three key words that you need to understand that while giving the definition to the interviewer. So what is single thread? There are three separate terms that comes together to form a definition about JavaScript. Right? The first thing first I'll explain what is single thread. So I'll take the example. For example, you are having two hands, right? So in general case when I ask okay there are two boxes kindly pick it up. So what you will do? You will pick uh from one hand the one boxes and the other box from other hand right but if I say that okay you are only having one hand. Okay now pick two boxes. Can you do that? In general case you can't but you can because you can only uh pick one boxes through one end. That means that's how thread works. Thread means single thread means one task at a time, one request at a time, one process at a time, right? That's what single thread means. You have to explain that what single thread is, right? So then JavaScript a single threaded language, right? That its process is single threaded that it will only process one step or one task at a time. So this is kind of becoming a little confusing. Okay. So we are using a language in a broader way right in ReactJS when this JavaScript is only able to perform one task at a time while the other language like Java. Java is by default coming with multi-thread. Right? So now what is multi-thread? Multi-thread is that that you can perform multiple task at a time. That means it can handle multiple requests at a time. But why JavaScript is so famous that why JavaScript is coming into picture kind of a new library in coming days every 7 days 10 days 1 month is new library is coming in JavaScript how because somehow we are able to perform multi- thread as well right that means if we are not able to perform multiple task at a time how we are operating on JavaScript yes we are able to perform multi- thread we are able to do the task Multi- thread label using workers. This is a separate task. What is a worker is just like a for example I'm a keeper right? One ball is coming uh towards me. I'm picking one ball. This is single threaded task. I can pick only one ball at a time. I'll drop it and I'll again be in the position to perform second operation. But what happens uh there are a few fielders there are few persons around me. I'll just pick that ball and throw them behind. Okay. just so what I'll do as a kind of main thing this for example this is main thread and there are few people that is sitting behind to just do the task these people and these entities known as workers those worker helps to make it from single threaded to multi-thread how that for example one task is coming just throw it back and one other worker will be performing a task one more task is coming it will pass through pass like this. So using workers we are able to handle uh multiple requests at a time. It's a kind of separate when you understand a b into deep in every sessions you attend kind of whole connected theory when you understand javascript I'm just giving you the keyword that you need to use and if somebody asked that why single threaded language is so popular okay so around 70 to 76% of back end is still being written in java due to multi-thread and some other facility as well but still the few uh some part is basically covered using nodejs and express right there we are contributing as a js developer in that back end development as well. Right? So how so due to uh any some properties that we are able to make from single thread to multi- thread that means we are able to perform multiple task at a time. Now remember this term. Now second term synchronous. What is synchronous? Tell me what you understand why synchronous. Synchronous means that task will be in a certain flow. Okay. So for example, they are reading from top to bottom. Now as I discussed in yesterday's class that document is being passed into a certain way that is from top to bottom. Okay. So when the top to bottom uh task is passed, a file is passed. So for example, this was the line one, this is line two, this is line three, line four. So until unless this line is not being executed this next line will not be coming into picture. This is what synchronous means. But so but when you see when you understand it in a deep manner you will be seeing okay again one more drawback right this is also been considered as a drawback that okay for example if there is a creek the best example is creek was that when roy surma vat kohi is batting everyone has taken a run it is being updated so we cannot hold other UI component that okay until unless the run of virat kohol is not getting updated you just being at halt blank screen will be there no we cannot do that so quick also uh doesn't do it so they show other part they show the commentary they show the UI then run is also being updated when the ICC server give them the they fetch the runs from IC server they update in real time so that means somehow JavaScript is also able to do from synchronous task to shift it behavior to asynchronous what is asynchronous means for example there files there are file one this is file two this is file three I'm giving you each and every keyword just to give you the understanding that what you need to say when they ask in JavaScript JavaScript not just a definition of a JavaScript as a scripting language and it is this this this and done you will be rejected in the first question itself interview will be taking your interview for 15 minutes but you are rejected because you don't know what thread you what is not what is sync in you don't know what is dynamically and and losing type language. So for example, this is file one, this is file two, this is file three. It is taking 1 second to download, it is taking 3 second to download, it is taking 2 seconds to download. Right? So for example, synchronous task what synchronous task will say first 1 second will be downloaded. Then we'll wait for 3 second to download the F2 then I'll move to the F3. But this is not be a kind of good procedure. So to optimize it, we are having a synchronous nature of JavaScript as well. This is called async nature of JavaScript using some keywords using some async and promises and call back. There are the multiple terms that we use to make our JavaScript from synchronous to asynchronous. So what does synchronous say that for example this is the fire taking 1 second. Okay file one is taking any second and unless it is taking 1 second I'll move on to the second one. So I'll take on f_sub_2. Okay. So for example f_sub_2 is taking more time than this 2 second. So I'll just do not wait to it complete for 3 second that F2 will be download till the time it is downloading I'll shift to the F3. So now when you print try to print it try to print the statement using set time or whatever you want to delay it. So what will the output? First f_sub_1 will be printed then f_sub_3 will be printed then f_sub_2 will be printed. But in synchronous case what will be f_sub_1 then it will put 3 second then f_sub_2 then it will wait for 2 second then f_sub_2 f_sub_3 this is how it will be in synchronous way but when you want when you want to use when you want to optimize it what will be the better way that f_sub_1 then f_sub_3 then f_sub_2 based on the timing b on the time they are taking to download it right then comes dynamically third term that is dynamically type dynamically type means you don't need to worry about the data types you don't need to worry about what kind of for example in C++ and and Java or other language we have to define for example that okay this is a string type or when you are writing a name it would be a string or character when you're writing a number it will be a number or float decimal whatever it is but in this JavaScript this is a flexibility that you just write the code you just do for example a is equal to 5 so in the runtime when they are going to execute when they are going to kind of allocate the memory to the particular program. They'll just check dynamically that what is that? This is a number, this is a float, this is decimal, this is string, this is character, what whatever this is object, function, whatever. It will directly assign that property at the dynamically type at the runtime. You do not need to worry about the specification of the data types what kind of data we are dealing. So this is kind of dynamically type that we are going to check the type of the data and the property of the data at the runtime. So this is the basic definition. I'm not saying this is not a basic. This is kind of a advanced definition that you when you start explaining it that means interviewer will be understanding that okay this guy got the deep knowledge about the JavaScript even the definition part some student what they do even me as a beginner when I was in college back in 2018 2018 what I used to do okay I only know the definition of two lines this this is JavaScript JavaScript the scripting language JavaScript programming language but used to give the functionality in the web browser or website right so I don't even know okay there was a JavaScript engine into the kind of browser apart from the HTML CSS parser we have a JavaScript engine as well right so this is the first thing the first question or first keyword that few keyword that you need to use uh in the interview to drive your definition drive your definition such a manner that interviewer will be impressed okay this guy got the knowledge. Okay. Now move on to the second topic that they ask about and how you going to respond to that particular topic. They ask okay for example we are having a program JavaScript program. How JavaScript run the program? How JavaScript execute a program? This is the basic question and mandatory one question for a fresher. I'm not talking about the senior level because the student that are watching is not appearing for the senior level interview. I'm only talking about the student labor or entry level of freshers that are just about to give interviews that are in the college looking for campus placements. Right? So they ask in college interviews or senior not senior level fresher level interview that how JavaScript execute a program. Okay. So for example let's take a this is browser or you can call it as this is JavaScript engine that means engine runs the code that mean JavaScript engine execute all the things. So how JavaScript runs the code for example this is something something code dot JS file how when the JavaScript engine receive a file how they parse it how they read it and what they do so actually program doesn't run in a single time that means as you receive the program as JavaScript receive the program it doesn't get executed at that moment itself it takes time it takes few processes what are those processes is certainly divided into two process and two parts. What are those part? Let me just first part in a or you can call it a first phase is memory allocation phase. Here what will be happening? Memory allocation. This is called code execution phase. Okay. And whatever the boxes they are created to process this is called GEC, global execution context. Every function, every program had its global execution context where they get performed, they get processed and they drive a result. Right? And this particular section code execution uh phase is this particular section also known as thread of execution to this is also sometime they ask what is thread of execution right. So this is the thread of execution that code execution phase where this code execution will be there in this is the first phase and this is the second phase. Now what happens in a first phase that means whatever written in your program it will be kind of variable it can be a function it can be object array whatever it is it will be assigned a memory that means it will be assigned a space so when somebody is coming uh at your location to get your task done you assign okay sit back uh take a seat then I'll pick your task and I'll execute I'll give you the result that's how they do the performance of of the task. So for example, this was a function a = 5. This is the first variable. Then b is equal to 5 or let's assign this using let this is where and this is a function which is consoling uh something and we are calling that function here. Okay. And we are printing the console a and console b. I'm just taking this particular example. So how now JavaScript will proceed this as a code or as a engine. First as usual you know what will happen from top to bottom left to right it will be start reading it will be a a perfect line. This is the top to bottom. First thing first what happens memory allocation phase that means everybody will get its space everybody gets it cabin to get it settled down then code execution will be started. So here till the this part no code execution will be there and you will not be seeing anything on the console till this part. Now program runs you hit run button or you run the command node index.js whatever it is when you run a program in JavaScript. Then what happens first line first it is written forget about this let for now this is written a is equal to five. Do they give a do do they bothered about this five? No, what they do they just pick a and it will assign a space. So I'm not talking about what kind of space they assign it depend completely on the variable how you are declaring let and const will be different where is different then second line B will be coming B will be also getting status space okay this is a space where value will be coming okay now now third line will be coming what is third line third line is function So now in this case of variable what we are assigning a space where value will be coming in the next phase we are assigning a container. But what function receive traditional function receive which usually get initialized using function keyword. What they receive they come directly with its definition. They do not uh kind of take empty spaces or later on part they don't get executed unless you are not calling that function they directly come and sit back here that means whole function definition will be coming. Got it? But in case of anonymous function or arrow functions these kind of function will be taking its separate space. So for example let's define a this is a const this is arrow function I'm not talking about the arrow function but just take this is a arrow function. So when we comes arrow function it gets initialized through a pointer you take certain pointer to point toward to refer that function to that pointer will be coming and it will be having a space like a normal variable. So when you are dealing with traditional function it get the space within the definition with its definition doesn't get the separated space whole function definition will be coming onto the memory allocation but apart from the traditional function when you are using anonymous function arrow function any other kind of function it will be treated like a normal variable because you are using a certain variable or certain pointer to refer that function but in the traditional function what we are using we are using just the function name to refer to invoke that function right for example function sum is there how you are invoking that function sum bracket that means how you are invoking a function now you understand definition of function invoking of a function initializing of a function okay so before you start with JavaScript uh in the coming videos or coming lectures so you should know what exactly the function definition is function calling is it function definition for example it is written some logic part. This is kind of function definition we are writing. So still we are not invoking that function. How you invoke a function? When you write function name and when you write parenthesis when parenthesis is there that means you have invoked the function. Then this particular logic that you have written in the sum will be getting executed. Right? You can pass the parameter whatever parameter and whatever argument they are taking and you can use that to perform our operation. Perfect. So now all our program all our variables and function got the definition. Perfect. Now now the second phase will start and now the real magic will be happening. That means code processing will be there. That means space is there, program is there. Now I'll execute it line by line. First thing first, a = 5. That means now whatever space was there, it space will be covered with value. Now a = 5 will be there. Instead of a empty space, there will be a = 5. Then second line will be there. Here b= 5. Okay. Now empty space will be removed. Now what will be in the space of empty? Five will be there. Okay. Now third line tell me third line what will happen? Function definition will be assigned something. No until unless you are not calling that function you are not invoking that function there doesn't get bothered. So function definition will be there. Now it will jump onto the next line. One more function using variables. That means we are error function. We are referring to a variable. It will be assigned a certain value that is called undefined. Okay. But in the variable there are certain cases this is called some processes called hosting and temporal dead zone. I'll explain it in few minutes. So for example it totally depend on the how you are initializing a variable right. So function definition will not be getting bothered. It will not be getting executed but how you execute a function when you call that function. So for example this function call was there. This is the call. So when the function call will be there they will start going onto the function what is the line what is the logic it is written it is written what console.log block that we printing something for example hello world now the function definition the result that you are some storing somewhere that you're calling somewhere will be called as hello world okay so now when you console those three lines that means console a console b and this function called what it will be getting printed five five and hello world right understood that how with javascript thread that how java script a global execution context will be taking memory how it will be executing the code but again code is getting executed again whenever you find another function function another function it will be again creating its own separate space when you finding another function in that function it will again create its own space its own gc that means global execution context and once this program is getting finished once the program is is what it will do. It will erase that particular space. It will come back to its parent. That means when the function will be executed, it will be executed in this separate space. When it returns something, what are returning? Console.log. That means hello world. When the hello world will be in us, this execution context will be removed. And now what we'll be having global execution context then g. So when you check in the browser when I in the next class when I'll run the program for you when I show you what is GC how it looks in real time. So this is a call stack will be there. For example this is the empty call stag when you run a program one context will be coming into the call stack. This is named as GC global execution context. So when you arrive with a function so this function execution context will be there in the call state. So when this function will be getting executed till the time this function will be remain on the top of the GC right. So when this function is completed uh its execution it is finished it returns some value to me then this function execution context will be removed and what will remain the global execution context again that means this big ball part right but how uh in the next question they asked that you have g me giving me the understanding okay how my code is getting executed now I've understood But when a variable it defined using certain manner it give me different result. How many of you have faced this issue that when you assign a variable let a using let and con keyword in the consoling statement? It behaves in a certain manner when you call it somewhere else and there and memory get executed and memory get allocated in certain different manner or where when you assigned a variable value using where keyword right variable where keyword it behaves in different manner. How many of you have faced this? Let me check in the comment. Huh? Does anybody anybody face this issue that okay now how it is behaving in a different manner and how it is happening. So if you have not faced this try it sometimes try it. Okay. So let me just show you that what happens exactly then I'll come back to the this painting board then I'll explain how it is happening in that way. Okay. Let me open my VS code then. then it will be clear to you. Let's get it started then I'll Okay. So what I was talking that when you assign a value to a variable using different method of variable assigning it behaves in a different way right. So for example now we are having a first write cons we are writing a console dot log. This is the first program that you write in a JavaScript. Everybody uh write this. Okay. Now, how I run this program? I'll use this code run as well. Never used where. Yes, you should never use where. But there might be some cases that you need to use where it doesn't totally depend on the choice. But what they ask a standard that you use latin const but do not use where because where doesn't follow e6 it doesn't follow. It's just a like you are having a cage right you are having a cage when you learn scoping now in the next video tomorrow we'll learn scope chaining lexical scoping lexical environment what is functional scope what is global scope we'll understand then I'll you then you will be understand what I'm take talking today that means cage for example you are having a cage to catch a bird okay so other variable that is lat and con is just like a bird so in a cage of bird that you are about to catch it will be holding a bird for sure that means in certain rules and regulation your bird will be following your variable will be behaving in certain way that is a standard operation protocol so will be followed by those latent cost but what is variable variable is an ant that means cheaty right can you hold a cheaty or ant in a cage bird cage no you cannot because it will be just slip out that means it doesn't follow the rules and regulation that's how it create conflict between developers and it create the conflict in the code. For example, you have assigned a value using where in the top of the U keyword. When you are trying to change it, it is getting changed. When you're trying to print it, then you are changing it. Right? This is how but when you are defining certain value in certain procedure, it keep it kept in such a manner that you receive what you are planning to receive. Okay, this is the console. Okay, how you are running it? node practice.js I need to cd YouTube. I need to go into that folder first. Now I'll run node practice.js. Okay, this is hello world is coming. Perfect. Now let's comment this. Now we are using a console statement. I'll use console statement here. I'll print one. Okay. I'll define a using where first a is equal to 10. What you are expecting uh that it will be there. What will be printed when I try to run it? Or let's make it interesting one. Now what you expecting? Give me a kind of expectation. Let me zoom it for sure. What you expecting now? What can be printed? It's not a magic. Just uh guess it. Okay. So in a common language, in a common sense, what do you see? This is the 10. I'm trying to print it. It will printing 10. Okay, let's run it. It is printing 10. No magic. That's how it should behave. And what is uh difference? Okay, now the task value. Yes, ankas is saying the value of a will be printed. Perfect. Now, till this time there is no hidden agenda in this statement. Now magic happens when you do this. Now tell me now what will be printed is still value of 10. What do you say? Value a is 10. We are printing it. Okay. Now let's run it. It is printing undefined. How? Why it is printing undefined? Let me check. Uh causing error. No, no, no, no. How error can be there? I'm not doing any magic. I'm just showing you the output of the but I'm just running it again. Okay, let's run it again. It is showing undefined. Perfect. Now the the thing that you are talking about error. Let me show you. Now this is where now. Perfect. This is where. Now let's assign this a = 10 using different method of variable assign that means let there are three method let where const okay so I have used where it is showing undefined now I'll be using let to define this variable I have initialized the variable with value 10 now I'm trying to print it way be above the initialization now what do you think it will be Now tell me still it should show undefined right because in the previous case when I have used where it is showing undefined now I'm using let it should show undefined okay per is saying error that means JavaScript something complex undefined now error let's check Okay, what it is showing reference error. It is not a syntactical error. It is a reference error. That means what is reference saying? Cannot access a before initialization. What does that mean? Until unless you are not initializing with a value sir, can we say that before JavaScript tech landscape would be nothing? not like that we cannot say that we love JavaScript but okay so come to this uh program let's focus on this program now okay it is saying cannot access a before initializing that means you cannot print the value you cannot take the value from me until unless you are not giving the value to me but if we are giving value here how you are saying uh you cannot you are not providing me value how can I give you the value okay now I I'm frustrated. I am using a second variable. Third type of variable. I'll use it using con is equal to 10. Now let's check me. Now what will be there? Now let's run it. simple way to find out again it is showing reference error that again I'm not uh able to access a before initializing now what I'll do I'll just console it here not here now I have commented this code now I'm using this B after the initialization that mean the value is here now I'm printing it here now run it it is printing 10 okay now comment it out now let's check leta value run it again it is showing 10 that means somehow it is getting confused that when you are not able to assign value and when you are trying to access bay before the initialization it shows error but in case of bear bear doesn't think in this box. Bear thinks outside the box. You cannot hold where will be slipped out from your any context any kind of barrier and it will be getting accessed anywhere you want. That means when we go back what was happening in global execution when you assign something with a bear it take space first memory allocation first. Now this code execution the value printing will be second phase. What is happening in the first phase is memory allocation. So when you assign the uh variable value using where it take a space named as undefined first and when you assign a value when you assign a variable when you declare a value using let and con it also get a space but in a restricted area that means a separate box will be there. Here a let and con will be there. So you cannot access those boxes until unless you are not assigning a value. Whenever you are assigning it will be coming onto the main accessible area. So when the where is getting assigned value first in first P undefined. So when you trying to print until unless this code is even getting started to execute what will happen? memory allocation that means it will not be getting assigned 10 first in first place what it will get it will get a undefined that means without using for example now I'm using this where from here to here let's comment this so now we are trying to print a before the initialization that means memory undefined. So now it is having a output named as undefined. So when you're trying to print console what is print it print undefined but in case of latent con where they get stored where they get memory in a separate space. So until you are not initializing it with a value it it will be kept in that box container you will not be able to access them. So that particular box where you are not able to access them until unless you are initializing it named named as temporal dead zone. That means it will be kept dead till the time you are not giving them a value. It will be named as temporal dead zone. And the thing that you are doing trying to print the value bay above the initialization that mean this is the initialization of the variable declaration of the variable and you are using it here. That means till the time it doesn't know the value of a will be there below or not. Okay. This particular process when memory will be allocated every variable every function will be get uh hosted before this process is known as hosting in JavaScript. That means every declaration will be moved up to the top of the stack before the execution. That mean first PH will be memory allocation where all the variable will be moved up above the definition with their definition. Then undefined undefined lat and con in case of B it will be undefined. In case of let and cons it will be in temporal dead zone. That's why when you try to print variable value before its initialization it will be printing undefined. But when you're trying to print of the let and con it will be saying that first initialize it then I'll be able to print it right that means it doesn't know that value of a will be there because this a and b will be assigned a memory in a separate space it doesn't include in gc it is a separate zone that is known as temporal dead zone so in that dead zone the they will be dead considered dead till the time value is not coming at the moment they receive the value they will be invoked again it will be accessible in the main area got So I believe you are clear with what is JavaScript, what is synchronous, asynchronous, what is single thread, multi- thread, right? What is dynamically type and what is hosting and what is temporal dead zone in coming uh yeah that means in the next video we'll understand closer callbacks async and await and other type of uh things in JavaScript interview that can be asked. Today we have covered four topics five top that means what is synchronous JavaScript? What is async means? What is single thread multi- thread mean? What is JavaScript? What is semantic text and why? Pervicing why and when we use where where is where is not being suggested as a developer and ES6 I'll introduce to you ES6 what is ECMA script this kind of standard that they have written some rules and regulation where they restrict a developer to use where because it create conflict. For example, here it is variable 10. Now I'm using a variable a 30. Now I'm trying to console it a what will be printed here. Tell me run it 30. But we have assigned a value a. So for example I written a value a before using a program now somehow it changed value a 30. So now I'm trying to print this value. It is getting printed this value. It will creating a conflict. But when you are using let what is saying cannot redeclare that means it provides certain uh SOPs that you cannot do outside this particular boundary that means it will create a healthy space a positive space for you to write the code that's how that's why they do not allow variable to be written in JavaScript code okay I'll introduce you to that don't worry okay so I Hope this session would be helping you in a certain manner to give the answer how you answer a question. What is hosting? What is clo what is temporal dead zone? How program gets executed? What is thread of execution? What is memory allocation fail? Right? You can explain in certain way that they will be understanding okay now this boy got the understanding this girl got the understanding of the concept in deep manner. Okay. In tomorrow's class we understanding the call back closers and array function as well. Okay. So till the time we are meeting next take care bye-bye and thank you for being a lovely audience. Thank you Perves.