0 1 00:00:00,890 --> 00: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 2 00:00:07,770 --> 00:00:09,870 go through it in this lesson. 2 3 00:00:09,870 --> 00:00:11,010 So here we are. 3 4 00:00:11,280 --> 00:00:17,300 Now scope is a really important concept in all kinds of programming and not just Javascript programming 4 5 00:00:17,520 --> 00:00:20,340 but it works a little bit differently from language to language. 5 6 00:00:20,340 --> 00: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 7 00:00:27,330 --> 00:00:29,440 tackles this concept of scope. 7 8 00:00:29,460 --> 00:00:32,710 So what exactly is this concept of scope anyways? 8 9 00:00:33,030 --> 00:00:36,260 So let's say that we've created a function called a 9 10 00:00:36,370 --> 00:00:42,450 and inside the function we create a new variable called x and we set it to equal 2. 10 11 00:00:42,750 --> 00: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 12 00:00:50,840 --> 00:00:53,160 2 printed in my console. 12 13 00:00:53,430 --> 00:01:00,840 Now creating our variable inside a function is kind of equivalent to having an apple tree inside your 13 14 00:01:00,900 --> 00:01:01,770 backyard 14 15 00:01:01,980 --> 00:01:02,370 right? 15 16 00:01:02,370 --> 00: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 17 00:01:07,770 --> 00:01:10,890 ahead and you go and pick from your apple tree. 17 18 00:01:10,950 --> 00:01:12,670 Well this is of course possible. 18 19 00:01:12,810 --> 00: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 20 00:01:19,470 --> 00:01:22,140 x is of course possible. 20 21 00:01:22,140 --> 00:01:24,290 Now let's look at another scenario. 21 22 00:01:24,690 --> 00:01:32,940 Let's say that you create your variable x inside your function a, but you try to access it outside 22 23 00:01:32,940 --> 00:01:33,830 the function. 23 24 00:01:34,050 --> 00:01:40,830 Well this is not going to work because this is equivalent to your neighbor trying to pick the apples 24 25 00:01:40,920 --> 00:01:43,910 from your apple tree in your garden. 25 26 00:01:43,960 --> 00:01:48,210 There's a brick wall that blocks him from accessing your garden. 26 27 00:01:48,330 --> 00:01:56,050 And this is where scope comes in The scope of variable x is local to function a. 27 28 00:01:56,220 --> 00:01:59,070 It's only accessible inside the function a 28 29 00:01:59,280 --> 00:02:00,720 so you can change it, 29 30 00:02:00,720 --> 00:02:06,840 you can use it, you can manipulate it, do anything you will with variable x inside the curly braces of 30 31 00:02:06,840 --> 00:02:07,600 function a 31 32 00:02:07,800 --> 00:02:12,120 but you cannot access it outside those curly braces. 32 33 00:02:12,120 --> 00:02:14,790 Now this also holds true in a third scenario. 33 34 00:02:14,790 --> 00: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 35 00:02:21,990 --> 00:02:23,430 inside function b. 35 36 00:02:23,430 --> 00:02:25,980 Well that's not going to work either 36 37 00:02:25,980 --> 00:02:26,570 right? 37 38 00:02:26,580 --> 00:02:32,860 Because this is like your neighbor standing in his backyard trying to access the apples in your backyard. 38 39 00:02:32,880 --> 00:02:34,670 That's never going to work. 39 40 00:02:34,890 --> 00:02:43,640 So again in this case, the scope of variable x is limited to inside the curly braces of function a. 40 41 00:02:43,650 --> 00:02:52,440 Now these are called local variables and the scope of local variables are local to where they were declared. 41 42 00:02:52,440 --> 00:02:57,420 So in most cases that's inside the curly braces of a function. 42 43 00:02:57,420 --> 00:03:05,060 Now here's another scenario. What if instead of creating the variable x inside function a, we create 43 44 00:03:05,060 --> 00:03:06,890 it outside the function. 44 45 00:03:06,900 --> 00:03:13,880 So when we write var x, the keyword var states that we're creating this new variable x. 45 46 00:03:14,130 --> 00:03:18,390 And it's created outside the curly braces of any function. 46 47 00:03:18,690 --> 00:03:22,610 Well in this case, not only can you use it inside function a, 47 48 00:03:22,800 --> 00:03:26,400 you can also use it anywhere else inside the code file. 48 49 00:03:26,430 --> 00:03:30,820 And this is equivalent to an apple tree that's growing in the neighborhood. 49 50 00:03:30,930 --> 00: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 51 00:03:37,260 --> 00:03:44,240 but your neighbor who lives in a different house can also pick the public apple tree in the neighborhood. 51 52 00:03:44,520 --> 00:03:48,470 So these are known as global variables. 52 53 00:03:48,480 --> 00:03:53,750 Now there's a few peculiarities about Javascript variables in relation to scope. 53 54 00:03:53,870 --> 00:03:55,970 And I just want to quickly talk about it. Now 54 55 00:03:56,010 --> 00: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 56 00:04:04,770 --> 00: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 57 00:04:12,390 --> 00:04:18,290 a function basically then this is kind of seen as a soft wall, like a hedge road. 57 58 00:04:18,630 --> 00: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 59 00:04:28,530 --> 00:04:35,940 FOR loop, or the ELSE block and it's the equivalent of having your neighbor sort of just sneakily going 59 60 00:04:35,940 --> 00:04:38,430 through your hedgerow and stealing your apples. 60 61 00:04:38,430 --> 00:04:44,110 This is completely possible using vars inside Javascript. 61 62 00:04:44,130 --> 00:04:49,920 So this brings us nicely to some other types of variables that we saw previously. 62 63 00:04:49,980 --> 00: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 64 00:04:56,760 --> 00:04:57,610 keyword. 64 65 00:04:57,780 --> 00:05:05,560 But they have slightly different behavior. Now the biggest difference is between the const and everything 65 66 00:05:05,560 --> 00:05:11,470 else. A constant that gets created cannot be changed once you give it a value. 66 67 00:05:11,470 --> 00:05:15,930 So we've created this const called z and we set it to equal 4. 67 68 00:05:16,120 --> 00:05:21,290 At no point in the future can we change this constant z to anything other than 4. 68 69 00:05:21,490 --> 00:05:23,810 And we're only allowed to use it, 69 70 00:05:23,830 --> 00:05:26,490 so tap into its value elsewhere. 70 71 00:05:26,770 --> 00:05:34,420 Now with var and let we're able to change the its value but they behave slightly differently in relation 71 72 00:05:34,420 --> 00:05:35,900 to scope. 72 73 00:05:35,920 --> 00:05:41,880 So in terms of functions for all three, they are all local. 73 74 00:05:42,100 --> 00:05:49,390 If you create a variable using var, let or const inside a function they all are local variables. 74 75 00:05:49,390 --> 00:05:52,920 They can only be used inside the function. 75 76 00:05:52,990 --> 00:05:59,590 But if you create any three of these types of variables outside the function then they are all global 76 77 00:05:59,650 --> 00:06:01,790 variables and they have global scope. 77 78 00:06:01,810 --> 00:06:05,230 They can be accessed and used anywhere inside the file. 78 79 00:06:05,230 --> 00:06:07,560 Now the third scenario is a little bit weird. 79 80 00:06:07,720 --> 00: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 81 00:06:16,480 --> 00:06:19,300 curly braces essentially a block of code, 81 82 00:06:19,480 --> 00:06:27,700 then the var is a global and you can access this var x anywhere inside your file. 82 83 00:06:27,970 --> 00:06:31,800 But for let and const, they are variables. 83 84 00:06:31,840 --> 00: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 85 00:06:40,540 --> 00:06:41,850 inside the IF statement. 85 86 00:06:42,160 --> 00:06:49,600 And this is true for FOR loops, WHILE loops, DO-WHILE loops, any sort of other blocks of code 86 87 00:06:49,610 --> 00:06:56,500 that have a pair of curly braces. So this is something that particular to Javascript because in a lot 87 88 00:06:56,500 --> 00:07:03,490 of other programming languages if you create a variable using the var keyword, it will have local scope 88 89 00:07:03,850 --> 00:07:09,520 inside any sort of code block so FOR loops, IF-ELSE statements etc.. 89 90 00:07:09,760 --> 00:07:19,060 Now what I recommend as good practice is to try and avoid using this keyword var. 90 91 00:07:19,060 --> 00:07:24,790 Now we've been using it up till this point because we weren't yet ready to talk about scope. 91 92 00:07:24,970 --> 00: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 93 00:07:32,800 --> 00:07:35,400 or const whenever you can. 93 94 00:07:35,440 --> 00:07:41,300 There are very very few scenarios where you will need to use the keyword var. 94 95 00:07:41,590 --> 00:07:47,320 And in fact going forward whenever you want to write the word var replace it with let instead. 95 96 00:07:47,320 --> 00:07:54,850 Now this again is a new concept and Javascript has a number of peculiarities that can be difficult for 96 97 00:07:54,850 --> 00:07:56,290 beginners to grasp. 97 98 00:07:56,290 --> 00:08:02,020 So in the resources section of this lesson I've included some reading material and some background reading 98 99 00:08:02,350 --> 00: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 100 00:08:09,940 --> 00:08:18,460 and var inside the Chrome developer tools inside the console and trying to use and access and change these 100 101 00:08:18,460 --> 00:08:24,760 variables when they're created inside a function or outside a function or inside an IF statement so 101 102 00:08:24,760 --> 00:08:27,820 that you really understand what's going on yourself. 102 103 00:08:28,110 --> 00: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 104 00:08:34,150 --> 00:08:36,470 part instead of just working the part. 104 105 00:08:36,610 --> 00:08:39,800 So for all of that and more, I'll see you on the next lesson.