Original subtitles

1 1

Let's learn about the switch statement, 2

2

which is an alternative way 3

3

of writing a complicated if/else statement, 4

4

when all we want to do is to compare one value 5

5

to multiple different options, basically. 6

6

So in this example, let's say we have a weekday variable 7

7

and for each day there is a different activity. 8

8

So basically we're gonna map one activity to each day. 9

9

So let's say day, and I'm setting it here to Monday. 10

10

Now, maybe you're wondering 11

11

why I'm basically hard coding all these variables 12

12

and how this would work in the real world. 13

13

Well in the real application, 14

14

that's used by users in a browser 15

15

usually most of the data comes from user input. 16

16

And so then we wouldn't be hard coding all of this stuff. 17

17

Okay, but right now, well we are just learning how to code 18

18

and so it's absolutely no problem at all to just hard code, 19

19

all of these values here, okay? 20

20

Now anyway, going back to our example here, 21

21

let's now essentially map one activity to each day. 22

22

So Monday, Tuesday, Wednesday, 23

23

Thursday, Friday, Saturday, and Sunday. 24

24

And for that, we could use an if/else statement 25

25

with multiple ELS if blocks, 26

26

but we can also use the easier to use switch statement. 27

27

So let me just write how that works. 28

28

And then I'm gonna explain it in a bit more detail. 29

29

So what we're switching is basically the day. 30

30

So this is what we're gonna compare to multiple options. 31

31

Then we need to curly braces to define a block, 32

32

and then we can define cases. 33

33

So let's say case, Monday then there's colon 34

34

and notice how it's a colon and not a semi-colon like this, 35

35

then another indentation 36

36

and then here comes to code that we want to do. 37

37

So as always, we lock something to the console 38

38

and once more in a real world app, 39

39

we will of course not be logging stuff 40

40

to the console all the time. 41

41

This is once more, just so that we can learn 42

42

how all this different stuff works. 43

43

So let's say on Monday I plan my course structure 44

44

and here we can actually execute multiple lines of code 45

45

and we don't need curly braces for that. 46

46

So after the case and the colon, 47

47

all the lines are then executed, okay? 48

48

And the syntax of the switch statement 49

49

is actually a little bit unusual. 50

50

So it's unlike anything else in JavaScript, 51

51

but well, that's just how it is implemented, I guess. 52

52

So anyway, we will execute two console.logs here. 53

53

So the second one is go to coding, meet up, okay. 54

54

So basically what this will do is it will compare day 55

55

to Monday here in a strict equality way. 56

56

So this here is basically writing day equal Monday. 57

57

And if this is true, 58

58

then this code here will be executed, okay. 59

59

Now after this, we actually need this break statement 60

60

and you will see why in a second. 61

61

And now let's add the next case here. 62

62

So case Tuesday. 63

63

So basically we're gonna do one 64

64

for each day of the week here. 65

65

So let's say prepare theory videos, 66

66

and then another break. 67

67

And I wished that preparing theory of videos 68

68

would only take one day, but it doesn't, okay. 69

69

So Wednesday is the next one. 70

70

And actually we can do a nice little trick, 71

71

which is to run the same code for two different values. 72

72

So all we have to do is specify this case 73

73

and then we can specify another case right after it. 74

74

So let's say Thursday here. 75

75

And so whatever we write here will then be executed 76

76

for both Wednesday and Thursday. 77

77

So without needing any logical operators, 78

78

as we would need with an if/else statement, 79

79

and actually we're gonna translate this 80

80

into an if/else statement after we're done here 81

81

so that we can analyze the difference. 82

82

So let's say Wednesday and Thursday, 83

83

I write code examples. 84

84

On Friday, I record videos 85

85

and here's a small bug. 86

86

So it's a colon, as I was saying here, 87

87

and then let's do Saturday 88

88

and also the same for Sunday. 89

89

So console.log, and then here, enjoy the weekend, okay. 90

90

And then, oh, I actually am forgetting the breaks here. 91

91

So break and I will show you in a second, 92

92

what happens without the break, 93

93

But anyway, to finish, we can also set a default. 94

94

And so the default is gonna be executed 95

95

if all the other cases fail. 96

96

So default just like this. 97

97

And then here we can simply say console.log, 98

98

not a valid day. 99

99

So basically we're using this for an invalid weekdays. 100

100

It's basically like an else block 101

101

at the end of a long if/else statement. 102

102

Okay, so let's now check out the results. 103

103

And indeed, we get these two logs here from here. 104

104

So from line 379 and 380, 105

105

which are exactly these two lines of code, 106

106

