WEBVTT 00:01.330 --> 00:07.510 In previous lectures, we have referred what the execution context is and how the global execution context 00:07.510 --> 00:15.310 is created as a default when the page is loaded in this lecture, I'm going to consider what the execution 00:15.310 --> 00:18.130 context and the execution stack are. 00:19.780 --> 00:28.060 As I remember, when the HTML page is loaded in Web browser, then the global execution context is created 00:28.930 --> 00:31.360 and then it creates global window object. 00:31.750 --> 00:33.430 And the special keyword, this. 00:34.890 --> 00:38.590 All this stuff happens before the JavaScript code starts executing. 00:40.050 --> 00:46.560 Now let's see what happens when the JavaScript engine actually executes the code and how execution's 00:46.560 --> 00:47.490 tag is created. 00:48.600 --> 00:49.050 All right. 00:49.740 --> 00:57.890 Suppose that we have some JavaScript code variable for its name, which is logged in console, then 00:57.900 --> 01:02.880 two functions and B, below a function, A code. 01:03.750 --> 01:10.440 And then we have another variable last name and insert function A function B is called. 01:12.150 --> 01:15.010 Let's describe step by step how this code is executed. 01:16.020 --> 01:22.260 At first, when the page is loaded, as remember, global execution context is created and it's the 01:22.260 --> 01:30.540 first member of executions attack that the global window object and this will be created. 01:32.080 --> 01:38.860 After that, Syntex parser will check the code syntactically line by line, and if it's valid, then 01:38.900 --> 01:42.330 engine will start execution the code line by line. 01:44.800 --> 01:48.880 You see that variable and functions are created lexically on global level. 01:49.420 --> 01:52.370 So the engine will start from the very first name. 01:53.650 --> 01:59.260 Then we have that lock and the first result after execution, these two lines will be gone. 02:01.540 --> 02:03.760 Then the engine will continue. 02:03.760 --> 02:07.150 And because of that, functions are not invoked yet. 02:07.990 --> 02:14.800 It won't execute the code in Sadikoglu races until it switches to the line of code where a function 02:14.970 --> 02:15.760 is called. 02:16.810 --> 02:24.550 So the engine invokes function AI and therefore new execution context is created by the function A. 02:26.300 --> 02:33.170 In this case, Function A is an active mode, and its execution context is second member of the execution 02:33.170 --> 02:33.620 stack. 02:35.870 --> 02:41.920 Up to that, the engine executes the code inside function eight and we get the results. 02:42.080 --> 02:42.540 Hello. 02:44.600 --> 02:46.460 Then the function B is called. 02:47.630 --> 02:54.580 It means that new execution context is created by the function B, which is in active mode at this point, 02:55.580 --> 02:59.960 this execution context is at the top of the execution stack. 03:01.520 --> 03:08.180 Inside the races, we have cars that look high and therefore will get the result high. 03:10.550 --> 03:20.060 OK, after the ending of the execution of Function B, its execution context will be gone because of 03:20.060 --> 03:26.660 that function, A doesn't have any line of code to execute that its execution conscious will be gone 03:26.660 --> 03:27.100 as well. 03:28.670 --> 03:34.550 After these steps, global execution contests will continue executing the rest of the lines of code 03:35.240 --> 03:43.100 where we have variable last name, which is locked in council, and so it will be a lost output in console 03:43.100 --> 03:44.570 and will get Smith. 03:46.310 --> 03:51.780 All right, in order to get this, well, I'm going to demonstrate some practical examples. 03:52.550 --> 03:57.680 Let's go back to our text editor and create a function function A. 04:00.590 --> 04:05.570 Down inside the Dakota races, let's create variable name equal John. 04:08.300 --> 04:09.710 And luggage in Castle. 04:10.790 --> 04:12.050 Costel Deathlok Nade. 04:16.610 --> 04:19.490 That's copied and pasted twice. 04:20.530 --> 04:31.270 And that change the names of the functions and also names of the variables, right, Bob? 04:31.270 --> 04:33.190 And that Nick. 04:40.000 --> 04:45.370 And then call the function a write below A with parentheses. 04:47.830 --> 04:57.160 Inside the function A, let's call function B, but write it up to a variable name and in the same way 04:57.160 --> 05:00.610 inside the function B, let's call function C. 05:02.840 --> 05:07.640 Before we run them in council, I want you to think about what the results will be. 05:08.270 --> 05:11.080 I mean, what will be the sequence of the names? 05:12.290 --> 05:20.150 So as I remember at first, JavaScript engine will invoke function a useful function, A function, 05:20.150 --> 05:25.530 B, it will be called, and then inside function B, function C will be called. 05:26.570 --> 05:29.020 So you may expect the following result. 05:29.390 --> 05:30.860 John, Bob and Nick. 05:32.150 --> 05:38.390 That's without an AC that we have the opposite Nick, Bob and John. 05:39.590 --> 05:46.010 OK, let me explain what has happened and once more, consider how the execution stack works. 05:47.500 --> 05:52.420 So when the page is loaded, global execution context is created. 05:53.370 --> 06:02.430 Dan, as we said, JavaScript engine invokes Function A, which creates its execution context that the 06:02.460 --> 06:06.120 block of code inside A is executed line by line. 06:06.750 --> 06:12.120 So for us, we have variable name John and then the function B is called. 06:13.500 --> 06:19.800 So before the name John is out to put it in council function B, it will create its execution context 06:20.460 --> 06:21.960 and a block of code inside. 06:21.960 --> 06:24.000 Function B starts execution. 06:26.120 --> 06:33.140 Inside function B, we have variable name pop, and in this same way before Bob is outputted in council 06:33.140 --> 06:37.990 function C is called, which creates its execution context as well. 06:38.660 --> 06:41.450 And it's the last member of the execution stack. 06:43.860 --> 06:49.740 Because of that, we don't have any other function to invoke inside function, see, therefore the block 06:49.740 --> 06:56.830 of code of the function will be executed where we have variable name Nick locked in council. 06:57.960 --> 07:00.720 So here we will get our first output Neek. 07:01.640 --> 07:05.020 And the execution context of functions will be gone. 07:06.510 --> 07:13.440 After that JavaScript engine goes back to execute the rest of the lines of Function B, which is in 07:13.440 --> 07:21.520 an active mode at this point, so it executes console dialog name and we get the second output. 07:21.540 --> 07:21.960 Bob? 07:24.130 --> 07:31.150 That in the same way, execution context of Function B is gone and JavaScript engine goes back to the 07:31.150 --> 07:39.070 function A, which is in Excel mode at this point, it executes console, the clock name and we get 07:39.070 --> 07:41.560 the third output, John, as the last one. 07:44.440 --> 07:48.090 After that, the execution context of Function A. is gone. 07:50.610 --> 07:57.420 Because that the whole code was executed and nothing is currently running, the global execution context 07:57.420 --> 07:58.440 will be gone to. 08:00.550 --> 08:08.850 All right, the last and interesting thing I want to show you is that execution style has its limit. 08:09.490 --> 08:17.680 So let's go back to your text editor, get rid of this code and create a simple function. 08:19.030 --> 08:19.960 Call it a. 08:22.550 --> 08:25.940 And that's invoked dysfunction in a standard way. 08:27.240 --> 08:31.470 And also call it inside, it's curly braces. 08:35.240 --> 08:43.050 With all the peach and acid that we have an error which tells us that maximum called stack sizes exceeded. 08:44.030 --> 08:53.990 So when we wrote a outside function, it has called function first time and then a inside the code of 08:53.990 --> 08:58.700 races has started calling the function again and again infinitely. 09:00.050 --> 09:04.490 Because of that, each JavaScript engine has its limits for execution style. 09:05.120 --> 09:06.650 Therefore, we got an error. 09:09.130 --> 09:14.170 All right, this was all about execution context and execution style. 09:14.680 --> 09:20.290 I hope that it makes sense for you and you really understand it well, because those are one of the 09:20.290 --> 09:23.590 main concepts of how JavaScript works behind the scenes. 09:24.850 --> 09:25.600 Let's go ahead.