WEBVTT 0 00:00.890 --> 00:07.770 Alright guys. In the last lesson we came across this concept of scope very briefly and I promised that I'd 1 00:07.770 --> 00:09.870 go through it in this lesson. 2 00:09.870 --> 00:11.010 So here we are. 3 00:11.280 --> 00:17.300 Now scope is a really important concept in all kinds of programming and not just Javascript programming 4 00:17.520 --> 00:20.340 but it works a little bit differently from language to language. 5 00:20.340 --> 00:27.240 So in this lesson I'm going to be focusing specifically on Javascript and all of the ways in which Javascript 6 00:27.330 --> 00:29.440 tackles this concept of scope. 7 00:29.460 --> 00:32.710 So what exactly is this concept of scope anyways? 8 00:33.030 --> 00:36.260 So let's say that we've created a function called a 9 00:36.370 --> 00:42.450 and inside the function we create a new variable called x and we set it to equal 2. 10 00:42.750 --> 00:50.280 Now if I tried to console log x inside function a, then of course there's no problems and I would get 11 00:50.840 --> 00:53.160 2 printed in my console. 12 00:53.430 --> 01:00.840 Now creating our variable inside a function is kind of equivalent to having an apple tree inside your 13 01:00.900 --> 01:01.770 backyard 14 01:01.980 --> 01:02.370 right? 15 01:02.370 --> 01:07.770 Your house is surrounded by walls and you've got this apple tree that's inside your garden and you go 16 01:07.770 --> 01:10.890 ahead and you go and pick from your apple tree. 17 01:10.950 --> 01:12.670 Well this is of course possible. 18 01:12.810 --> 01:19.470 So our code in this case when we're using this variable x inside the function where we created the variable 19 01:19.470 --> 01:22.140 x is of course possible. 20 01:22.140 --> 01:24.290 Now let's look at another scenario. 21 01:24.690 --> 01:32.940 Let's say that you create your variable x inside your function a, but you try to access it outside 22 01:32.940 --> 01:33.830 the function. 23 01:34.050 --> 01:40.830 Well this is not going to work because this is equivalent to your neighbor trying to pick the apples 24 01:40.920 --> 01:43.910 from your apple tree in your garden. 25 01:43.960 --> 01:48.210 There's a brick wall that blocks him from accessing your garden. 26 01:48.330 --> 01:56.050 And this is where scope comes in The scope of variable x is local to function a. 27 01:56.220 --> 01:59.070 It's only accessible inside the function a 28 01:59.280 --> 02:00.720 so you can change it, 29 02:00.720 --> 02:06.840 you can use it, you can manipulate it, do anything you will with variable x inside the curly braces of 30 02:06.840 --> 02:07.600 function a 31 02:07.800 --> 02:12.120 but you cannot access it outside those curly braces. 32 02:12.120 --> 02:14.790 Now this also holds true in a third scenario. 33 02:14.790 --> 02:21.900 Say you have two functions a and b. You create the variable x inside function a and you try to use it 34 02:21.990 --> 02:23.430 inside function b. 35 02:23.430 --> 02:25.980 Well that's not going to work either 36 02:25.980 --> 02:26.570 right? 37 02:26.580 --> 02:32.860 Because this is like your neighbor standing in his backyard trying to access the apples in your backyard. 38 02:32.880 --> 02:34.670 That's never going to work. 39 02:34.890 --> 02:43.640 So again in this case, the scope of variable x is limited to inside the curly braces of function a. 40 02:43.650 --> 02:52.440 Now these are called local variables and the scope of local variables are local to where they were declared. 41 02:52.440 --> 02:57.420 So in most cases that's inside the curly braces of a function. 42 02:57.420 --> 03:05.060 Now here's another scenario. What if instead of creating the variable x inside function a, we create 43 03:05.060 --> 03:06.890 it outside the function. 44 03:06.900 --> 03:13.880 So when we write var x, the keyword var states that we're creating this new variable x. 45 03:14.130 --> 03:18.390 And it's created outside the curly braces of any function. 46 03:18.690 --> 03:22.610 Well in this case, not only can you use it inside function a, 47 03:22.800 --> 03:26.400 you can also use it anywhere else inside the code file. 48 03:26.430 --> 03:30.820 And this is equivalent to an apple tree that's growing in the neighborhood. 49 03:30.930 --> 03:36.900 So not only can you the person who lives in a house in the neighborhood pick apples from the apple tree, 50 03:37.260 --> 03:44.240 but your neighbor who lives in a different house can also pick the public apple tree in the neighborhood. 51 03:44.520 --> 03:48.470 So these are known as global variables. 52 03:48.480 --> 03:53.750 Now there's a few peculiarities about Javascript variables in relation to scope. 53 03:53.870 --> 03:55.970 And I just want to quickly talk about it. Now 54 03:56.010 --> 04:04.620 if instead of creating our var inside a function which you can view as say a brick wall that's impenetrable, 55 04:04.770 --> 04:12.390 if we instead created it inside an IF statement or a FOR loop or a WHILE loop or anything other than 56 04:12.390 --> 04:18.290 a function basically then this is kind of seen as a soft wall, like a hedge road. 57 04:18.630 --> 04:28.530 And when you do that, you can in fact access this var x outside the curly braces of the IF block or the 58 04:28.530 --> 04:35.940 FOR loop, or the ELSE block and it's the equivalent of having your neighbor sort of just sneakily going 59 04:35.940 --> 04:38.430 through your hedgerow and stealing your apples. 60 04:38.430 --> 04:44.110 This is completely possible using vars inside Javascript. 61 04:44.130 --> 04:49.920 So this brings us nicely to some other types of variables that we saw previously. 62 04:49.980 --> 04:56.700 So we've seen that you can create a variable by using the var keyword, the let keyword as well as the const 63 04:56.760 --> 04:57.610 keyword. 64 04:57.780 --> 05:05.560 But they have slightly different behavior. Now the biggest difference is between the const and everything 65 05:05.560 --> 05:11.470 else. A constant that gets created cannot be changed once you give it a value. 66 05:11.470 --> 05:15.930 So we've created this const called z and we set it to equal 4. 67 05:16.120 --> 05:21.290 At no point in the future can we change this constant z to anything other than 4. 68 05:21.490 --> 05:23.810 And we're only allowed to use it, 69 05:23.830 --> 05:26.490 so tap into its value elsewhere. 70 05:26.770 --> 05:34.420 Now with var and let we're able to change the its value but they behave slightly differently in relation 71 05:34.420 --> 05:35.900 to scope. 72 05:35.920 --> 05:41.880 So in terms of functions for all three, they are all local. 73 05:42.100 --> 05:49.390 If you create a variable using var, let or const inside a function they all are local variables. 74 05:49.390 --> 05:52.920 They can only be used inside the function. 75 05:52.990 --> 05:59.590 But if you create any three of these types of variables outside the function then they are all global 76 05:59.650 --> 06:01.790 variables and they have global scope. 77 06:01.810 --> 06:05.230 They can be accessed and used anywhere inside the file. 78 06:05.230 --> 06:07.560 Now the third scenario is a little bit weird. 79 06:07.720 --> 06:16.480 If you create a variable inside an IF or an ELSE or a FOR or a WHILE tho anything that has a pair of 80 06:16.480 --> 06:19.300 curly braces essentially a block of code, 81 06:19.480 --> 06:27.700 then the var is a global and you can access this var x anywhere inside your file. 82 06:27.970 --> 06:31.800 But for let and const, they are variables. 83 06:31.840 --> 06:40.390 So that means that if you create a let or a const inside an IF statement then you can only use them 84 06:40.540 --> 06:41.850 inside the IF statement. 85 06:42.160 --> 06:49.600 And this is true for FOR loops, WHILE loops, DO-WHILE loops, any sort of other blocks of code 86 06:49.610 --> 06:56.500 that have a pair of curly braces. So this is something that particular to Javascript because in a lot 87 06:56.500 --> 07:03.490 of other programming languages if you create a variable using the var keyword, it will have local scope 88 07:03.850 --> 07:09.520 inside any sort of code block so FOR loops, IF-ELSE statements etc.. 89 07:09.760 --> 07:19.060 Now what I recommend as good practice is to try and avoid using this keyword var. 90 07:19.060 --> 07:24.790 Now we've been using it up till this point because we weren't yet ready to talk about scope. 91 07:24.970 --> 07:32.530 But now that we understand how it works, it's much safer and more predictable to try and always use let 92 07:32.800 --> 07:35.400 or const whenever you can. 93 07:35.440 --> 07:41.300 There are very very few scenarios where you will need to use the keyword var. 94 07:41.590 --> 07:47.320 And in fact going forward whenever you want to write the word var replace it with let instead. 95 07:47.320 --> 07:54.850 Now this again is a new concept and Javascript has a number of peculiarities that can be difficult for 96 07:54.850 --> 07:56.290 beginners to grasp. 97 07:56.290 --> 08:02.020 So in the resources section of this lesson I've included some reading material and some background reading 98 08:02.350 --> 08:09.490 for you to really get to grips with this concept and also I'd recommend trying it out using let, const 99 08:09.940 --> 08:18.460 and var inside the Chrome developer tools inside the console and trying to use and access and change these 100 08:18.460 --> 08:24.760 variables when they're created inside a function or outside a function or inside an IF statement so 101 08:24.760 --> 08:27.820 that you really understand what's going on yourself. 102 08:28.110 --> 08:34.150 Now in the next lesson we are going to be getting on and styling our to do list to make it look the 103 08:34.150 --> 08:36.470 part instead of just working the part. 104 08:36.610 --> 08:39.800 So for all of that and more, I'll see you on the next lesson.