then if I change it to, let's say Wednesday, 107

107

Wednesday like that, we get write code example. 108

108

And on Thursday it showed a yield to the same result 109

109

because yeah, we did this here for these two days. 110

110

Now, I guess I wrote something wrong 111

111

and actually it's here Thursday, right? 112

112

But so you saw that actually 113

113

since this option here was nowhere to be found 114

114

we actually got to the default block, 115

115

which has done not a valid day, 116

116

but now we should get the write code examples. 117

117

Now without the break here 118

118

and let me comment it out just for demonstration. 119

119

If we put this back to Monday, 120

120

then let's see what happens if we load. 121

121

And so now we get three outputs, 122

122

we get this one and this one and this one. 123

123

So that's the one immediately after Tuesday. 124

124

And this happens because without the break, 125

125

the code simply continues executing and it stops here 126

126

because here we have to break. 127

127

But if I remove this break as well, 128

128

then it would continue down this structure. 129

129

And so after each block here, 130

130

we need to tell it to stop essentially. 131

131

And so now it's fixed and it works just fine. 132

132

Okay great, that's how the switch statement works. 133

133

And remember that this actually does a strict comparison. 134

134

So it does it like this, 135

135

here it does if today is equal to Monday, 136

136

then execute this. 137

137

If today is equal to Tuesday, 138

138

execute this and so on and so forth. 139

139

So this was really designed for equality 140

140

and not for like comparing stuff. 141

141

It is technically possible to do that with some workarounds, 142

142

but that's not the goal of the switch statement. 143

143

Now just as a fun exercise 144

144

and to get a better idea of how this actually works 145

145

and also how the if/else statement works 146

146

I want to challenge you to write this same logic, 147

147

but this time as an if/else statement, okay? 148

148

And to do that, you will have to use a logical operator 149

149

to translate the case of the Wednesday and Thursday case. 150

150

So think about what happens. 151

151

So basically write code examples should be executed 152

152

if today is Wednesday or Thursday, right? 153

153

So whenever the date is one of these two, 154

154

so it's impossible to be and Wednesday and Thursday 155

155

because, well two days cannot occur at the same time. 156

156

So keep that in mind and yeah, pause the video here 157

157

and really try to do this one on your own. 158

158

Okay, did you do it? 159

159

Well, let me just quickly show you how it's done. 160

160

So remember that we're using strict comparison. 161

161

So the triple equals. 162

162

So if it's Monday, then do this and I will, 163

163

after finishing the structure, I will just go ahead 164

164

and copy the console logs from up there. 165

165

Then we need an else/if for the case it's Tuesday, 166

166

then we need another else/if in case the day is Wednesday 167

167

or if the day is Thursday 168

168

and again, the same error. 169

169

And you see that we're writing quite a lot 170

170

of repetitive code, especially always the day 171

171

and then the triple equals. 172

172

So and that's what the switch statement 173

173

kind of tries to avoid. 174

174

So else/if, and then if the day is equal to Friday 175

175

to this else/if the day is equal to Saturday 176

176

or the day is equal to Sunday, 177

177

and finally also the else block 178

178

in case that we have an invalid date. 179

179

So let's grab these here and note that in this case, 180

180

we of course don't need the break 181

181

because JavaScript will only execute one of these blocks. 182

182

So Friday and now Tuesday, 183

183

and finally Monday, 184

184

these two activities, 185

185

okay, give it a save and now I'm gonna reload here. 186

186

And so now we should expect the same result here, 187

187

but twice once coming from the switch statement 188

188

and once from this big if/else block. 189

189

And indeed it works just the same. 190

190

That's just try another one, 191

191

say Friday, just to make sure. 192

192

And yeah, the result is the same. 193

193

And so this logic here 194

194

does basically exactly the same as this. 195

195

We simply wrote it with a different syntax, okay. 196

196

So with the switch statement, 197

197

we have to write a little bit more code, 198

198

but in my opinion, it's also a lot more readable, 199

199

which means that this one is easier to understand 200

200

if you just read the code. 201

201

Here, we have a lot of this repetitive code 202

202

and all of these curly braces, 203

203

and it just looks a little bit weirder. 204

204

At least that's my opinion. 205

205

But of course, everyone is different. 206

206

Now the switch statement 207

207

is actually becoming less and less used, 208

208

but you should still know about it 209

209

because there is definitely still a place for it sometimes. 210

210

And actually in this example, for instance, 211

211

I would actually prefer to use the switch, okay. 212

212

But again, that's down to your personal preference 213

213

and it's good that you start basically developing 214

214

your own coding style into what you like the most.