WEBVTT 00:00.510 --> 00:05.440 Generally, average JavaScript developer tries to create as less global variables as possible. 00:06.180 --> 00:12.540 The main reason of that is to avoid facing too many conflicts, and especially it happens when you deal 00:12.540 --> 00:14.380 with several JavaScript files. 00:15.150 --> 00:19.020 So we need the way that will allow us to write the safe code. 00:19.650 --> 00:26.310 And for that, we can use Effi, which stands for immediately invoked function expression. 00:27.270 --> 00:31.920 If it is a function that runs Asness, it is defined. 00:33.210 --> 00:35.370 OK, let's see what I'm talking about. 00:36.120 --> 00:39.600 You remember that in JavaScript we have function statements. 00:40.140 --> 00:46.620 Function statement means that it has a name and this name is used to invoke function in order to execute 00:46.620 --> 00:46.800 it. 00:48.570 --> 00:53.550 And because of that, functions are first class functions in JavaScript. 00:54.060 --> 00:59.460 We can assign them to variables as a value and this is called function expression. 01:00.210 --> 01:08.010 Okay, let's see what happens when we face to name conflicts so that I'm going to create some variables 01:08.010 --> 01:11.130 on global level and also inside those functions. 01:11.460 --> 01:16.680 So write variable C equals two ten and then again. 01:16.830 --> 01:22.770 Right var C equals to twenty then look variables in castle. 01:22.770 --> 01:23.100 Right. 01:23.110 --> 01:35.010 Consider log C ok then inside function A create again variable C right var sequels and write here from 01:35.010 --> 01:39.900 function eight then return it. 01:43.280 --> 01:57.020 And also create variable see inside function expression, let's copy it and just change A into B and 01:57.020 --> 01:59.180 again, return C. 02:02.670 --> 02:08.010 OK, then at the end, invoke both functions, right, that like a. 02:11.480 --> 02:13.280 And then consider to be. 02:17.190 --> 02:23.160 Reload and we have 20 then from function eight and then from function B.. 02:23.960 --> 02:27.100 All right, let's see how these codes are executed. 02:27.810 --> 02:33.000 So when the code runs, at first you know that global execution context is created. 02:33.660 --> 02:37.860 JavaScript engine executes codes line by line, from top to bottom. 02:38.310 --> 02:48.000 It creates memory space for function A, variable B and variable C, which at first has add value 10. 02:48.270 --> 02:53.850 But when the engine hits next line, it doesn't create another variable. 02:54.330 --> 02:56.760 It just overrides 20 to 10. 02:57.700 --> 03:01.860 And then when we run it in council, we got value for variable C. 03:01.860 --> 03:05.200 S 20 after that. 03:05.220 --> 03:06.880 You see that window function eight. 03:07.470 --> 03:14.100 So when the function is run, it creates its local execution context and the block of code inside this 03:14.100 --> 03:15.400 function is executed. 03:16.260 --> 03:21.390 You see, again, we have variable C, which doesn't belong to global execution context. 03:22.050 --> 03:28.710 It's lexically is placed inside function and therefore JavaScript engine creates new variable. 03:28.710 --> 03:32.250 See, the value is not a anymore. 03:32.250 --> 03:34.530 And we get in castle from function eight. 03:36.150 --> 03:41.700 After finishing the execution of function eight, its execution context is gone. 03:43.140 --> 03:47.190 Then the second function is invoked and actually the same happens here. 03:47.640 --> 03:55.290 Local execution context is created for function B, then the new variable C is created and we get getting 03:55.290 --> 03:57.060 counsel from function B.. 03:58.380 --> 04:06.090 So as a conclusion, we can say that if we use functions, we can avoid naming conflicts which may be 04:06.090 --> 04:07.980 occured with global variables. 04:09.150 --> 04:15.840 But the better way to write safe code and avoid such naming conflicts is to use immediately invoked 04:15.840 --> 04:17.000 function expressions. 04:18.150 --> 04:22.530 OK, let's go back to Brackett's and remove this code. 04:24.390 --> 04:27.180 First of all, I'm going to write some expression here. 04:27.300 --> 04:29.820 For example, write five plus 10. 04:32.750 --> 04:41.630 If we reload, we won't get any error because it is an expression and when the syntax parser checks, 04:41.630 --> 04:45.290 it recognizes that it is a valid syntax. 04:45.740 --> 04:48.990 But regardless of that, we cannot use this statement. 04:49.010 --> 04:50.080 It doesn't do anything. 04:50.600 --> 04:52.610 But again, it is valid. 04:53.510 --> 04:56.270 OK, let's write anonymous function expression. 04:57.080 --> 05:03.560 You know that anonymous functions do not have names, write function here and also write something inside. 05:03.570 --> 05:05.830 Code braces, for example, of council log. 05:06.260 --> 05:06.770 Hello. 05:10.090 --> 05:17.170 So, as we said, this function doesn't have a name and also it's not assigned to any variable, so 05:17.170 --> 05:21.960 it means that this function as the expression above is not usable. 05:22.930 --> 05:30.700 But when we reload, we will get an error in this case, which tells us that we have something unexpected. 05:31.900 --> 05:38.710 So when Syntex Parser finds the keyword function, that it expects to see the name of this function, 05:39.310 --> 05:43.180 but instead of the name, it finds brace and throws an error. 05:44.050 --> 05:47.710 So this kind of syntax is not belet a like the expression about. 05:49.090 --> 05:58.300 In order to avoid this error, we can wrap this anonymous function with parentheses and if we reload, 05:58.570 --> 06:00.550 then we won't get any error. 06:02.230 --> 06:06.030 OK, in order to execute this function, we need to invoke it. 06:06.160 --> 06:08.730 But you see that it doesn't have a name. 06:09.400 --> 06:11.570 So how can we call this function? 06:12.610 --> 06:13.900 It is very simple. 06:14.380 --> 06:16.570 We just need to use parentheses. 06:18.430 --> 06:26.440 That's reload and you see that it works, function is executed, and we have hello in council, this 06:26.440 --> 06:30.280 is called immediately invoked function expression. 06:31.740 --> 06:37.020 Or sometimes iffy in case of APHIS, we can call them only once. 06:37.380 --> 06:42.960 All right, as usual, we can pass parameters in that function, let's say name. 06:45.190 --> 06:48.470 Also right here, hello, plus name. 06:51.650 --> 06:56.690 And here we can pass as an argument name, for example, John. 06:58.940 --> 07:01.770 Reload and you see that it works. 07:02.450 --> 07:09.710 You notice that we write parentheses outside the braces, it is considered as a better practice, but 07:09.740 --> 07:18.140 you can also call a function inside the parentheses, reload and see that both syntax is valid. 07:19.620 --> 07:28.220 OK, this is very popular and common way to write it is if you check the source code of JavaScript libraries, 07:28.220 --> 07:33.730 for example, Jake worry, you will see that the whole code is wrapped with parentheses. 07:34.370 --> 07:40.040 So using it is a very flexible and great way to write safe code. 07:41.090 --> 07:47.750 OK, besides that, we can use function expression and we can invoke it immediately. 07:48.410 --> 07:51.500 So let's write a variable A equals to function. 07:54.570 --> 08:02.400 Because of that function is assigned to the variable, then Syntex is valid and therefore we don't need 08:02.400 --> 08:04.380 to function with parentheses. 08:05.940 --> 08:07.950 Now, let's invoke the function. 08:08.400 --> 08:13.440 In order to do that, we need to place parentheses after the killer braces. 08:15.780 --> 08:19.890 So let's put some cold inside function, right, consider look, hi. 08:22.550 --> 08:32.360 Reload and we have high in council, if we call again the function using the variable name A, then 08:32.840 --> 08:37.930 we will get an error, which tells us that A is not a function. 08:39.200 --> 08:42.860 The reason of this error is that the function was executed. 08:43.220 --> 08:50.440 And because of that, we do not have here written statement variable A gets the value as undefined. 08:52.370 --> 08:54.290 Let's write here costs look like a. 08:57.190 --> 09:06.970 So you see that the value is undefined, OK, if we return some value, like hello. 09:09.740 --> 09:13.630 The variable, I will get the value, hello. 09:15.350 --> 09:23.120 All right, so in this lecture we have introduced to what ifs are I have demonstrated them using simple 09:23.120 --> 09:30.050 examples, but I'm sure that you noticed how powerful and flexible tool and they could be, as we already 09:30.050 --> 09:32.480 said, immediately invoked function. 09:32.480 --> 09:38.870 Expressions are used in almost every JavaScript library because, again, they allow us to write the 09:38.870 --> 09:39.560 same code. 09:40.820 --> 09:42.260 OK, let's move on.