WEBVTT 00:02.200 --> 00:08.080 It's time to describe one of the most confusing, but at the same time one of the most powerful and 00:08.080 --> 00:15.040 important part of JavaScript I'm going to talk about closure's it is a weird and odd topic for many 00:15.040 --> 00:16.930 developers, especially for beginners. 00:17.320 --> 00:18.910 So you need to understand it. 00:18.910 --> 00:22.090 Well, OK, what does Clojure mean? 00:22.780 --> 00:23.860 We can summarize. 00:23.860 --> 00:25.420 Closure's in the following words. 00:25.930 --> 00:32.380 Function has always access to the variables of its outer function, even after the execution context 00:32.380 --> 00:34.180 of the outer function is finished. 00:34.990 --> 00:41.590 It is a little and simple definition about closure's maybe doesn't tell you everything about them and 00:41.590 --> 00:43.000 it's not helpful at this point. 00:43.450 --> 00:48.040 But during the lecture you will learn step by step what those words actually mean. 00:49.090 --> 00:51.820 OK, in order to explain closure's. 00:51.820 --> 00:53.050 That's right. 00:53.050 --> 00:54.010 Some examples. 00:54.010 --> 00:56.620 As the first example, I'm going to write a simple one. 00:57.130 --> 01:03.100 Great function for adding some numbers right function and call it calculate. 01:05.710 --> 01:15.070 Pass the parameter as number one, then insert a function, create a variable and call it number two 01:16.240 --> 01:22.180 and assign a value as 10, as we already know, functions in JavaScript are first class functions. 01:22.600 --> 01:27.620 And also because of that functions or special type of object, we can return them. 01:28.210 --> 01:32.380 So I'm going to use written statement and return new function, right. 01:32.800 --> 01:39.310 Return function and pass the parameter number three. 01:41.680 --> 01:49.390 Inside that function, I'm going to create a variable sum and then write number one. 01:49.810 --> 01:50.470 Number two. 01:51.070 --> 01:51.700 Number three. 01:54.440 --> 01:58.880 Also, log the variable, some in writes the consider some. 02:00.530 --> 02:09.530 OK, so here we have a function which includes parameter number one and the variable number two, and 02:09.530 --> 02:16.310 it returns new function with parameter number three and this function at those three numbers. 02:17.240 --> 02:25.280 OK, let's invoke the calculate function and going to create a new variable add and then call the function 02:25.280 --> 02:35.360 right var at equals to calculate and parse the argument as five, then log this variable and cancel. 02:35.360 --> 02:35.610 Right. 02:35.630 --> 02:36.770 Cancel that log at. 02:40.690 --> 02:49.330 Reload, so we have in castle function, which is returned by the function calculate in order to get 02:49.330 --> 02:52.060 the result, we need to invoke this function as well. 02:52.510 --> 02:55.080 I hope you remember how to do that. 02:55.420 --> 03:06.070 We just need to use the variable at the right at and pass the argument at 15 and also remove this console 03:06.070 --> 03:07.660 that lock reload. 03:08.890 --> 03:13.510 And we have 30 the some of those three numbers. 03:14.800 --> 03:15.280 All right. 03:15.910 --> 03:18.250 I'm sure that you were expecting this result. 03:18.250 --> 03:19.030 Definitely. 03:19.060 --> 03:22.130 And you may wonder what the special happened here. 03:23.120 --> 03:29.530 OK, let me remind you what happens behind the scenes when the functions are executed, when the code 03:29.530 --> 03:38.020 runs global execution context is created, when JavaScript engine reaches that line, calculate function 03:38.020 --> 03:41.680 is invoked and it creates its local execution context. 03:42.490 --> 03:49.300 And this function exists parameter number one, which is actually variable itself and also variable 03:49.300 --> 03:49.960 number two. 03:50.830 --> 03:56.470 So function named calculate runs and then finishes its execution. 03:57.160 --> 04:01.120 Therefore, its local execution context is gone from the execution stack. 04:02.320 --> 04:08.860 Then when the engine, which is next line, the second function is invoked and it creates its local 04:08.860 --> 04:10.560 execution context as well. 04:11.320 --> 04:14.170 This function includes parameter number three. 04:15.010 --> 04:18.870 So as you remember in Castle, we got results thirty. 04:19.270 --> 04:22.870 It means that those three numbers, I mean, No. 04:22.870 --> 04:30.700 One, number two and number three were sent here was a question, a function named CALCULATE has already 04:30.700 --> 04:32.230 finished its execution. 04:32.680 --> 04:36.610 How could the return function have access on variables, number one? 04:36.610 --> 04:42.910 And number two, it's possible in JavaScript because of the power of closure's. 04:43.720 --> 04:51.730 So inner function always has access to the variables of output function even after it finishes running. 04:52.990 --> 04:54.370 This is power of JavaScript. 04:54.370 --> 04:55.870 It's not some kind of magic. 04:56.200 --> 05:02.890 It's a built in feature of this programming language because we don't create manually closure's JavaScript 05:02.890 --> 05:04.510 engine does it automatically. 05:05.410 --> 05:11.200 OK, let's write one more a bit complicated example for better understanding. 05:11.740 --> 05:13.350 Let's remove this code. 05:14.680 --> 05:18.670 This example is one of the most common and popular regarding closure's. 05:19.120 --> 05:24.460 So if you search information about closure's, you may find it somewhere. 05:25.180 --> 05:26.710 OK, let's create function. 05:26.710 --> 05:26.990 Right. 05:27.010 --> 05:27.790 Function A. 05:30.520 --> 05:40.720 Then I'm going to create an empty array right over a right equals to empty square brackets and then 05:40.720 --> 05:43.120 below, right simple for loop. 05:45.890 --> 05:56.630 Right, I equals to zero, then we need to hear a simple condition is less than three and then the increment 05:56.630 --> 05:57.410 I plus plus. 05:59.990 --> 06:05.930 On each iteration, we're going to use function, which will display an item in council. 06:06.410 --> 06:15.910 So for that, we need to use a real push method, right, a red dot push and inside the parentheses 06:16.250 --> 06:21.290 pass function and inside that function. 06:22.100 --> 06:22.470 Right. 06:22.700 --> 06:25.340 Cancel the log I. 06:29.020 --> 06:30.430 And then return. 06:31.030 --> 06:31.480 All right. 06:34.530 --> 06:43.200 OK, now we need to invoke dysfunction, let's create variable B and then call function A right of our 06:43.200 --> 06:49.890 B equals to A at first I'm going to display in council what an array looks like. 06:50.400 --> 06:55.760 I don't want you to be confused because this is a moment where many of the students get lost. 06:56.040 --> 06:57.420 So that's in council, right? 06:57.420 --> 06:58.710 Constant dialogue B. 07:01.650 --> 07:10.060 Reload and you see that we have an array which consists of three functions because we had three iterations. 07:11.160 --> 07:12.960 Now let's invoke each of them. 07:13.350 --> 07:18.930 So write B and then in square brackets, the index number zero. 07:19.770 --> 07:23.920 Now we have access on the first function, which is a first item in Iraq. 07:24.120 --> 07:30.290 And in order to call it, we need to place parentheses here in the same way. 07:30.300 --> 07:35.520 Let's call the rest of the functions, write B1 and then B2. 07:37.740 --> 07:43.620 All right, before I reload the page, I want you to think about what should be the result. 07:44.460 --> 07:49.320 Do you think that we will get zero one, two or something else? 07:50.040 --> 07:55.350 Let's see, reload and we have three for each item. 07:56.430 --> 07:58.210 That is something strange, right? 07:59.190 --> 07:59.790 Not really. 08:00.840 --> 08:04.070 Let's take a deep look how this code work behind the scenes. 08:05.580 --> 08:07.410 So here we have our code. 08:08.370 --> 08:16.700 When it runs global execution, context is created, then function is invoked and it creates its local 08:16.740 --> 08:20.910 execution context and the block of code inside it is executed. 08:22.110 --> 08:31.230 It will have an empty array and for loop or the first iteration when I is equal to zero because of the 08:31.230 --> 08:36.300 push method, an empty array, anonymous function is added as the first item. 08:37.620 --> 08:44.400 Then I becomes one and again anonymous function is added to the array as a second item. 08:45.570 --> 08:53.940 Then in the same way I becomes to condition is still true and function is added to the array as the 08:53.940 --> 08:54.640 third item. 08:56.130 --> 09:01.160 Keep in mind that these functions are just added to the array without any execution. 09:02.400 --> 09:04.170 After that it becomes three. 09:04.770 --> 09:08.790 But according to the condition, I should be less than three. 09:11.050 --> 09:15.160 Therefore, condition becomes false and a loop terminates iteration. 09:16.630 --> 09:22.970 Also function a finish is execution and its local execution context is gone from the stack. 09:23.920 --> 09:27.060 After that, we need more functions inside that array. 09:28.030 --> 09:33.790 They are called they create their local execution context because of the closure. 09:34.030 --> 09:38.240 They have access on variable, which is in their output function. 09:38.710 --> 09:45.640 So for the first, second and third function, variable is same and it equals two three. 09:47.260 --> 09:49.970 Makes sense, I hope. 09:49.990 --> 09:50.470 Yes. 09:52.470 --> 10:01.140 All right, actually, disclosures we can see in council, if we drop down this array and then expand 10:01.320 --> 10:04.590 the function, we will find you skulks. 10:05.680 --> 10:09.570 Then if we drop down it as well, we will see here Clojure. 10:10.110 --> 10:13.520 And if we check it, we'll find the variable. 10:13.530 --> 10:15.060 I would the value three. 10:16.620 --> 10:19.110 It's the same for the rest of the functions. 10:20.370 --> 10:28.220 If we check them, we will find again I with the value three. 10:29.790 --> 10:38.550 OK, if we want to get results in council as zero one and two for that we need to execute this anonymous 10:38.550 --> 10:40.750 function during each iteration. 10:41.580 --> 10:43.910 Can you think of what we can do for that? 10:44.730 --> 10:50.460 The perfect way is to use our newly learned, immediately invoked function expression. 10:51.090 --> 10:54.660 So we need to change your code a little bit at first. 10:55.020 --> 11:01.350 Let's wrap anonymous function with parentheses and then invoke it. 11:05.140 --> 11:07.540 We do not need this code anymore. 11:08.740 --> 11:16.540 Also, remove this variable as well, then reload the page and here we go. 11:17.050 --> 11:19.900 We have zero one and two. 11:21.160 --> 11:24.370 Before we finish, let's consider once again what happened. 11:25.750 --> 11:34.660 So when the code runs again, global execution context is created, then the function is invoked and 11:34.660 --> 11:36.940 it creates its local execution context. 11:37.750 --> 11:45.220 On the first iteration, when the AI is equal to zero function inside push method is executed because 11:45.220 --> 11:46.690 this function now is iffy. 11:47.740 --> 11:52.750 At this point I is zero as I see, and in council we get zero. 11:53.500 --> 12:01.930 Then the execution context of if he is gone on the second iteration, AI becomes one and again function 12:01.930 --> 12:11.170 inside push method is executed and we get in council one, then execution context of if he is gone and 12:11.170 --> 12:20.770 starts third iteration on which I becomes to again function is executed and in the exact same way we 12:20.770 --> 12:30.380 get to in council, then the execution context of if he is gone I becomes three condition inside for 12:30.380 --> 12:35.710 a loop is false and loop terminates iteration makes sense. 12:37.440 --> 12:42.160 All right, I hope that you understood what closures are in JavaScript. 12:42.630 --> 12:48.240 I know that it's not a simple topic and it often causes confusion and misunderstanding. 12:48.990 --> 12:52.320 I want you to try your best in order to understand it. 12:52.320 --> 12:57.230 Well, because, as we said, it's very powerful and important feature in JavaScript. 12:58.080 --> 13:03.060 If you had any trouble with understanding this concept, I recommend to re watch this video. 13:04.170 --> 13:04.590 All right. 13:05.100 --> 13:05.730 Let's go ahead.