Original subtitles

1 1

Let's go back to two logical operators 2

2

that we already used before, 3

3

but we didn't use their full potential yet. 4

4

And I'm talking about the AND operator 5

5

and the OR operator, 6

6

and how we can use them 7

7

for something called short circuiting. 8

8

So up until this point, 9

9

we have used logical operators 10

10

only to combine Boolean values. 11

11

But the truth is that we can do a lot more 12

12

with the AND and OR operators. 13

13

So let's start with the OR operator here. 14

14

And so let me log, three, 15

15

or Jonas. 16

16

So that's something that we didn't do before, 17

17

which is to use basically non Boolean values here 18

18

as the operands, okay? 19

19

So let's see what the result of this is gonna be, 20

20

and for some reason I have to reload here, 21

21

and you see that the result is three. 22

22

And so that means that the results 23

23

of the OR operator doesn't always 24

24

have to be a Boolean. 25

25

And so that's something that I didn't show you before. 26

26

So there are three properties 27

27

that I didn't tell you before about logical operators. 28

28

So first, they can use any data type. 29

29

They can return any data type 30

30

and they do something 31

31

called short circuiting, 32

32

or as we also call it short circuit evaluation. 33

33

So in fact, here we used two values 34

34

that are not Booleans, okay? 35

35

And it then returned a value 36

36

that was not a Boolean. 37

37

And now about short circuiting, 38

38

in the case of the OR operator, 39

39

short circuiting means that if the first value 40

40

is a truthy value, 41

41

it will immediately return that first value. 42

42

So that's exactly what we see here 43

43

with the three which is a truthy value. 44

44

So again, if the first operand is truthy here 45

45

in the OR operator, 46

46

then the other operand will not even be evaluated. 47

47

So JavaScript will not even take a look at it. 48

48

And so that's what we mean with short circuiting. 49

49

And now let's do some more, 50

50

let's use the empty string 51

51

or Jonas now. 52

52

Then let's say, true or zero, 53

53

and then let's say undefined or null. 54

54

And now before taking a look at the result, 55

55

try to take a guess of what the results 56

56

of these three operations here will be. 57

57

So did you do that? 58

58

So let's see. 59

59

So the first result of this one here is Jonas. 60

60

And so that's because this here is a falsy value. 61

61

And so then, the second operand 62

62

will actually also be evaluated, and that's Jonas 63

63

and it will then be returned. 64

64

And so here we see again that the result 65

65

of the OR operator 66

66

doesn't have to be a Boolean. 67

67

It will simply return the truthy value here. 68

68

Next up we have true or zero. 69

69

And so this first value here is truthy, 70

70

and in fact, it's even true, 71

71

and so therefore that will simply be the result 72

72

of the operator. 73

73

And so that's what we see here. 74

74

And then, here we have undefined or null, 75

75

and as you already know, undefined is a falsy value, 76

76

and so we then go to the second operand, 77

77

so there is no short-circuiting, 78

78

and so that's then the one that's gonna be returned. 79

79

So here we see null, 80

80

and that happens even though null 81

81

is also a falsy value. 82

82

And let's actually now generalize this 83

83

to more operators. 84

84

So I can give you basically the general rule 85

85

of how this operator works, 86

86

no matter with how many values. 87

87

So let's say undefined or zero 88

88

or empty string, 89

89

or hello, 90

90

or 23, 91

91

or null. 92

92

So what do you think that the result of this one will be? 93

93

And it is hello. 94

94

And that's essentially because hello here, 95

95

is the first truthy value 96

96

in this chain of OR operations. 97

97

So we start with this one, 98

98

so undefined is falsy. 99

99

And so then we go to the next one, which is also falsy. 100

100

And so then to the next one, which is also falsy, 101

101

and then we get hello 102

102

and hello is truthy 103

103

and so therefore it will short circuit the entire evaluation 104

104

and it will be the returned value, okay? 105

105

And if we think about this, 106

106

then it actually makes sense. 107

107

Because remember, in the OR operation, 108

108

the result is true, 109

109

