WEBVTT 00:00.180 --> 00:06.510 It's time to discuss one of the important and waited things in JavaScript, which is frequently confusing 00:06.510 --> 00:09.600 and unknown, especially for new job developers. 00:10.260 --> 00:12.030 I'm going to talk about hoisting. 00:13.250 --> 00:19.520 There are a lot of online resources where you can find information about what hoisting is, and most 00:19.520 --> 00:24.470 of them tells us that hoisting is the same process as they were hoisting itself means. 00:25.190 --> 00:29.200 But actually it's not quite correct at first. 00:29.210 --> 00:33.590 Let's go back to our text editor and write some simple example. 00:34.610 --> 00:39.800 Create a variable A equals to ten and then below grid function. 00:40.790 --> 00:41.180 B. 00:43.400 --> 00:47.330 And then return, let's say, 20. 00:50.560 --> 00:52.330 Let's log in council. 00:53.480 --> 01:00.840 The Deferrable A and then call function B might consider to be. 01:05.820 --> 01:12.490 Reload and we have 10 and 20, the result, what you were expecting. 01:12.900 --> 01:18.470 So, as you already know, JavaScript engine reads and executes code line by line. 01:19.020 --> 01:20.370 It starts from top. 01:20.370 --> 01:27.140 And when it comes to cancel that log aid, the engine knows that there exists variable AI with its value 01:27.240 --> 01:29.990 and therefore we get in console 10. 01:30.930 --> 01:38.430 The same happens with function when the engine is considered log be it knows that there exists function 01:38.430 --> 01:46.920 B which returns the value to there is not something new or unusual until we move this code up and write 01:46.920 --> 01:52.050 them before variable and function B, then something weird happens. 01:52.440 --> 01:56.170 You see that we have undefined and then 20. 01:57.300 --> 01:58.760 So what has happened? 01:59.640 --> 02:01.830 We got undefined instead of 10. 02:03.030 --> 02:05.520 You know that undefined is a primitive data type. 02:06.000 --> 02:13.410 So it is a value if JavaScript engine executes code line by line, as you already know, and at first 02:13.410 --> 02:19.470 it finds console dot log a, then how does it know that this variable exists? 02:19.470 --> 02:25.020 And at the same time it's more word that variable A has a value undefined. 02:26.430 --> 02:33.900 It would be more logical to get an error that tells us A is not defined, which is actually different 02:33.900 --> 02:37.380 from undefined and it means that the variable doesn't exist. 02:38.040 --> 02:40.560 But instead of that we get undefined. 02:42.480 --> 02:49.140 Something different happens with function at first engine finds in location or function B and it gives 02:49.140 --> 02:51.840 us a value 20, which is correct. 02:52.530 --> 02:58.830 But the question is that how does the engine execute the function before it actually reach this line 02:58.830 --> 02:59.280 of code? 03:00.330 --> 03:03.150 The answer on those questions is in hoisting. 03:04.890 --> 03:11.360 In order to understand better what hosting is, let's talk deeper about how the code is actually executed. 03:11.700 --> 03:15.330 You already know what is an execution context and how it works. 03:16.050 --> 03:25.440 So what the code is running, the execution context is created and it has two stages creation and execution 03:26.520 --> 03:28.770 in creation stage, global object. 03:29.190 --> 03:32.310 The special key, this and scope chain is created. 03:35.140 --> 03:43.570 Syntex Pass or go through the code, and at this time, JavaScript engine creates memory space for variables 03:43.570 --> 03:45.450 and functions a lot. 03:45.460 --> 03:49.310 This happens before the engine actually starts executing the code. 03:50.410 --> 03:57.550 So when JavaScript engine creates memory space for variables, it assigns to all those variables the 03:57.550 --> 03:59.730 value undefined as a default. 04:00.730 --> 04:04.570 And remember that this happens always in creation stage. 04:06.060 --> 04:14.700 As for the functions in creation stage, the engine set up memory space and for them nothing is changed. 04:14.860 --> 04:17.620 Functions don't get any temporary values. 04:18.880 --> 04:25.660 Actually, all the stuff in creation stage, I mean, to set up the memory space for variables and functions 04:25.660 --> 04:27.070 is called hoisting. 04:28.720 --> 04:34.990 Sometimes you may hear or find the definition of hoisting like that variable and function declarations 04:34.990 --> 04:40.650 are physically moved to the top of your coding, but this is not what really happens. 04:41.290 --> 04:43.360 Your code doesn't move physically. 04:44.500 --> 04:51.160 What does happen is that variable and function declarations are put into memory during the creation 04:51.160 --> 04:55.270 phase, but stays exactly where you typed it in in your coding. 04:56.820 --> 05:04.230 After the creation stage starts, the second phase, which is execution in this stage, JavaScript engine 05:04.230 --> 05:12.180 executes code line by line and the variable AI, which had as a default undefined, gets its value 10. 05:14.530 --> 05:21.670 All right, let's switch back over and go to brackets right below Castlewood, log A. 05:26.320 --> 05:36.530 Then refresh, we have undefined 20 and 10 when JavaScript engine moves to execution stage and reads 05:36.560 --> 05:43.480 this line of code, it checks the memory space for this variable and finds that at this point has the 05:43.480 --> 05:44.530 value undefined. 05:45.880 --> 05:53.170 But when it reaches this line of code where variable equals ten, then it change the value and define 05:53.170 --> 05:53.760 into ten. 05:54.160 --> 05:56.430 And after another, cancel that log eight. 05:56.470 --> 05:57.640 We got 10. 06:00.050 --> 06:09.200 All right, if we use function expression, I mean, if we assign it to the variable and then reload, 06:10.910 --> 06:19.400 we will get an error, which tells us that the B is not A function, because at this point, Variable 06:19.400 --> 06:20.880 B is undefined as well. 06:22.220 --> 06:27.050 If we get rid of the parentheses, then we will get undefined. 06:29.800 --> 06:35.380 In order to avoid such unexpected results and errors, remember that it's always a better practice to 06:35.380 --> 06:39.700 invoke functions and use variables after their declarations. 06:40.750 --> 06:49.500 OK, let's use another example in order to make it clearer and use in this case, if else statement 06:50.020 --> 06:50.860 so right. 06:50.870 --> 06:53.980 If then as the condition. 06:55.270 --> 07:01.980 Right, just through because we need the condition to be true, then instead the color braces create 07:01.990 --> 07:05.740 variable aid and the right equals the ten. 07:07.420 --> 07:14.560 Then inside L's statement create another variable babi equals to 20. 07:17.250 --> 07:21.420 And below, lock them in Castle, right, Castle, that log a. 07:24.780 --> 07:32.500 And then, B, reload the page and you see that we have ten and undefined. 07:33.900 --> 07:38.980 We know that if the condition is true, then the block of code inside if it's executed. 07:39.390 --> 07:44.600 So here we have true and therefore we got the value of variable a ten. 07:45.450 --> 07:51.570 But at the same time, when the condition of if is true, then the block of code inside our statement 07:51.570 --> 07:52.560 is not executed. 07:53.700 --> 08:00.070 In the creation phase, JavaScript engine has set the values for variables and be undefined. 08:01.020 --> 08:04.980 So when the second stage was started, I made the execution. 08:05.400 --> 08:09.090 Then because of that, the condition in its statement was true. 08:09.870 --> 08:13.520 Only this line of code was executed and we got ten. 08:14.700 --> 08:21.450 But this line of code has never been executed and for variable B, the value undefined was remained. 08:22.620 --> 08:25.410 If we change the condition through into false. 08:27.660 --> 08:28.050 Then. 08:30.140 --> 08:38.240 We will get at first undefined and then 20, because the block of code inside each statement is not 08:38.240 --> 08:41.190 executed, but in our statement it does. 08:41.660 --> 08:44.360 Therefore, we got undefined and 20. 08:46.660 --> 08:53.900 All right, the hosting for many developers is confusing or maybe unknown behavior of JavaScript. 08:54.460 --> 09:00.330 So if you don't understand it, well, your code may cause errors and bugs and to avoid them. 09:00.380 --> 09:06.940 Remember that you need to declare all variables at the beginning of every scope and invoked function 09:06.940 --> 09:09.610 expressions after their declarations. 09:11.140 --> 09:12.810 OK, let's move on.