WEBVTT 00:05.370 --> 00:11.260 In this video you're going to understand the effects of block scoping on functions in Essex. 00:11.790 --> 00:14.740 So we're going to do. 00:14.840 --> 00:21.290 We're going to create a block and inside the block we're going to create functions and call them and 00:21.290 --> 00:28.010 then we're gonna create another sub block and then we're gonna create new functions inside and call 00:28.010 --> 00:33.190 them and then we'll see how all these functions are going to interact with each other. 00:33.200 --> 00:37.640 So first let's create a function greets 00:41.560 --> 00:42.590 which logs high. 00:43.900 --> 00:48.000 So we create needs inside this block. 00:48.000 --> 00:52.510 Now this creates another function greets 00:56.650 --> 01:04.910 which logs hello inside the sub block. 01:05.020 --> 01:07.270 Now if you call greets right there 01:11.490 --> 01:18.470 you get high because you're going to look in the same scope as where you're calling the function. 01:18.650 --> 01:21.680 And here is your function. 01:21.680 --> 01:24.090 That's why it's like it's logging high. 01:24.300 --> 01:29.190 This same thing happens if you call greet just before the declaration. 01:29.780 --> 01:41.890 And it's going to be said Hi thanks to hoisting now if you call greets inside this block you expect 01:44.100 --> 01:45.990 to get pillow right. 01:46.110 --> 01:49.200 Because you're looking in the same scope as where you're calling the function. 01:49.200 --> 01:52.110 And here is the declaration you're gonna be using. 01:52.110 --> 01:53.060 Perfect. 01:53.070 --> 01:58.410 Now what happens if you call greet right there. 01:58.790 --> 02:06.670 You're guessing Hi must because you're looking in the same scope of the call. 02:06.770 --> 02:12.470 So you're ignoring this block because that's considered a separate scope and you find the declaration 02:12.470 --> 02:14.860 right there and it's the one you're going to be using. 02:14.860 --> 02:16.490 So this one returns Hi. 02:17.950 --> 02:18.220 So 02:25.610 --> 02:35.260 up to now it all makes sense and remember that we wrapped everything inside curly braces creating a 02:35.320 --> 02:38.800 separate block in the global scope 02:41.670 --> 02:46.740 it's how they come in the. 02:47.330 --> 02:47.800 All right. 02:47.800 --> 02:48.790 Perfect. 02:48.790 --> 02:51.340 Now we're gonna try something different. 02:51.340 --> 02:57.670 So instead of wrapping everything inside a block we can write our code in the global scope straightaway 02:58.830 --> 03:03.150 so we're going to delete those curly braces and we'll see what happens 03:08.660 --> 03:09.350 ready. 03:09.410 --> 03:10.830 So let's run this code. 03:10.850 --> 03:12.810 Here we go. 03:12.900 --> 03:15.580 The first call of great returns. 03:15.590 --> 03:22.110 Hi thanks to hoisting so using that declaration. 03:22.170 --> 03:26.260 The second one returns high because you're using that declaration. 03:26.930 --> 03:27.580 Okay. 03:27.750 --> 03:32.300 So this is no surprise. 03:32.450 --> 03:34.540 This is exactly what you would have expected. 03:34.610 --> 03:35.510 Perfect. 03:35.510 --> 03:37.060 Now let's go inside this block. 03:37.190 --> 03:44.350 So you're creating green again and this one is logging hello because you look in the same scope of the 03:44.350 --> 03:44.970 call. 03:45.070 --> 03:51.650 And here is your function grids and you're using that's piece of code you're getting. 03:51.670 --> 03:52.520 Hello. 03:52.530 --> 04:00.810 Now what's happening with the last one so we're getting hello instead of Hi. 04:01.450 --> 04:13.340 So we think is when you call the function in this scope the global scope we call it the function in 04:13.340 --> 04:22.600 the global scope it's going to be able to look inside blocks which are created in the global scope. 04:22.910 --> 04:31.240 So although this block is considered as a separate scope when it comes to variables created using the 04:31.310 --> 04:40.160 letters declaration if you write letters X equal to one and you call X in be global scope 04:43.540 --> 04:51.720 you know where you're gonna get an error X is not defined because that block is considered as a separate 04:51.720 --> 04:52.800 scope. 04:52.800 --> 05:01.470 But what's happening with a function Graetz we're accessing the block and we're getting the value from 05:01.470 --> 05:02.910 that. 05:02.940 --> 05:09.990 Well the thing is if you call a function in the global scope and E6 and there is a block in the global 05:09.990 --> 05:19.280 scope preceding that function then this function is going to be able to use or access the block and 05:19.280 --> 05:26.240 use the declaration of the function or the value of the function from there and make sure that you remember 05:26.240 --> 05:28.690 this because it's very important. 05:28.690 --> 05:31.040 Now let's try something else. 05:31.040 --> 05:37.330 Let's create another block inside 05:40.290 --> 05:47.780 this block create another function Graetz and this time let's log Khyber 05:52.560 --> 05:55.090 we're still getting the same results. 05:55.110 --> 06:04.140 OK because when we are accessing this block in the first scope we're going to use that function and 06:04.150 --> 06:06.530 we're not going to use that one. 06:06.600 --> 06:09.150 Now what happens if this function does exist 06:12.050 --> 06:21.410 so when you call Grete right there you're using it returns high because you're using that volume which 06:21.440 --> 06:27.890 is in the global scope and as we know the functions inside a block they do have access to the outer 06:28.880 --> 06:32.210 environments in our case we do have access to greet. 06:32.330 --> 06:41.450 So we are going to give more priority on the priority here is gonna be going to the outer environments 06:41.480 --> 06:45.150 instead of going inside a cell block. 06:45.220 --> 06:45.470 All right. 06:45.460 --> 06:50.440 So now what happens if this one didn't exist 07:00.190 --> 07:00.580 so 07:04.960 --> 07:12.260 then it's the first of all we getting an error because equaling greets right there. 07:13.250 --> 07:21.950 And although you have declared greets inside a sub block of this block this function does not have access 07:21.950 --> 07:22.440 to it. 07:22.520 --> 07:27.320 The reason why is because this block is coming afterwards after the call. 07:27.320 --> 07:32.630 So if you comment both those lines and equal Greece right there 07:38.230 --> 07:39.220 you still getting an error. 07:40.890 --> 07:46.570 Because this one Greece does not have access to that one. 07:47.100 --> 07:52.540 The reason why is because it's trapped inside a block. 07:52.800 --> 07:59.820 So when a function is wrapped inside a block it's not going to have access to blocks which are inside 08:00.150 --> 08:02.690 that global block. 08:02.780 --> 08:03.480 All right. 08:03.600 --> 08:10.470 Now if I comment that now this one is working because this one is in the global scope. 08:10.470 --> 08:19.680 So he's going to have access to this block which is coming right before OK so we're not gonna have an 08:19.680 --> 08:29.180 error like we had we just won a best one because the block this time is coming before the call. 08:29.190 --> 08:29.460 All right. 08:29.490 --> 08:36.060 So we're not using it hoisting here is just that the block is before the function. 08:36.060 --> 08:43.250 So when we are executing the code we go in line by line and then we are defining the value of the function. 08:43.620 --> 08:44.150 Right. 08:44.790 --> 08:45.950 So we're using that one. 08:45.960 --> 08:50.640 So this function again has got access to this block because it's preceding it. 08:50.840 --> 08:56.730 And he's gonna go inside it and he's gonna look for great it's gonna find it in scope so he's gonna 08:56.730 --> 08:59.000 go in this same block and he's gonna find it. 08:59.060 --> 09:00.820 Right. 09:00.950 --> 09:01.170 Right. 09:01.170 --> 09:01.840 So now 09:04.580 --> 09:05.290 it's on comments. 09:05.290 --> 09:05.810 OK. 09:07.260 --> 09:09.330 Um we're back here. 09:09.330 --> 09:11.010 Now let's try something. 09:11.010 --> 09:11.460 Let's 09:16.500 --> 09:24.770 create a new block like that and have a new declaration of greed saying 09:27.930 --> 09:28.510 hi hello 09:33.210 --> 09:44.420 let's save no change now what gave we call greets again right there we get hi hello. 09:44.420 --> 09:54.810 So basically this function when called is using the preceding block of the closest block which precedes 09:54.810 --> 09:55.320 is. 09:55.390 --> 10:01.920 So it's not going to use this one is gonna use this one which is right before. 10:02.940 --> 10:08.100 So what's happening actually when writing the code is that's when you're going through these blocks 10:09.360 --> 10:20.040 the value of Grete or the function greets is gonna get re declared every time having a new value. 10:20.150 --> 10:29.470 And this is very specific to functions with blocks in E6 so hopefully this gave you a good understanding 10:29.470 --> 10:34.230 of how blocks coping effects functions in Essex. 10:34.230 --> 10:41.940 And this is very important now you will learn more about this when you go through XY slices in these 10:41.940 --> 10:42.300 calls.