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.