WEBVTT 1 00:00:01.190 --> 00:00:04.260 Let's learn about the switch statement, 2 00:00:04.260 --> 00:00:06.190 which is an alternative way 3 00:00:06.190 --> 00:00:09.640 of writing a complicated if/else statement, 4 00:00:09.640 --> 00:00:12.850 when all we want to do is to compare one value 5 00:00:12.850 --> 00:00:15.763 to multiple different options, basically. 6 00:00:17.220 --> 00:00:21.290 So in this example, let's say we have a weekday variable 7 00:00:21.290 --> 00:00:24.460 and for each day there is a different activity. 8 00:00:24.460 --> 00:00:28.143 So basically we're gonna map one activity to each day. 9 00:00:29.070 --> 00:00:34.070 So let's say day, and I'm setting it here to Monday. 10 00:00:36.000 --> 00:00:37.580 Now, maybe you're wondering 11 00:00:37.580 --> 00:00:40.960 why I'm basically hard coding all these variables 12 00:00:40.960 --> 00:00:43.930 and how this would work in the real world. 13 00:00:43.930 --> 00:00:45.460 Well in the real application, 14 00:00:45.460 --> 00:00:48.120 that's used by users in a browser 15 00:00:48.120 --> 00:00:51.410 usually most of the data comes from user input. 16 00:00:51.410 --> 00:00:55.090 And so then we wouldn't be hard coding all of this stuff. 17 00:00:55.090 --> 00:00:58.870 Okay, but right now, well we are just learning how to code 18 00:00:58.870 --> 00:01:02.670 and so it's absolutely no problem at all to just hard code, 19 00:01:02.670 --> 00:01:05.250 all of these values here, okay? 20 00:01:05.250 --> 00:01:08.190 Now anyway, going back to our example here, 21 00:01:08.190 --> 00:01:12.180 let's now essentially map one activity to each day. 22 00:01:12.180 --> 00:01:13.830 So Monday, Tuesday, Wednesday, 23 00:01:13.830 --> 00:01:16.650 Thursday, Friday, Saturday, and Sunday. 24 00:01:16.650 --> 00:01:19.870 And for that, we could use an if/else statement 25 00:01:19.870 --> 00:01:21.960 with multiple ELS if blocks, 26 00:01:21.960 --> 00:01:26.720 but we can also use the easier to use switch statement. 27 00:01:26.720 --> 00:01:30.880 So let me just write how that works. 28 00:01:30.880 --> 00:01:33.750 And then I'm gonna explain it in a bit more detail. 29 00:01:33.750 --> 00:01:36.850 So what we're switching is basically the day. 30 00:01:36.850 --> 00:01:40.430 So this is what we're gonna compare to multiple options. 31 00:01:40.430 --> 00:01:44.360 Then we need to curly braces to define a block, 32 00:01:44.360 --> 00:01:47.220 and then we can define cases. 33 00:01:47.220 --> 00:01:52.220 So let's say case, Monday then there's colon 34 00:01:53.820 --> 00:01:57.093 and notice how it's a colon and not a semi-colon like this, 35 00:01:58.170 --> 00:02:00.020 then another indentation 36 00:02:00.020 --> 00:02:03.300 and then here comes to code that we want to do. 37 00:02:03.300 --> 00:02:06.700 So as always, we lock something to the console 38 00:02:06.700 --> 00:02:09.070 and once more in a real world app, 39 00:02:09.070 --> 00:02:10.880 we will of course not be logging stuff 40 00:02:10.880 --> 00:02:12.810 to the console all the time. 41 00:02:12.810 --> 00:02:15.530 This is once more, just so that we can learn 42 00:02:15.530 --> 00:02:18.053 how all this different stuff works. 43 00:02:19.520 --> 00:02:23.680 So let's say on Monday I plan my course structure 44 00:02:25.760 --> 00:02:29.830 and here we can actually execute multiple lines of code 45 00:02:29.830 --> 00:02:32.210 and we don't need curly braces for that. 46 00:02:32.210 --> 00:02:35.060 So after the case and the colon, 47 00:02:35.060 --> 00:02:38.213 all the lines are then executed, okay? 48 00:02:40.550 --> 00:02:43.470 And the syntax of the switch statement 49 00:02:43.470 --> 00:02:45.630 is actually a little bit unusual. 50 00:02:45.630 --> 00:02:48.520 So it's unlike anything else in JavaScript, 51 00:02:48.520 --> 00:02:53.410 but well, that's just how it is implemented, I guess. 52 00:02:53.410 --> 00:02:57.670 So anyway, we will execute two console.logs here. 53 00:02:57.670 --> 00:03:02.670 So the second one is go to coding, meet up, okay. 54 00:03:04.860 --> 00:03:08.780 So basically what this will do is it will compare day 55 00:03:08.780 --> 00:03:12.660 to Monday here in a strict equality way. 56 00:03:12.660 --> 00:03:17.660 So this here is basically writing day equal Monday. 57 00:03:20.090 --> 00:03:22.210 And if this is true, 58 00:03:22.210 --> 00:03:26.890 then this code here will be executed, okay. 59 00:03:26.890 --> 00:03:31.420 Now after this, we actually need this break statement 60 00:03:31.420 --> 00:03:33.593 and you will see why in a second. 61 00:03:34.430 --> 00:03:37.540 And now let's add the next case here. 62 00:03:37.540 --> 00:03:39.233 So case Tuesday. 63 00:03:40.540 --> 00:03:42.150 So basically we're gonna do one 64 00:03:42.150 --> 00:03:44.223 for each day of the week here. 65 00:03:45.400 --> 00:03:48.993 So let's say prepare theory videos, 66 00:03:50.670 --> 00:03:53.250 and then another break. 67 00:03:53.250 --> 00:03:56.090 And I wished that preparing theory of videos 68 00:03:56.090 --> 00:04:01.090 would only take one day, but it doesn't, okay. 69 00:04:01.160 --> 00:04:03.253 So Wednesday is the next one. 70 00:04:05.300 --> 00:04:07.820 And actually we can do a nice little trick, 71 00:04:07.820 --> 00:04:11.290 which is to run the same code for two different values. 72 00:04:11.290 --> 00:04:14.090 So all we have to do is specify this case 73 00:04:14.090 --> 00:04:18.223 and then we can specify another case right after it. 74 00:04:19.840 --> 00:04:22.483 So let's say Thursday here. 75 00:04:23.800 --> 00:04:26.930 And so whatever we write here will then be executed 76 00:04:26.930 --> 00:04:29.453 for both Wednesday and Thursday. 77 00:04:30.310 --> 00:04:32.750 So without needing any logical operators, 78 00:04:32.750 --> 00:04:35.623 as we would need with an if/else statement, 79 00:04:37.550 --> 00:04:39.885 and actually we're gonna translate this 80 00:04:39.885 --> 00:04:41.700 into an if/else statement after we're done here 81 00:04:41.700 --> 00:04:43.713 so that we can analyze the difference. 82 00:04:44.650 --> 00:04:46.620 So let's say Wednesday and Thursday, 83 00:04:46.620 --> 00:04:49.423 I write code examples. 84 00:04:54.960 --> 00:04:59.960 On Friday, I record videos 85 00:05:03.880 --> 00:05:05.210 and here's a small bug. 86 00:05:05.210 --> 00:05:07.310 So it's a colon, as I was saying here, 87 00:05:08.248 --> 00:05:10.970 and then let's do Saturday 88 00:05:13.860 --> 00:05:16.383 and also the same for Sunday. 89 00:05:20.390 --> 00:05:25.390 So console.log, and then here, enjoy the weekend, okay. 90 00:05:29.460 --> 00:05:33.363 And then, oh, I actually am forgetting the breaks here. 91 00:05:34.470 --> 00:05:39.340 So break and I will show you in a second, 92 00:05:39.340 --> 00:05:42.410 what happens without the break, 93 00:05:42.410 --> 00:05:46.380 But anyway, to finish, we can also set a default. 94 00:05:46.380 --> 00:05:48.870 And so the default is gonna be executed 95 00:05:48.870 --> 00:05:51.630 if all the other cases fail. 96 00:05:51.630 --> 00:05:54.437 So default just like this. 97 00:05:54.437 --> 00:05:58.513 And then here we can simply say console.log, 98 00:06:00.460 --> 00:06:03.810 not a valid day. 99 00:06:03.810 --> 00:06:07.840 So basically we're using this for an invalid weekdays. 100 00:06:07.840 --> 00:06:10.130 It's basically like an else block 101 00:06:10.130 --> 00:06:13.193 at the end of a long if/else statement. 102 00:06:14.260 --> 00:06:17.663 Okay, so let's now check out the results. 103 00:06:19.120 --> 00:06:24.110 And indeed, we get these two logs here from here. 104 00:06:24.110 --> 00:06:26.550 So from line 379 and 380, 105 00:06:26.550 --> 00:06:29.920 which are exactly these two lines of code, 106 00:06:29.920 --> 00:06:34.443 then if I change it to, let's say Wednesday, 107 00:06:35.320 --> 00:06:40.320 Wednesday like that, we get write code example. 108 00:06:41.690 --> 00:06:46.690 And on Thursday it showed a yield to the same result 109 00:06:48.040 --> 00:06:51.763 because yeah, we did this here for these two days. 110 00:06:53.220 --> 00:06:55.890 Now, I guess I wrote something wrong 111 00:06:55.890 --> 00:06:59.570 and actually it's here Thursday, right? 112 00:06:59.570 --> 00:07:01.510 But so you saw that actually 113 00:07:01.510 --> 00:07:04.700 since this option here was nowhere to be found 114 00:07:04.700 --> 00:07:07.070 we actually got to the default block, 115 00:07:07.070 --> 00:07:08.733 which has done not a valid day, 116 00:07:09.920 --> 00:07:12.863 but now we should get the write code examples. 117 00:07:14.420 --> 00:07:16.050 Now without the break here 118 00:07:16.050 --> 00:07:19.163 and let me comment it out just for demonstration. 119 00:07:20.700 --> 00:07:22.540 If we put this back to Monday, 120 00:07:22.540 --> 00:07:26.320 then let's see what happens if we load. 121 00:07:26.320 --> 00:07:28.510 And so now we get three outputs, 122 00:07:28.510 --> 00:07:32.570 we get this one and this one and this one. 123 00:07:32.570 --> 00:07:35.700 So that's the one immediately after Tuesday. 124 00:07:35.700 --> 00:07:38.270 And this happens because without the break, 125 00:07:38.270 --> 00:07:41.590 the code simply continues executing and it stops here 126 00:07:41.590 --> 00:07:43.520 because here we have to break. 127 00:07:43.520 --> 00:07:45.530 But if I remove this break as well, 128 00:07:45.530 --> 00:07:49.073 then it would continue down this structure. 129 00:07:50.370 --> 00:07:51.950 And so after each block here, 130 00:07:51.950 --> 00:07:54.963 we need to tell it to stop essentially. 131 00:07:56.240 --> 00:08:00.310 And so now it's fixed and it works just fine. 132 00:08:00.310 --> 00:08:04.260 Okay great, that's how the switch statement works. 133 00:08:04.260 --> 00:08:08.750 And remember that this actually does a strict comparison. 134 00:08:08.750 --> 00:08:10.530 So it does it like this, 135 00:08:10.530 --> 00:08:13.920 here it does if today is equal to Monday, 136 00:08:13.920 --> 00:08:15.450 then execute this. 137 00:08:15.450 --> 00:08:18.540 If today is equal to Tuesday, 138 00:08:18.540 --> 00:08:21.420 execute this and so on and so forth. 139 00:08:21.420 --> 00:08:23.840 So this was really designed for equality 140 00:08:23.840 --> 00:08:26.550 and not for like comparing stuff. 141 00:08:26.550 --> 00:08:30.250 It is technically possible to do that with some workarounds, 142 00:08:30.250 --> 00:08:32.763 but that's not the goal of the switch statement. 143 00:08:34.000 --> 00:08:36.010 Now just as a fun exercise 144 00:08:36.010 --> 00:08:39.900 and to get a better idea of how this actually works 145 00:08:39.900 --> 00:08:42.290 and also how the if/else statement works 146 00:08:42.290 --> 00:08:45.280 I want to challenge you to write this same logic, 147 00:08:45.280 --> 00:08:49.150 but this time as an if/else statement, okay? 148 00:08:49.150 --> 00:08:51.970 And to do that, you will have to use a logical operator 149 00:08:51.970 --> 00:08:56.410 to translate the case of the Wednesday and Thursday case. 150 00:08:56.410 --> 00:08:59.040 So think about what happens. 151 00:08:59.040 --> 00:09:02.500 So basically write code examples should be executed 152 00:09:02.500 --> 00:09:06.820 if today is Wednesday or Thursday, right? 153 00:09:06.820 --> 00:09:09.840 So whenever the date is one of these two, 154 00:09:09.840 --> 00:09:13.920 so it's impossible to be and Wednesday and Thursday 155 00:09:13.920 --> 00:09:17.660 because, well two days cannot occur at the same time. 156 00:09:17.660 --> 00:09:22.220 So keep that in mind and yeah, pause the video here 157 00:09:22.220 --> 00:09:24.683 and really try to do this one on your own. 158 00:09:26.770 --> 00:09:28.740 Okay, did you do it? 159 00:09:28.740 --> 00:09:32.253 Well, let me just quickly show you how it's done. 160 00:09:33.200 --> 00:09:37.420 So remember that we're using strict comparison. 161 00:09:37.420 --> 00:09:39.420 So the triple equals. 162 00:09:39.420 --> 00:09:43.821 So if it's Monday, then do this and I will, 163 00:09:43.821 --> 00:09:46.270 after finishing the structure, I will just go ahead 164 00:09:46.270 --> 00:09:50.540 and copy the console logs from up there. 165 00:09:50.540 --> 00:09:55.123 Then we need an else/if for the case it's Tuesday, 166 00:10:00.790 --> 00:10:05.333 then we need another else/if in case the day is Wednesday 167 00:10:08.110 --> 00:10:11.120 or if the day is Thursday 168 00:10:15.460 --> 00:10:16.833 and again, the same error. 169 00:10:18.080 --> 00:10:19.820 And you see that we're writing quite a lot 170 00:10:19.820 --> 00:10:24.480 of repetitive code, especially always the day 171 00:10:24.480 --> 00:10:25.830 and then the triple equals. 172 00:10:27.370 --> 00:10:29.550 So and that's what the switch statement 173 00:10:29.550 --> 00:10:31.680 kind of tries to avoid. 174 00:10:31.680 --> 00:10:36.680 So else/if, and then if the day is equal to Friday 175 00:10:40.690 --> 00:10:45.690 to this else/if the day is equal to Saturday 176 00:10:50.800 --> 00:10:55.757 or the day is equal to Sunday, 177 00:10:57.820 --> 00:11:00.200 and finally also the else block 178 00:11:01.880 --> 00:11:03.873 in case that we have an invalid date. 179 00:11:04.750 --> 00:11:09.370 So let's grab these here and note that in this case, 180 00:11:09.370 --> 00:11:11.660 we of course don't need the break 181 00:11:11.660 --> 00:11:15.723 because JavaScript will only execute one of these blocks. 182 00:11:18.596 --> 00:11:20.907 So Friday and now Tuesday, 183 00:11:31.880 --> 00:11:33.493 and finally Monday, 184 00:11:34.360 --> 00:11:35.563 these two activities, 185 00:11:39.660 --> 00:11:43.430 okay, give it a save and now I'm gonna reload here. 186 00:11:43.430 --> 00:11:46.670 And so now we should expect the same result here, 187 00:11:46.670 --> 00:11:50.130 but twice once coming from the switch statement 188 00:11:50.130 --> 00:11:54.593 and once from this big if/else block. 189 00:11:55.730 --> 00:11:57.900 And indeed it works just the same. 190 00:11:57.900 --> 00:11:59.493 That's just try another one, 191 00:12:01.760 --> 00:12:04.690 say Friday, just to make sure. 192 00:12:04.690 --> 00:12:06.890 And yeah, the result is the same. 193 00:12:06.890 --> 00:12:08.970 And so this logic here 194 00:12:09.890 --> 00:12:13.790 does basically exactly the same as this. 195 00:12:13.790 --> 00:12:17.840 We simply wrote it with a different syntax, okay. 196 00:12:17.840 --> 00:12:19.050 So with the switch statement, 197 00:12:19.050 --> 00:12:21.120 we have to write a little bit more code, 198 00:12:21.120 --> 00:12:24.550 but in my opinion, it's also a lot more readable, 199 00:12:24.550 --> 00:12:27.530 which means that this one is easier to understand 200 00:12:27.530 --> 00:12:29.400 if you just read the code. 201 00:12:29.400 --> 00:12:32.600 Here, we have a lot of this repetitive code 202 00:12:32.600 --> 00:12:34.700 and all of these curly braces, 203 00:12:34.700 --> 00:12:37.530 and it just looks a little bit weirder. 204 00:12:37.530 --> 00:12:39.150 At least that's my opinion. 205 00:12:39.150 --> 00:12:41.450 But of course, everyone is different. 206 00:12:41.450 --> 00:12:42.830 Now the switch statement 207 00:12:42.830 --> 00:12:45.840 is actually becoming less and less used, 208 00:12:45.840 --> 00:12:47.820 but you should still know about it 209 00:12:47.820 --> 00:12:51.630 because there is definitely still a place for it sometimes. 210 00:12:51.630 --> 00:12:54.670 And actually in this example, for instance, 211 00:12:54.670 --> 00:12:58.430 I would actually prefer to use the switch, okay. 212 00:12:58.430 --> 00:13:01.990 But again, that's down to your personal preference 213 00:13:01.990 --> 00:13:04.410 and it's good that you start basically developing 214 00:13:04.410 --> 00:13:07.883 your own coding style into what you like the most.