WEBVTT 00:02.920 --> 00:08.380 You have already learned the main basic concepts of JavaScript at the basic level, you can already 00:08.380 --> 00:11.710 write some JavaScript codes, solve some problems. 00:12.370 --> 00:17.160 You have already built a simple JavaScript application, and that's perfect, but not enough. 00:18.130 --> 00:23.920 It's really good to learn how to write JavaScript code syntactically using a lot of interesting examples 00:23.920 --> 00:25.480 and modern best practices. 00:26.050 --> 00:31.850 But in most cases, you may be confused when you faced some real problems or errors in the future. 00:32.800 --> 00:39.190 Therefore, in order to be a real and powerful JavaScript developer, you need to really understand 00:39.190 --> 00:42.670 how JavaScript works, how the codes are executed. 00:42.670 --> 00:46.990 In other words, you need to learn well how JavaScript acts behind the scenes. 00:49.230 --> 00:55.620 We know that there is a built in JavaScript engine in the browser, which is used to execute JavaScript 00:55.620 --> 00:58.710 code, let's describe how it actually happens. 00:59.370 --> 01:04.320 So we have JavaScript code that is run in a Web browser. 01:04.980 --> 01:08.250 And in every Web browser, there is a JavaScript engine. 01:09.580 --> 01:16.960 Different Web browsers use different JavaScript engines, for example, Google Chrome uses V8 engine, 01:17.530 --> 01:25.190 which was developed by Google and also since 2000 and 13 Opéra Web browser has been using it as well. 01:26.620 --> 01:32.870 Then we have Spider Monkey, which powered Netscape and today powers Mozilla Firefox. 01:33.280 --> 01:41.470 As for the Web browser Safari, it uses JavaScript core engine and the last one, Microsoft uses chakra 01:41.860 --> 01:42.700 JavaScript engine. 01:44.370 --> 01:44.760 OK. 01:45.650 --> 01:52.400 It was just for your information, let's talk about the entire process of the jobs code is run and executed, 01:53.360 --> 01:55.280 it consists of several steps. 01:56.060 --> 01:59.600 At first the Web page is loaded and JavaScript code is run. 01:59.960 --> 02:07.070 But in order to execute it and you should translate it to a browser because the Web browser itself cannot 02:07.070 --> 02:09.280 understand JavaScript code directly. 02:10.250 --> 02:16.430 But before JavaScript engine starts execution of the code, it should be checked syntactically. 02:16.430 --> 02:22.670 And it's the main job of syntax parser, which is the part of JavaScript engine. 02:23.720 --> 02:29.570 So the engine needs to start execution of the code that is syntactically acceptable for it. 02:30.260 --> 02:36.920 So the syntax parser reads the code character by character and checks if its grammar is valid. 02:37.810 --> 02:41.230 If there is something wrong, then it throws the syntax error. 02:42.680 --> 02:47.330 OK, let's prove it in practice, go back to our text, Ed. 02:48.300 --> 02:52.410 Credit variable where equals hello. 02:55.700 --> 02:59.690 And then log it in console, console that log a. 03:04.770 --> 03:09.900 Below, right function with name P. 03:12.510 --> 03:16.200 But in this case, let's mhere writing parenthesis. 03:18.620 --> 03:22.470 As you know, JavaScript engine executes code line by line. 03:23.030 --> 03:32.750 So here we have variable AI equals to hello, then it's logged in Castle and then Syntex Parsons's function 03:32.750 --> 03:35.880 B, but without parentheses. 03:36.680 --> 03:38.390 So what do you expect to get? 03:39.500 --> 03:41.000 You may expect hello. 03:41.000 --> 03:47.090 And then an error because we are missing parentheses with functioning and you know that it's obviously 03:47.090 --> 03:47.510 an error. 03:48.470 --> 03:50.470 OK, let's see what we have. 03:52.160 --> 03:54.350 We have immediately syntax error. 03:55.650 --> 04:02.910 So what has happened, it was caused by the syntax parser and let me explain why before jobs engine 04:02.910 --> 04:10.160 starts executing code line by line at first syntax parser has to read it and check if it's valid. 04:11.010 --> 04:14.150 So it has started from variable Ecorse. 04:14.200 --> 04:14.640 Hello. 04:15.300 --> 04:16.110 It's correct. 04:16.680 --> 04:21.750 And then it goes to the next line console that log a it's correct as well. 04:22.520 --> 04:30.480 Then when it reaches the keyword function followed by its name be here, it expects to see either the 04:30.480 --> 04:36.090 characters again or the parentheses, or at least the space before parentheses. 04:37.210 --> 04:43.090 But instead of them, it finds curly braces, which is syntactically invalid, and therefore it throws 04:43.300 --> 04:44.110 syntax error. 04:46.050 --> 04:51.150 So you see that we got an error before the code was actually executed by the JavaScript engine. 04:53.190 --> 04:59.850 All right, let's consider another important aspect when we talk about how JavaScript works behind the 04:59.850 --> 05:05.790 scenes and its lexical scope, or sometimes it's called lexical environment. 05:07.100 --> 05:12.290 So the lexical scope is an environment where a piece of the entire code physically sits. 05:13.680 --> 05:18.690 JavaScript engine behaves in different ways, according to where this piece of code is placed. 05:19.600 --> 05:26.260 For example, if the variable sits lexically inside the function, then we cannot access on that variable 05:26.260 --> 05:27.490 outside this function. 05:29.360 --> 05:32.780 In most cases, lexical scopes are defined by the functions. 05:33.840 --> 05:36.520 So, again, this aspect is very important. 05:36.540 --> 05:41.660 And regarding scopes and environments, we will talk about a little bit later. 05:43.370 --> 05:48.560 OK, and the last thing I'm going to introduce is an execution context. 05:49.870 --> 05:56.560 Execution context is like a container which managed the code that is currently running. 05:57.820 --> 06:00.760 In most cases, it is created by the functions. 06:01.300 --> 06:05.560 So in other words, which function is currently running then? 06:05.560 --> 06:07.510 It creates execution context. 06:09.300 --> 06:15.990 For now, just remember that if something in JavaScript is running, it's managed by execution context. 06:17.980 --> 06:18.490 All right. 06:20.140 --> 06:25.960 When we talk about how jobs it works behind the scenes, we have to figure out what these concepts mean 06:26.710 --> 06:31.600 syntax, parser, lexical scope and execution context. 06:33.420 --> 06:34.010 Let's move on.