Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,190 --> 00:00:04,260
Let's learn about the switch statement,
2
2
00:00:04,260 --> 00:00:06,190
which is an alternative way
3
3
00:00:06,190 --> 00:00:09,640
of writing a complicated if/else statement,
4
4
00:00:09,640 --> 00:00:12,850
when all we want to do is to compare one value
5
5
00:00:12,850 --> 00:00:15,763
to multiple different options, basically.
6
6
00:00:17,220 --> 00:00:21,290
So in this example, let's say we have a weekday variable
7
7
00:00:21,290 --> 00:00:24,460
and for each day there is a different activity.
8
8
00:00:24,460 --> 00:00:28,143
So basically we're gonna map one activity to each day.
9
9
00:00:29,070 --> 00:00:34,070
So let's say day, and I'm setting it here to Monday.
10
10
00:00:36,000 --> 00:00:37,580
Now, maybe you're wondering
11
11
00:00:37,580 --> 00:00:40,960
why I'm basically hard coding all these variables
12
12
00:00:40,960 --> 00:00:43,930
and how this would work in the real world.
13
13
00:00:43,930 --> 00:00:45,460
Well in the real application,
14
14
00:00:45,460 --> 00:00:48,120
that's used by users in a browser
15
15
00:00:48,120 --> 00:00:51,410
usually most of the data comes from user input.
16
16
00:00:51,410 --> 00:00:55,090
And so then we wouldn't be hard coding all of this stuff.
17
17
00:00:55,090 --> 00:00:58,870
Okay, but right now, well we are just learning how to code
18
18
00:00:58,870 --> 00:01:02,670
and so it's absolutely no problem at all to just hard code,
19
19
00:01:02,670 --> 00:01:05,250
all of these values here, okay?
20
20
00:01:05,250 --> 00:01:08,190
Now anyway, going back to our example here,
21
21
00:01:08,190 --> 00:01:12,180
let's now essentially map one activity to each day.
22
22
00:01:12,180 --> 00:01:13,830
So Monday, Tuesday, Wednesday,
23
23
00:01:13,830 --> 00:01:16,650
Thursday, Friday, Saturday, and Sunday.
24
24
00:01:16,650 --> 00:01:19,870
And for that, we could use an if/else statement
25
25
00:01:19,870 --> 00:01:21,960
with multiple ELS if blocks,
26
26
00:01:21,960 --> 00:01:26,720
but we can also use the easier to use switch statement.
27
27
00:01:26,720 --> 00:01:30,880
So let me just write how that works.
28
28
00:01:30,880 --> 00:01:33,750
And then I'm gonna explain it in a bit more detail.
29
29
00:01:33,750 --> 00:01:36,850
So what we're switching is basically the day.
30
30
00:01:36,850 --> 00:01:40,430
So this is what we're gonna compare to multiple options.
31
31
00:01:40,430 --> 00:01:44,360
Then we need to curly braces to define a block,
32
32
00:01:44,360 --> 00:01:47,220
and then we can define cases.
33
33
00:01:47,220 --> 00:01:52,220
So let's say case, Monday then there's colon
34
34
00:01:53,820 --> 00:01:57,093
and notice how it's a colon and not a semi-colon like this,
35
35
00:01:58,170 --> 00:02:00,020
then another indentation
36
36
00:02:00,020 --> 00:02:03,300
and then here comes to code that we want to do.
37
37
00:02:03,300 --> 00:02:06,700
So as always, we lock something to the console
38
38
00:02:06,700 --> 00:02:09,070
and once more in a real world app,
39
39
00:02:09,070 --> 00:02:10,880
we will of course not be logging stuff
40
40
00:02:10,880 --> 00:02:12,810
to the console all the time.
41
41
00:02:12,810 --> 00:02:15,530
This is once more, just so that we can learn
42
42
00:02:15,530 --> 00:02:18,053
how all this different stuff works.
43
43
00:02:19,520 --> 00:02:23,680
So let's say on Monday I plan my course structure
44
44
00:02:25,760 --> 00:02:29,830
and here we can actually execute multiple lines of code
45
45
00:02:29,830 --> 00:02:32,210
and we don't need curly braces for that.
46
46
00:02:32,210 --> 00:02:35,060
So after the case and the colon,
47
47
00:02:35,060 --> 00:02:38,213
all the lines are then executed, okay?
48
48
00:02:40,550 --> 00:02:43,470
And the syntax of the switch statement
49
49
00:02:43,470 --> 00:02:45,630
is actually a little bit unusual.
50
50
00:02:45,630 --> 00:02:48,520
So it's unlike anything else in JavaScript,
51
51
00:02:48,520 --> 00:02:53,410
but well, that's just how it is implemented, I guess.
52
52
00:02:53,410 --> 00:02:57,670
So anyway, we will execute two console.logs here.
53
53
00:02:57,670 --> 00:03:02,670
So the second one is go to coding, meet up, okay.
54
54
00:03:04,860 --> 00:03:08,780
So basically what this will do is it will compare day
55
55
00:03:08,780 --> 00:03:12,660
to Monday here in a strict equality way.
56
56
00:03:12,660 --> 00:03:17,660
So this here is basically writing day equal Monday.
57
57
00:03:20,090 --> 00:03:22,210
And if this is true,
58
58
00:03:22,210 --> 00:03:26,890
then this code here will be executed, okay.
59
59
00:03:26,890 --> 00:03:31,420
Now after this, we actually need this break statement
60
60
00:03:31,420 --> 00:03:33,593
and you will see why in a second.
61
61
00:03:34,430 --> 00:03:37,540
And now let's add the next case here.
62
62
00:03:37,540 --> 00:03:39,233
So case Tuesday.
63
63
00:03:40,540 --> 00:03:42,150
So basically we're gonna do one
64
64
00:03:42,150 --> 00:03:44,223
for each day of the week here.
65
65
00:03:45,400 --> 00:03:48,993
So let's say prepare theory videos,
66
66
00:03:50,670 --> 00:03:53,250
and then another break.
67
67
00:03:53,250 --> 00:03:56,090
And I wished that preparing theory of videos
68
68
00:03:56,090 --> 00:04:01,090
would only take one day, but it doesn't, okay.
69
69
00:04:01,160 --> 00:04:03,253
So Wednesday is the next one.
70
70
00:04:05,300 --> 00:04:07,820
And actually we can do a nice little trick,
71
71
00:04:07,820 --> 00:04:11,290
which is to run the same code for two different values.
72
72
00:04:11,290 --> 00:04:14,090
So all we have to do is specify this case
73
73
00:04:14,090 --> 00:04:18,223
and then we can specify another case right after it.
74
74
00:04:19,840 --> 00:04:22,483
So let's say Thursday here.
75
75
00:04:23,800 --> 00:04:26,930
And so whatever we write here will then be executed
76
76
00:04:26,930 --> 00:04:29,453
for both Wednesday and Thursday.
77
77
00:04:30,310 --> 00:04:32,750
So without needing any logical operators,
78
78
00:04:32,750 --> 00:04:35,623
as we would need with an if/else statement,
79
79
00:04:37,550 --> 00:04:39,885
and actually we're gonna translate this
80
80
00:04:39,885 --> 00:04:41,700
into an if/else statement after we're done here
81
81
00:04:41,700 --> 00:04:43,713
so that we can analyze the difference.
82
82
00:04:44,650 --> 00:04:46,620
So let's say Wednesday and Thursday,
83
83
00:04:46,620 --> 00:04:49,423
I write code examples.
84
84
00:04:54,960 --> 00:04:59,960
On Friday, I record videos
85
85
00:05:03,880 --> 00:05:05,210
and here's a small bug.
86
86
00:05:05,210 --> 00:05:07,310
So it's a colon, as I was saying here,
87
87
00:05:08,248 --> 00:05:10,970
and then let's do Saturday
88
88
00:05:13,860 --> 00:05:16,383
and also the same for Sunday.
89
89
00:05:20,390 --> 00:05:25,390
So console.log, and then here, enjoy the weekend, okay.
90
90
00:05:29,460 --> 00:05:33,363
And then, oh, I actually am forgetting the breaks here.
91
91
00:05:34,470 --> 00:05:39,340
So break and I will show you in a second,
92
92
00:05:39,340 --> 00:05:42,410
what happens without the break,
93
93
00:05:42,410 --> 00:05:46,380
But anyway, to finish, we can also set a default.
94
94
00:05:46,380 --> 00:05:48,870
And so the default is gonna be executed
95
95
00:05:48,870 --> 00:05:51,630
if all the other cases fail.
96
96
00:05:51,630 --> 00:05:54,437
So default just like this.
97
97
00:05:54,437 --> 00:05:58,513
And then here we can simply say console.log,
98
98
00:06:00,460 --> 00:06:03,810
not a valid day.
99
99
00:06:03,810 --> 00:06:07,840
So basically we're using this for an invalid weekdays.
100
100
00:06:07,840 --> 00:06:10,130
It's basically like an else block
101
101
00:06:10,130 --> 00:06:13,193
at the end of a long if/else statement.
102
102
00:06:14,260 --> 00:06:17,663
Okay, so let's now check out the results.
103
103
00:06:19,120 --> 00:06:24,110
And indeed, we get these two logs here from here.
104
104
00:06:24,110 --> 00:06:26,550
So from line 379 and 380,
105
105
00:06:26,550 --> 00:06:29,920
which are exactly these two lines of code,
106
106
00:06:29,920 --> 00:06:34,443
then if I change it to, let's say Wednesday,
107
107
00:06:35,320 --> 00:06:40,320
Wednesday like that, we get write code example.
108
108
00:06:41,690 --> 00:06:46,690
And on Thursday it showed a yield to the same result
109
109
00:06:48,040 --> 00:06:51,763
because yeah, we did this here for these two days.
110
110
00:06:53,220 --> 00:06:55,890
Now, I guess I wrote something wrong
111
111
00:06:55,890 --> 00:06:59,570
and actually it's here Thursday, right?
112
112
00:06:59,570 --> 00:07:01,510
But so you saw that actually
113
113
00:07:01,510 --> 00:07:04,700
since this option here was nowhere to be found
114
114
00:07:04,700 --> 00:07:07,070
we actually got to the default block,
115
115
00:07:07,070 --> 00:07:08,733
which has done not a valid day,
116
116
00:07:09,920 --> 00:07:12,863
but now we should get the write code examples.
117
117
00:07:14,420 --> 00:07:16,050
Now without the break here
118
118
00:07:16,050 --> 00:07:19,163
and let me comment it out just for demonstration.
119
119
00:07:20,700 --> 00:07:22,540
If we put this back to Monday,
120
120
00:07:22,540 --> 00:07:26,320
then let's see what happens if we load.
121
121
00:07:26,320 --> 00:07:28,510
And so now we get three outputs,
122
122
00:07:28,510 --> 00:07:32,570
we get this one and this one and this one.
123
123
00:07:32,570 --> 00:07:35,700
So that's the one immediately after Tuesday.
124
124
00:07:35,700 --> 00:07:38,270
And this happens because without the break,
125
125
00:07:38,270 --> 00:07:41,590
the code simply continues executing and it stops here
126
126
00:07:41,590 --> 00:07:43,520
because here we have to break.
127
127
00:07:43,520 --> 00:07:45,530
But if I remove this break as well,
128
128
00:07:45,530 --> 00:07:49,073
then it would continue down this structure.
129
129
00:07:50,370 --> 00:07:51,950
And so after each block here,
130
130
00:07:51,950 --> 00:07:54,963
we need to tell it to stop essentially.
131
131
00:07:56,240 --> 00:08:00,310
And so now it's fixed and it works just fine.
132
132
00:08:00,310 --> 00:08:04,260
Okay great, that's how the switch statement works.
133
133
00:08:04,260 --> 00:08:08,750
And remember that this actually does a strict comparison.
134
134
00:08:08,750 --> 00:08:10,530
So it does it like this,
135
135
00:08:10,530 --> 00:08:13,920
here it does if today is equal to Monday,
136
136
00:08:13,920 --> 00:08:15,450
then execute this.
137
137
00:08:15,450 --> 00:08:18,540
If today is equal to Tuesday,
138
138
00:08:18,540 --> 00:08:21,420
execute this and so on and so forth.
139
139
00:08:21,420 --> 00:08:23,840
So this was really designed for equality
140
140
00:08:23,840 --> 00:08:26,550
and not for like comparing stuff.
141
141
00:08:26,550 --> 00:08:30,250
It is technically possible to do that with some workarounds,
142
142
00:08:30,250 --> 00:08:32,763
but that's not the goal of the switch statement.
143
143
00:08:34,000 --> 00:08:36,010
Now just as a fun exercise
144
144
00:08:36,010 --> 00:08:39,900
and to get a better idea of how this actually works
145
145
00:08:39,900 --> 00:08:42,290
and also how the if/else statement works
146
146
00:08:42,290 --> 00:08:45,280
I want to challenge you to write this same logic,
147
147
00:08:45,280 --> 00:08:49,150
but this time as an if/else statement, okay?
148
148
00:08:49,150 --> 00:08:51,970
And to do that, you will have to use a logical operator
149
149
00:08:51,970 --> 00:08:56,410
to translate the case of the Wednesday and Thursday case.
150
150
00:08:56,410 --> 00:08:59,040
So think about what happens.
151
151
00:08:59,040 --> 00:09:02,500
So basically write code examples should be executed
152
152
00:09:02,500 --> 00:09:06,820
if today is Wednesday or Thursday, right?
153
153
00:09:06,820 --> 00:09:09,840
So whenever the date is one of these two,
154
154
00:09:09,840 --> 00:09:13,920
so it's impossible to be and Wednesday and Thursday
155
155
00:09:13,920 --> 00:09:17,660
because, well two days cannot occur at the same time.
156
156
00:09:17,660 --> 00:09:22,220
So keep that in mind and yeah, pause the video here
157
157
00:09:22,220 --> 00:09:24,683
and really try to do this one on your own.
158
158
00:09:26,770 --> 00:09:28,740
Okay, did you do it?
159
159
00:09:28,740 --> 00:09:32,253
Well, let me just quickly show you how it's done.
160
160
00:09:33,200 --> 00:09:37,420
So remember that we're using strict comparison.
161
161
00:09:37,420 --> 00:09:39,420
So the triple equals.
162
162
00:09:39,420 --> 00:09:43,821
So if it's Monday, then do this and I will,
163
163
00:09:43,821 --> 00:09:46,270
after finishing the structure, I will just go ahead
164
164
00:09:46,270 --> 00:09:50,540
and copy the console logs from up there.
165
165
00:09:50,540 --> 00:09:55,123
Then we need an else/if for the case it's Tuesday,
166
166
00:10:00,790 --> 00:10:05,333
then we need another else/if in case the day is Wednesday
167
167
00:10:08,110 --> 00:10:11,120
or if the day is Thursday
168
168
00:10:15,460 --> 00:10:16,833
and again, the same error.
169
169
00:10:18,080 --> 00:10:19,820
And you see that we're writing quite a lot
170
170
00:10:19,820 --> 00:10:24,480
of repetitive code, especially always the day
171
171
00:10:24,480 --> 00:10:25,830
and then the triple equals.
172
172
00:10:27,370 --> 00:10:29,550
So and that's what the switch statement
173
173
00:10:29,550 --> 00:10:31,680
kind of tries to avoid.
174
174
00:10:31,680 --> 00:10:36,680
So else/if, and then if the day is equal to Friday
175
175
00:10:40,690 --> 00:10:45,690
to this else/if the day is equal to Saturday
176
176
00:10:50,800 --> 00:10:55,757
or the day is equal to Sunday,
177
177
00:10:57,820 --> 00:11:00,200
and finally also the else block
178
178
00:11:01,880 --> 00:11:03,873
in case that we have an invalid date.
179
179
00:11:04,750 --> 00:11:09,370
So let's grab these here and note that in this case,
180
180
00:11:09,370 --> 00:11:11,660
we of course don't need the break
181
181
00:11:11,660 --> 00:11:15,723
because JavaScript will only execute one of these blocks.
182
182
00:11:18,596 --> 00:11:20,907
So Friday and now Tuesday,
183
183
00:11:31,880 --> 00:11:33,493
and finally Monday,
184
184
00:11:34,360 --> 00:11:35,563
these two activities,
185
185
00:11:39,660 --> 00:11:43,430
okay, give it a save and now I'm gonna reload here.
186
186
00:11:43,430 --> 00:11:46,670
And so now we should expect the same result here,
187
187
00:11:46,670 --> 00:11:50,130
but twice once coming from the switch statement
188
188
00:11:50,130 --> 00:11:54,593
and once from this big if/else block.
189
189
00:11:55,730 --> 00:11:57,900
And indeed it works just the same.
190
190
00:11:57,900 --> 00:11:59,493
That's just try another one,
191
191
00:12:01,760 --> 00:12:04,690
say Friday, just to make sure.
192
192
00:12:04,690 --> 00:12:06,890
And yeah, the result is the same.
193
193
00:12:06,890 --> 00:12:08,970
And so this logic here
194
194
00:12:09,890 --> 00:12:13,790
does basically exactly the same as this.
195
195
00:12:13,790 --> 00:12:17,840
We simply wrote it with a different syntax, okay.
196
196
00:12:17,840 --> 00:12:19,050
So with the switch statement,
197
197
00:12:19,050 --> 00:12:21,120
we have to write a little bit more code,
198
198
00:12:21,120 --> 00:12:24,550
but in my opinion, it's also a lot more readable,
199
199
00:12:24,550 --> 00:12:27,530
which means that this one is easier to understand
200
200
00:12:27,530 --> 00:12:29,400
if you just read the code.
201
201
00:12:29,400 --> 00:12:32,600
Here, we have a lot of this repetitive code
202
202
00:12:32,600 --> 00:12:34,700
and all of these curly braces,
203
203
00:12:34,700 --> 00:12:37,530
and it just looks a little bit weirder.
204
204
00:12:37,530 --> 00:12:39,150
At least that's my opinion.
205
205
00:12:39,150 --> 00:12:41,450
But of course, everyone is different.
206
206
00:12:41,450 --> 00:12:42,830
Now the switch statement
207
207
00:12:42,830 --> 00:12:45,840
is actually becoming less and less used,
208
208
00:12:45,840 --> 00:12:47,820
but you should still know about it
209
209
00:12:47,820 --> 00:12:51,630
because there is definitely still a place for it sometimes.
210
210
00:12:51,630 --> 00:12:54,670
And actually in this example, for instance,
211
211
00:12:54,670 --> 00:12:58,430
I would actually prefer to use the switch, okay.
212
212
00:12:58,430 --> 00:13:01,990
But again, that's down to your personal preference
213
213
00:13:01,990 --> 00:13:04,410
and it's good that you start basically developing
214
214
00:13:04,410 --> 00:13:07,883
your own coding style into what you like the most.
18855
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.