if at least one operand is true, right? 110

110

So if the first operand is already true, 111

111

for example, as it happens here, 112

112

then JavaScript doesn't even have to look 113

113

at the other values because the result of the expression 114

114

will already be true anyway. 115

115

And so it will short circuit and then simply return 116

116

that first result. 117

117

And now let's see a more practical application of this. 118

118

So let's say that there might be a property 119

119

on the restaurant object with the number of guests. 120

120

So something like this: 121

121

Restaurant dot num guests, 122

122

but again, we don't know if it exists. 123

123

However, we want to basically define a variable 124

124

based on this number of guests. 125

125

And we want to set a default value 126

126

if this doesn't exist. 127

127

So basically, what we want to do is this. 128

128

So guests, I'm gonna call it one here, 129

129

and so what we want to do is this, 130

130

we want to check if it exists, 131

131

and then the result should be 132

132

actually restaurant dot num guests, 133

133

but if it doesn't exist, 134

134

then we want to set a default value of 10. 135

135

So let's log guests one to the console, 136

136

and so you see that now it is 10. 137

137

And so that's because restaurant dot num guests 138

138

doesn't exist, so this is undefined, 139

139

and so therefore 10 will be the result 140

140

of this turnery operator, okay? 141

141

But now if we do set the property 142

142

like this, 143

143

for example, to 23, 144

144

then guests one is gonna be 23. 145

145

So, but instead of doing this, 146

146

we can take advantage of short circuiting 147

147

and the OR operator. 148

148

So let's again write restaurant dot num guests, 149

149

and then simply or 10. 150

150

So let's analyze why this works. 151

151

And first actually store this into a variable. 152

152

So guests two 153

153

equals this 154

154

and then console log guests two. 155

155

So let's take a look at why this works 156

156

and starting again with disabling this. 157

157

And so right now restaurants dot number of guests 158

158

is undefined. 159

159

So it's a falsy value, 160

160

and as we already know, 161

161

then the second value here 162

162

will be the result of the OR operator. 163

163

And so, that's basically our default value of 10. 164

164

So let's take a look and indeed we get 10 here. 165

165

But now if we put it back on, 166

166

then restaurant dot number of guests is now 23, 167

167

which is a truthy value, 168

168

and therefore the OR operator short circuits 169

169

and it will become the return value, 170

170

or let's say the result of the operation. 171

171

And so now indeed, we get 23. 172

172

And so this is a way easier method 173

173

of setting default values 174

174

than having to deal with this turnery operator 175

175

or even worse an if else statement, okay? 176

176

So that is short-circuiting with the AND operator, 177

177

but we can also do the same with the OR operator, 178

178

but the AND operator also has short circuiting. 179

179

So let's take a look 180

180

and it will start by log something to the console here, 181

181

like a string to separate, 182

182

so that we don't get confused by the results 183

183

and the console then. 184

184

Oh, but before we talk about the AND operator here, 185

185

there's actually one more thing 186

186

that I need to tell you here, 187

187

which is that both of these solutions here, 188

188

this and this will not work 189

189

when the number of guests is zero. 190

190

So let's see what happens. 191

191

And so now they're both 10. 192

192

And that's not the result that we want, 193

193

but given what we already know, it makes sense 194

194

because this is now zero, 195

195

so it's a falsy value, 196

196

and therefore the second one here will be the result 197

197

of the operation and therefore assigned to guests two. 198

198

However, zero is the real number of guests. 199

199

And so that's the value that we actually 200

200

would guests two to have. 201

201

But instead it's set the default value of 10. 202

202

So that's obviously not what we want 203

203

and we will explore a great solution to this problem 204

204

actually in the next lecture. 205

205

But now, let's talk about the AND operator. 206

206

And basically when it comes to short circuit evaluation, 207

207

the AND operator works in the exact opposite way 208

208

of the OR operator. 209

209

So let's see. 210

210

Zero and Jonas. 211

211

And now the result of this is zero. 212

212

And so what this means is that 213

213

the AND operator short circuits, 214

214

when the first value is falsy. 215

215

