WEBVTT 1 00:00:01.690 --> 00:00:03.280 Let's now take a look at 2 00:00:03.280 --> 00:00:06.270 the three different ways of declaring variables 3 00:00:06.270 --> 00:00:07.543 in JavaScript. 4 00:00:08.810 --> 00:00:11.910 So, up until this point, we have always used 5 00:00:11.910 --> 00:00:14.890 the let keyword to declare variables. 6 00:00:14.890 --> 00:00:18.650 However, there are also const and var. 7 00:00:18.650 --> 00:00:22.570 Now, let and const were introduced in ES6, 8 00:00:22.570 --> 00:00:25.270 and so they are modern JavaScript. 9 00:00:25.270 --> 00:00:29.960 While the var keyword is the old way of declaring variables. 10 00:00:29.960 --> 00:00:33.340 So, let's learn how they are different and which one to use 11 00:00:33.340 --> 00:00:35.640 in which situations. 12 00:00:35.640 --> 00:00:40.300 And let's, again, start by getting rid of this code. 13 00:00:40.300 --> 00:00:43.680 Actually, all I will do is move this to the end 14 00:00:44.540 --> 00:00:47.470 and in the future, I will just do this before recording 15 00:00:47.470 --> 00:00:48.303 the next video. 16 00:00:49.530 --> 00:00:53.690 So anyway, we use the let keyword to declare variables 17 00:00:53.690 --> 00:00:57.291 that can change later so basically during the execution 18 00:00:57.291 --> 00:01:01.890 of our program and that's exactly what we did here. 19 00:01:01.890 --> 00:01:05.460 So, we used let to declare JavaScript is fun, 20 00:01:05.460 --> 00:01:09.693 and then we changed that later from true to yes. 21 00:01:11.140 --> 00:01:16.070 But for example, or another example I would say is 22 00:01:17.290 --> 00:01:22.030 let's set the age to 30 at one point of the program. 23 00:01:22.030 --> 00:01:24.240 And then in another point of the program, 24 00:01:24.240 --> 00:01:27.040 we can change it to something else. 25 00:01:27.040 --> 00:01:31.000 For example, when the person turns 31 26 00:01:31.000 --> 00:01:35.160 and then the age of course changes from 30 to 31. 27 00:01:35.160 --> 00:01:38.250 And so, it's perfectly okay to declare a variable 28 00:01:38.250 --> 00:01:41.210 with let at one point in the program, 29 00:01:41.210 --> 00:01:44.580 and then later assign a new value to it. 30 00:01:44.580 --> 00:01:48.400 In technical terms, we call this reassigning a value to 31 00:01:48.400 --> 00:01:51.638 a variable, or also we say that we mutate 32 00:01:51.638 --> 00:01:54.760 the age variable in this case. 33 00:01:54.760 --> 00:01:57.790 So, it was 30 and now it's 31, 34 00:01:57.790 --> 00:02:01.200 and so we mutated the variable, okay? 35 00:02:01.200 --> 00:02:04.420 So, that's a term that you will hear all the time 36 00:02:04.420 --> 00:02:06.640 in the JavaScript world. 37 00:02:06.640 --> 00:02:08.940 So, when we need to mutate a variable, 38 00:02:08.940 --> 00:02:12.340 that's the perfect use case for using let 39 00:02:12.340 --> 00:02:15.170 and that also counts for the case that we want 40 00:02:15.170 --> 00:02:17.040 to declare empty variables. 41 00:02:17.040 --> 00:02:20.150 So for example, as we did here, where we declared 42 00:02:20.150 --> 00:02:24.430 an empty year and then later reassigned that variable 43 00:02:24.430 --> 00:02:28.600 to 1991, and sometimes we actually do this in practice. 44 00:02:28.600 --> 00:02:31.950 For example, when we want to declare all the variables 45 00:02:31.950 --> 00:02:33.560 at the top of a file, 46 00:02:33.560 --> 00:02:37.450 but only assign actual values to them later in the program, 47 00:02:37.450 --> 00:02:40.160 for example, based on some condition. 48 00:02:40.160 --> 00:02:43.920 Now, on the other hand, we use the const keyword 49 00:02:43.920 --> 00:02:47.280 to declare variables that are not supposed to change 50 00:02:47.280 --> 00:02:49.810 at any point in the future. 51 00:02:49.810 --> 00:02:54.250 So, the value in a const variable cannot be changed. 52 00:02:54.250 --> 00:02:59.250 For example, let's say the birth year, 1991 for example. 53 00:03:05.820 --> 00:03:10.820 If we then tried to reassign that let's say to 1990, 54 00:03:11.190 --> 00:03:12.473 it should not work. 55 00:03:13.570 --> 00:03:18.400 So, let's test that, and indeed we get a type error. 56 00:03:18.400 --> 00:03:22.210 So, assignment to constant variable. 57 00:03:22.210 --> 00:03:25.470 And so, that's exactly what the const keyword does. 58 00:03:25.470 --> 00:03:28.770 It creates a variable that we cannot reassign 59 00:03:28.770 --> 00:03:32.250 or in technical terms, an immutable variable. 60 00:03:32.250 --> 00:03:36.580 So, a variable that cannot be mutated, okay? 61 00:03:36.580 --> 00:03:39.500 And the birth year is a perfect example for that 62 00:03:39.500 --> 00:03:43.850 because in fact, the birth year of a person can never change 63 00:03:43.850 --> 00:03:46.470 while the age of course can change. 64 00:03:46.470 --> 00:03:49.850 And so that's why we used let for the age 65 00:03:49.850 --> 00:03:53.100 and const for the birth year, okay? 66 00:03:53.100 --> 00:03:54.790 That makes sense? 67 00:03:54.790 --> 00:03:56.940 Now the fact that variables created 68 00:03:56.940 --> 00:03:59.840 with const are immutable also means 69 00:03:59.840 --> 00:04:03.720 that we cannot declare empty const variables. 70 00:04:03.720 --> 00:04:07.163 For example, this is not legal. 71 00:04:08.390 --> 00:04:11.500 So, let's comment out this one here, again with command 72 00:04:11.500 --> 00:04:15.253 or control slash so that it doesn't get in our way here. 73 00:04:17.270 --> 00:04:19.750 And then reload, and then we get 74 00:04:19.750 --> 00:04:23.760 an error missing initializer in const declaration. 75 00:04:23.760 --> 00:04:26.010 And so this error message means that 76 00:04:26.010 --> 00:04:30.360 when using const, we need basically an initial value. 77 00:04:30.360 --> 00:04:31.973 Alright, so just like here. 78 00:04:33.050 --> 00:04:36.550 Now with these two different ways of declaring variables, 79 00:04:36.550 --> 00:04:39.460 you will probably ask, should I use let, 80 00:04:39.460 --> 00:04:42.990 or should I use const to declare a new variable? 81 00:04:42.990 --> 00:04:46.850 Well, as a best practice for writing clean code, 82 00:04:46.850 --> 00:04:51.350 I always recommend to use const by default and let only 83 00:04:51.350 --> 00:04:54.850 when you are really sure that the variable needs to change 84 00:04:54.850 --> 00:04:57.200 at some point in the future. 85 00:04:57.200 --> 00:04:59.240 For example, when you have a variable 86 00:04:59.240 --> 00:05:03.260 that's really never supposed to change like this birth year, 87 00:05:03.260 --> 00:05:05.580 you should always use const. 88 00:05:05.580 --> 00:05:07.100 Also, if you are sure 89 00:05:07.100 --> 00:05:10.890 that the age variable is never changing inside your program, 90 00:05:10.890 --> 00:05:13.940 you should declare it using const as well. 91 00:05:13.940 --> 00:05:16.650 The reason for this is that it's a good practice 92 00:05:16.650 --> 00:05:19.390 to have as little variable mutations 93 00:05:19.390 --> 00:05:22.040 or variable changes as possible 94 00:05:22.040 --> 00:05:25.650 because changing variables introduces a potential 95 00:05:25.650 --> 00:05:27.090 to create bugs. 96 00:05:27.090 --> 00:05:30.010 So, basically errors in your code. 97 00:05:30.010 --> 00:05:34.560 So again, by default, always just use const and let, 98 00:05:34.560 --> 00:05:37.500 when you're sure that the value of the variable needs 99 00:05:37.500 --> 00:05:40.570 to change at some point in your code. 100 00:05:40.570 --> 00:05:44.270 And so from now on, I will probably use the const way 101 00:05:44.270 --> 00:05:48.090 of declaring variables as much as possible. 102 00:05:48.090 --> 00:05:50.810 Now, there's also a third way in JavaScript 103 00:05:50.810 --> 00:05:54.610 of declaring variables, which is the var keyword, 104 00:05:54.610 --> 00:05:58.910 but this one should actually be completely avoided, okay? 105 00:05:58.910 --> 00:06:01.760 However, we should still know how it works 106 00:06:01.760 --> 00:06:05.400 for legacy reasons because you will see this maybe 107 00:06:05.400 --> 00:06:08.770 in older code basis or some older tutorials 108 00:06:08.770 --> 00:06:10.670 that you'll find online. 109 00:06:10.670 --> 00:06:13.083 So, let's take a look at how it works. 110 00:06:14.330 --> 00:06:19.230 So, var is basically the old way of defining variables, 111 00:06:19.230 --> 00:06:21.140 prior to ES6. 112 00:06:21.140 --> 00:06:24.280 And at first sight, it works actually pretty much 113 00:06:24.280 --> 00:06:25.963 the same as let. 114 00:06:27.180 --> 00:06:32.180 So, we can write var job equals programmer, 115 00:06:34.250 --> 00:06:37.880 and then just like with let, we can change the value of 116 00:06:37.880 --> 00:06:41.893 the variable later, just like this. 117 00:06:43.270 --> 00:06:47.433 Let's take this one out and let's just reload, 118 00:06:48.370 --> 00:06:50.000 and we didn't get any errors, 119 00:06:50.000 --> 00:06:53.040 which means that it's basically allowed 120 00:06:53.040 --> 00:06:58.040 to mutate this job variable when we use var, right? 121 00:06:58.340 --> 00:07:02.460 Now, although it looks like var and let are very similar, 122 00:07:02.460 --> 00:07:05.510 below the surface, they're actually pretty different. 123 00:07:05.510 --> 00:07:07.540 And actually there are also many differences 124 00:07:07.540 --> 00:07:10.550 between led const and var. 125 00:07:10.550 --> 00:07:12.760 So, between all three of them, 126 00:07:12.760 --> 00:07:15.930 and you will learn all about these differences later 127 00:07:15.930 --> 00:07:17.240 in section seven, 128 00:07:17.240 --> 00:07:20.380 because this is actually really important stuff. 129 00:07:20.380 --> 00:07:23.690 And I know that I keep saying that you will learn 130 00:07:23.690 --> 00:07:25.660 some topics later in the course, 131 00:07:25.660 --> 00:07:29.110 but the truth is that learning is really not linear. 132 00:07:29.110 --> 00:07:32.120 It cannot happen in a linear way. 133 00:07:32.120 --> 00:07:35.840 So, you sometimes need more advanced things right now, 134 00:07:35.840 --> 00:07:37.850 even without understanding them. 135 00:07:37.850 --> 00:07:38.870 But that's not a problem 136 00:07:38.870 --> 00:07:41.540 because you will understand them eventually. 137 00:07:41.540 --> 00:07:45.240 So, right now it would really not be useful for you to know 138 00:07:45.240 --> 00:07:47.470 that the let is block scoped 139 00:07:47.470 --> 00:07:50.380 and that VAR is function-scoped, right? 140 00:07:50.380 --> 00:07:52.590 Because you don't even know what a block 141 00:07:52.590 --> 00:07:54.510 or what a function really is. 142 00:07:54.510 --> 00:07:56.930 And so, we will learn about these differences 143 00:07:56.930 --> 00:07:58.750 in section seven. 144 00:07:58.750 --> 00:08:01.810 For now, what matters is that you should basically 145 00:08:01.810 --> 00:08:05.020 never use var, okay? 146 00:08:05.020 --> 00:08:08.560 Now just to finish, some people will probably point out 147 00:08:08.560 --> 00:08:12.820 that we actually don't even have to declare variables at all 148 00:08:12.820 --> 00:08:15.810 because it's actually not mandatory. 149 00:08:15.810 --> 00:08:18.730 We can just write something like this, 150 00:08:18.730 --> 00:08:23.730 last name equals Schmedtmann in my case. 151 00:08:28.760 --> 00:08:32.460 And then we can just use this variable name in this case 152 00:08:32.460 --> 00:08:34.860 by logging it to the console 153 00:08:34.860 --> 00:08:38.980 and JavaScript will happily execute this script, 154 00:08:38.980 --> 00:08:42.720 even without us declaring a variable, right? 155 00:08:42.720 --> 00:08:47.420 We didn't use let nor const nor a var in this case, 156 00:08:47.420 --> 00:08:49.240 but it still worked. 157 00:08:49.240 --> 00:08:52.950 However, this is actually a pretty terrible idea 158 00:08:52.950 --> 00:08:55.130 because this doesn't create a variable 159 00:08:55.130 --> 00:08:57.940 in the current so-called scope. 160 00:08:57.940 --> 00:09:00.840 Instead, JavaScript will create a property 161 00:09:00.840 --> 00:09:02.760 on the global object. 162 00:09:02.760 --> 00:09:05.520 And once again, you will understand a little bit later 163 00:09:05.520 --> 00:09:08.860 what all of this means, but what matters is 164 00:09:08.860 --> 00:09:13.110 that you should always properly declare variables, okay? 165 00:09:13.110 --> 00:09:15.520 Never just write a variable like this 166 00:09:15.520 --> 00:09:17.942 without really declaring it. 167 00:09:17.942 --> 00:09:19.120 Great. 168 00:09:19.120 --> 00:09:21.300 You're doing great progress here, 169 00:09:21.300 --> 00:09:24.590 even though our code doesn't really do anything yet, 170 00:09:24.590 --> 00:09:28.380 and we're not really writing any real applications yet. 171 00:09:28.380 --> 00:09:32.290 Right, but we still need to get some fundamentals down 172 00:09:32.290 --> 00:09:33.710 before we can do that. 173 00:09:33.710 --> 00:09:36.960 And so that's really important, and that's why I'm stressing 174 00:09:36.960 --> 00:09:39.840 all the little details about everything here. 175 00:09:39.840 --> 00:09:42.620 And I hope you see how important that is 176 00:09:42.620 --> 00:09:44.490 for your progress, okay? 177 00:09:44.490 --> 00:09:47.800 And don't worry, we will get to the cool stuff even 178 00:09:47.800 --> 00:09:51.300 a bit later in this first section, okay? 179 00:09:51.300 --> 00:09:52.520 But for now in the next video, 180 00:09:52.520 --> 00:09:55.843 let's talk about operators in JavaScript.