You need to be signed in to perform this action.
Javascript Code Execution (Execution Context)
JavaScriptTranscript
English (Auto-generated)
guys will be looking at the javascript execution context and for that I have given the later attached with discussed so I'm going to open it in the good. So I would create a new file and write the title in javascript honey, we're going to increase the font size a little bit so that thanks vic. Yeah. Uh so no, I hope in theory I will ring um speak five. It's funny for that. I opened up life server. What I was trying to do here is that I was going to create a new fire. Yes, olympic fine. Usually strict dang. And after that today you will be channeling our exploring on No, yes ma'am on deck, let's make it bigger. So execution context. Uh it's like environment where our java script good gets run or executed. So we'll be examining how our could gets evaluated or run or processed by the javascript, the language itself. Uh so to be more specific, we are running the google chrome with voucher which comes with the javascript indian. It's called V eight engine. I can right here. V eight engine. So the V eight engine, it kind of, it is a complex ah program that is developed by someone, some other peoples are a group of our team of peoples and we are trying to gain uh as some sort of understanding and how our good gets executed by the so in order to do that, I have opened my file. Html file Using the live server, which I can go here and click on here. I mean it is already open here. So I don't see the open live server otherwise on the html file we can think the right we can do the right thing and the open with the live server and it opens here Now I'm going to open the console and on the council we will be experimenting our coding samples so on the script file let's see an example. I'm going to create an object lesson. I created an object and conflict is the name of the variable and the variable is created using the var keyword meaning that the variable one ft each declared is in the market world and on the right hand side of this equal operator which is the assignment operator in the region, object regional syntax which is being used to create an object so list try to do the council that love and so basically what we're trying to do is that we're trying to see this object on the console by using the log meter after ontological the dot operator cause the lawmaker which is available under consul logic and we are passing the conflict variable rich brains are which brings the object and the concept which we can see over here on the left hand side there is a little error sign, we can click there to see what is inside this object and we can see the line property which you gotta do is in which you have the type string that's what we can see over here the same thing. So now let's let's try to experiment some of your scent council, that lot policy. So whenever we try to do that, we saw something called undefined from line six coming from the G S. So on the line # six We have councils and we are trying to lot the country variable and we got undefined. So what is going on here? How before discussing this, let's go and create up pointing. I'm going to call this function, I created a function using the function keyword after that there is space and the name of the function after that parenthesis opening inclusion on the parenthesis. This is specified intentionally given for clarity purpose so that my good each clearer while someone else or me myself, I watched the good. So here is the curly bracket and here is the corner bracket inside of this is the good that we are writing give you the specific tax. In this specific case we are trying to get the line property are from the object using the giant operator. So I created a function this describes listen, we declare the and we call the funds and using the function name and the parent is is opening inclusion. So let's see what we see nothing. We saw nothing here but I call the function the function is returning something so in order to see something on the console and this specific case the return value. We need to do council that Oh I can see the PM From line number 90 Coming from this GS five From the line number 19 we have the good on Sunday and here we are calling up fancy and the function is returning the region to these are of the good which is finally this thing the value of land property inside of this country. I'm jake so let's do one more thing. Let's copy this part of the good and greenie judged about this constant declaration here and let's see from line number 15 on the script dot Js five which is this line of God what we can see that when we educate the function or when we call the function we saw that the function works the same way as over here which you can uncommitted experiment again From the line with 22 we got the same Rachel And from the line # 15 also regard the Savory Challenge. So From line number 22 and from line number 15 we got several other but it was not the case of this object here. What happened was that I would come in this first so that I would only sit out the specific lines of course that I wanted to see when I on comments. Both lines of code logging no conflict before its deterioration and loving of the conflict after it has been declared lisa On the final over here from 9/6 And the line number 20 lisa. So yeah, but it was not the case over here in but in case of object it is giving us undefined when we are trying to access the conflict object before each declaration before the different missing part we only find. So in order to understand this, we need to see a concept. Mhm You don't have to see that. I'm going to draw a diagram using control that I had to where are we china based too, demonstrate what's going on, Why we see that on the five we can and Y V Mhm Yeah, yeah. Mhm. So I would draw that item first, give some context one and two. So what I'm trying to so here is that we have our good running inside of this execution context. Think of it each like execution context as an environment like this big box which is surrounding which is surrounding doc processing are currently executing of our goods are currently processing right? Are currently evaluating the core which is currently being evaluated by the javascript engine. Each foolish inside of not executed, it's like that. So what happens here is that when the court gets run inside of an execution context, inside of the execution context, which is kind of like environment, environment which runs uh All right, expecting a call environment. So the environment in which our coal is running the gold from top to bottom. Each running actually inside of this execution context bandaged. So that the christian context itself has the two fridges, fridge one and fresh too. So what happens on the, are you keeping off the memory space happens elevating her reach Irving of the memories. This happens or sitting up Setting off the memory space happens on the Fridge one. I know the fridge to what happens like it's like uh assigning the value to the are your wills, it's like that and then running off uh executing method calls, our constant calls. We can write our constant calls happens in the second fish. The fish too. So I would like to explain it a bit in a more clear way by taking by looking at in the coach. So what happens is that our cold runs into fridges. The fridge one and the fish to first the fridge one runs because as I have said that currently running code are the currently executing are the currently processing code the code which is being processed. So when the courage processed, the courage processed whenever it gets loaded into the browser and gets run by the browser, it all happens internally by the javascript engine in this case Wh engine that would grow usage. So On the fringe one of an execution context setting up the memories are the allocating of the memory memories occurs. So what what is that When the court years run from top to bottom? Right, as we have all released seeing or even experiment or we can even see like this 1234 sorry 1234. So what we can see here is that the 4123 and four. The output is seen severely in a serial manner from top to bottom order. As for the return. So from this we can say that our goal gets executed from top to bottom model. So in the same way on the fridge one when the cold gets executed by the javascript in income, top to bottom order. What happens is that when the javascript engine siege the variable declarations things like this, this equals operation with the Barkey work to more specific when you see this, this kind of very overdue colorism with the marquee work. The value of this variable. When the coldest run from top to bottom becomes undefined, the value of country becomes undefined. So what happens is that let's not write it right now. When the court years run from this is a comment part by the javascript engine. So when the court reaches this line of course, what happens is that these line of good in the first fish during the first phase of an execution contract during this first fish? What happens in that this line Does not get one then the cold reaches whenever the cold reaches this line of good and sees the hard cure the javascript engine sees the the value of the contract variable gets set to only find in the first phase. We are talking about the first phase of course being run from top to bottom order in the first phase. This value just say undefined the value of 25 and when the court reaches two to this part, this points in part what happens in that when it comes here here here? Think I think of it like that. What happens is that when it comes to the comment, it gets signaled, hearing the blank line, everything that is because it's a blank line, this is comment, their signal comment gets signaled when you see the keyboard and it expects them constantly. So that's what we have given the language the name of the function after the parenthesis. So when this is the function response and declaration, what happens is that the whole function In this case from line number 17 to 19 gets set up. You did that computer's memory, this is what it is trying to say, locating, reserving the memory space in this case rejects the memory space for this function on the first fridge often excuse and context. So it is what happening in the first you see wanted. So when the court years run on the second fish, what happens is that this kind of log which is just met her of high level on the council object next run because this is that closing and this is opening opening and closing parenthesis against are allowing the function to run. So this kind of statement or this kind of cool gets run on the second page right here, second we are talking about the second fish now. So this kind of gets run on the second. So whenever the court tries to log the conflict on on the console, what happens is that during the first fish the value of country was set to undefined undefined. The state by default by the javascript engine. It is not that we specified, it is what javascript change. Okay, it is a value that is Children by the javascript engine to set up. So during the first stage of an excuse and context however set to undefined. So that's the region on the when this line of code there's executed on the second page because on the second page, this method call and the is running, that's what I have written over here. So whenever this runs this whole runs all good. I saw undefined because that's what the value of country proceeded in the first phase of an exclusive content. So When the court reaches the line line seven in this case eat eat them six. The actual object over here which is here onto the memory and assigns the at risk of this object june this variable. So in simple terms, these objects get set into the memory and which is now the value of conflict variable simple in the second fridge that the equal operator rich and diverse. They call operator the value. Sorry for this object In memory on the 2nd feature. So on the second page. This actual value is given or the actual knowledge provided to the variable. Now coming to them other part of the good dysfunction part. This one's salary set up in the memory in the first fish. So when we ran this part this part of the good because the law consulted law the log is the metal consolidate logic. So we never this consultant lockers run as I have said the function. The case of the function is different because the function has a whole Hello Samson. Yes set up into the computer's memory during the first phase. So when the goal is executing on the second phase, that's what we're talking about now on the second page it function just run normally had it was running in the first fish. I have some over here done whenever the bullet had passed through the first fish. As I have said the function has set up into the computer's memory because the cold was already a high level into the computer's memory. What happens is that when the code runs in the second bridge when it comes running from the top to bottom in the second stage whenever when and this line is uncommitted because the function case is different. The function was already set up in the computer's memory we can access no johnson and johnson over here before the declaration because it had already been in the computer's memory as a whole thing, but it was not the yes you can solve this variable, the valuable which is created using the marking work so and this, gosh, what we have seen is that the charism and uh page one right. The rendering of the memory space okay, executing the code line by line on the second, that's what we have examined and we saw no rituals on the browser to so in case of confusion, feel free to push the come in and what we try our best to interact in the comments. So thank you so much.