And then immediately returns that falsy value 216

216

without even evaluating the second operand. 217

217

So again, that's exactly the opposite 218

218

of what happens with the OR operator, 219

219

which short circuits when the first operator is true. 220

220

So let's now set it to a true value here, 221

221

or actually a truthy value. 222

222

And then at this case, Jonas is actually returned. 223

223

So when it is truthy, it means that the evaluation continues 224

224

and then simply the last value is returned. 225

225

And once again, this makes sense if we think about it. 226

226

So the AND operator is only true 227

227

if all the operands are true. 228

228

And so, if the first one here is false, 229

229

then it means that the entire result of the AND operation 230

230

will already be false anyway. 231

231

And so there is no need to even look 232

232

at any of the other operands. 233

233

So I think that's a good way to memorize 234

234

how both of them work. 235

235

Anyway, let's again generalize. 236

236

Add this to multiple operands here 237

237

and 23, 238

238

and null, 239

239

and Jonas, 240

240

and so what do you think this time the result will be? 241

241

Well, let's see. 242

242

And it is indeed null. 243

243

And to understand why let's apply the same logic as before. 244

244

So this is a truthy value, 245

245

and therefore the evaluation continues, 246

246

23 is also truthy, 247

247

but then null is a falsy value 248

248

and therefore evaluation no longer needs to continue 249

249

because at this point, the whole result 250

250

of the end operation is gonna be false anyway. 251

251

And then as a result, 252

252

this is then simply the value that's gonna be returned 253

253

and it's short circuits the rest of the evaluation. 254

254

So it will not even take a look at Jonas here. 255

255

Alright. 256

256

And so now let's see another practical example. 257

257

So, let's say 258

258

if restaurant dot order, order pizza. 259

259

So basically we're checking if this method exists 260

260

and then if it does exist, 261

261

we want to call it. 262

262

So restaurant dot order pizza, 263

263

let's say with mushrooms 264

264

and spinach. 265

265

So many times we can use the AND operator 266

266

to actually avoid an if statement like this one, 267

267

where all we want to do is to check 268

268

if a certain property or value actually exists. 269

269

Okay, so in this case here, 270

270

what we're doing is to basically pretending 271

271

that we don't know if order pizza exists. 272

272

And so we first check if it exists 273

273

and only then we execute it. 274

274

And so this now gives us mushrooms and spinach, 275

275

but with the knowledge that we gained 276

276

about the AND operator, 277

277

we can do this in a simpler way. 278

278

So we can say restaurant dot order pizza, 279

279

and then basically if restaurant dot order pizza 280

280

does not exist, so it's undefined, 281

281

it will then short circuit the evaluation 282

282

and nothing else will happen. 283

283

And so that's essentially exactly the same 284

284

as this if block here is doing. 285

285

All right, but if it does exist. 286

286

So if it's a truthy value, 287

287

then the second part here will be evaluated. 288

288

And so here in this second operand, 289

289

we can then call the function. 290

290

Okay. 291

291

And it's perfectly fine to use this operands, 292

292

the second operand` here to call a function. 293

293

We can put anything here. 294

294

It doesn't just have to be a single value. 295

295

Now I'm not saying that you should go ahead 296

296

and replace all your if statements 297

297

with the AND or the OR operators, 298

298

so please definitely don't do that 299

299

because it's gonna make your code very hard 300

300

to read in the future. 301

301

But anyway, let's now summarize. 302

302

So the OR operator will return the first truthy value 303

303

of all the operands, 304

304

or simply the last value if all of them are falsy. 305

305

So that's what happened here, right? 306

306

On the other hand, 307

307

the AND operator will return the first falsy value 308

308

or the last value if all of them are truthy. 309

309

And as for practical applications, 310

310

we can use the OR operator to set default values, 311

311

and we can use the AND operator 312

312

to execute code in the second operand 313

313

if the first one is true. 314

314

So play around some more with this maybe, 315

315

and then let's just move on to the next video 316

316

where we will solve this problem that we had here 317

317

with this OR operator 318

318

and this zero.