Original subtitles

1 1

Let's learn about 2

2

an even newer feature of objects and also of arrays 3

3

which is called optional chaining. 4

4

And this one is really amazing. 5

5

So, let's say that we wanted to get the opening hours 6

6

of our restaurant for Monday. 7

7

So let's quickly check that. 8

8

So restaurant.openingHours, 9

9

and then since we are checking for Monday, 10

10

let's try .mon. 11

11

So which could stand for Monday. 12

12

Now, actually this property doesn't exist. 13

13

So you see that this is undefined, right? 14

14

But let's pretend that we do not know 15

15

whether this restaurant opens on Monday or not. 16

16

And that could be the case. 17

17

For example if this data came from a real web service. 18

18

So a web API. 19

19

And in their service there could be multiple restaurants 20

20

and not all of them would open on Monday. 21

21

And so we had no way of knowing 22

22

if this particular restaurant 23

23

would open on Monday or not. 24

24

But now let's go even further 25

25

because we actually want to know exactly the hour 26

26

on which the restaurant opens on Monday. 27

27

So let's see what we get. 28

28

And now we do actually get an error 29

29

because the results of this was undefined. 30

30

And then undefined.open is really an error. 31

31

So that's the error that we get here. 32

32

So in order to avoid this error, 33

33

we would first have to check if this here actually exists. 34

34

So we could do something like this. 35

35

If this property exists, basically then do this. 36

36

Or we could also use a logical operator 37

37

as we already learned 38

38

but this here is a bit more readable, all right? 39

39

So if we did the same for 40

40

let's say Friday, 41

41

then we already know that Friday exists. 42

42

And so this would then work 43

43

and it would be 11. 44

44

But let's focus here on Monday, 45

45

which is the day that doesn't exist. 46

46

And so now at least we got rid of our error here. 47

47

So it's not a big deal to having to add this logic here 48

48

but it does make our code a little bit more unreadable 49

49

and more messy. 50

50

However, this is checking just for one property. 51

51

So just for Monday. 52

52

But now imagine that opening hours here 53

53

would also be optional. 54

54

Or in other words that maybe the restaurant object 55

55

can also not have opening hours. 56

56

So, in this case, we would have to check for both, right? 57

57

So we would have to do 58

58

if restaurant.openingHours exists 59

59

and if restaurants.openingHours.mon exists 60

60

while only then unlock the opening hours to the console. 61

61

And this can get out of hand pretty quickly 62

62

when we have deeply nested objects 63

63

with lots of optional properties. 64

64

And sometimes that happens in the real world. 65

65

And so therefore ES2020 66

66

introduced a great solution for this, 67

67

which is a feature called optional chaining. 68

68

And with optional chaining, 69

69

if a certain property does not exist, 70

70

then undefined is returned immediately. 71

71

And so that will then avoid 72

72

that kind of error that we saw earlier. 73

73

And this is how it works. 74

74

So let's recreate it now with optional chaining. 75

75

(keyboard clunking) 76

76

So now we can say restaurant.openingHours.mon 77

77

and now here is the optional chaining operator. 78

78

So instead of just a dot, 79

79

we use question mark, dot and then open. 80

80

Okay? So here is how optional chaining works. 81

81

So only if the property 82

82

that is before this question mark here. 83

83

So only if Monday exists, 84

84

then this open property will be read from there. 85

85

All right? 86

86

But if not, then immediately undefined will be returned. 87

87

And exists here actually means the nullish concept 88

88

that we already talked before. 89

89

So, a property exists if it's not null and not undefined. 90

90

Okay? 91

91

So if it's zero or the empty string, 92

92

then it still exists of course. 93

93

So if we try this now, then we get undefined. 94

94

So that's exactly what I was saying. 95

95

Let's just, again, recreate it here 96

96

without the optional chaining. 97

97

Just to see the error again. 98

98

And so here we would indeed get the error. 99

99

Again because all of this here is undefined, 100

100

and then we read open here from undefined, 101

101

which doesn't work. 102

102

But here this next operation of trying to read open 103

103

only happens if all of this here actually exists. 104

104

So if it's not null and not undefined. 105

105

But if it is undefined or null, 106

106

then the result will be undefined immediately. 107

107

So let's take this out again. 108

108

And so that is why we get undefined right now. 109

109

And of course we can have multiple optional chainings. 110

110

So let's basically recreate what we have here. 111

111

So in this example, 112

112

so here we are testing for both opening hours 113

113

and for Monday. 114

114

So these are essentially the two optional properties 115

115

that we do not know beforehand if they exist. 116

116

So Monday is optional, 117

117

and that's why we have the question mark here basically, 118

118

asking if it exists 119

119

and now we can do the same for opening hours. 120

120

And now if restaurant.openingHours does not even exist, 121

121

well, then the Monday property will not even be read 122

122

and so therefore we don't get that error. 123

123

All right? 124

124

And so this makes it really easy 125

125

to prevent all kinds of bugs 126

126

that sometimes we might not even expect. 127

127

All right? 128

128

So, it also takes away all this work of doing this 129

129

simply by adding this simple question mark in there. 130

130

But now let's see a little bit more real world example. 131

131

And for that, let me grab this 132

132

weekdays array and put it here. 133

133

(keyboard clunking) 134

134

Let's just call it days here 135

135

so it's not the same variable. 136

136

And now what I want to do is to loop over this array 137

137

and then lock to the console, 138

138

whether the restaurant is open or closed 139

139

on each of the days. 140

140

(keyboard clunking) 141

141

So, that's a good application 142

142

of optional chaining right there. 143

143

(keyboard clunking) 144

144

So let's start just by logging here today 145

145

just so that you can remember how this loop works. 146

146

And so indeed now we can do some code 147

147

with each of these days here. 148

148

So, let's now essentially do the same as we did up here. 149

149

So restaurant.openingHours 150

150

but now we cannot do this, right? 151

151

Because this is not an actual property name of the object. 152

152

And so remember if we want to use a variable name 153

153

as the property name, 154

154

basically, we need to use the brackets notation. 155

155

So we learned about this way back 156

156

in the fundamental section. 157

157

And so make sure to remember that. 158

158

Okay? 159

159

So, basically this would be the same in the first day 160

160

.mon and then .tue and so on and so forth. 161

161

But the day here is coming dynamically from this array. 162

162

Okay? 163

163

But optional chaining of course also works with that. 164

164

And so now we can ask if open exists, basically. 165

165

And now let's save this to a variable 166

166

and then let's log to the console. 167

167

And this is not yet complete 168

168

but for now, let's see what's gonna happen. 169

169

So, on day and then whatever is the current day 170

170

we open at, 171

171

and in here we use the open variable that we just created. 172

172

Let's get rid of this console.log here. 173

173

Okay. 174

174

So, we get on Monday we open at undefined, 175

175

undefined, undefined, 176

176

and then indeed on Thursday, Friday and Saturday, 177

177

we are open. 178

178

And so then we get the opening hour 179

179

that is actually also in the object. 180

180

Let's just make sure. 181

181

So this one is open 12, 11 and zero. 182

182

So essentially it's open 24 hours. 183

183

It opens at 12 and closes at 24. 184

184

So at midnight again. 185

185

All right? So that's working. 186

186

But now we don't want this undefined here. Okay? 187

187

And so just like before 188

188

let's set a default value. 189

189

So let's use or, 190

190

and so as a default, we want to say closed. 191

191

So we are open at closed. 192

192

So that doesn't make a lot of sense. 193

193

So we could create a better sentence there 194

194

but let's leave it like this. 195

195

But maybe you're noticing that now we have a problem 196

196

which is that on Saturday it says that we are closed. 197

197

Although actually we open 198

198

or the restaurant opens. 199

199

So here on Saturday which is this one, 200

200

indeed, this property exists. 201

201

So there is a property called Saturday. 202

202

And so we have a problem here. 203

203

And the problem is that the restaurant opens at zero. 204

204

And so here we have the same problem as before 205

205

where zero is a falsy value. 206

206

And so therefore it will then trigger this second part 207

207

of the operator. 208

208

But we also saw the solution to this, 209

209

which is to use the nullish coalescing operator. 210

210

And so that's what we do now. 211

211

And now we get back to open at zero. 212

212

Great. 213

213

So, this is an amazing use case 214

214

of the optional chaining operator 215

215

and the nullish coalescing operator working together. 216

216

And in fact, they were introduced into the language 217

217

at the same time in ES2020 218

218

because they were really designed 219

219

to work well with each other. 220

220

So again, both of them rely on this new concept of nullish 221

221

and so nullish values are null and undefined. 222

222

And that's it. 223

223

And so that's true both for this nullish coalescing operator 224

224

and also for optional chaining. 225

225

Okay. Great. 226

226

Now that you understand how it works, 227

227

let's move to the next topic, which is on methods. 228

228

So optional chaining does indeed also work 229

229

for calling methods. 230

230

So, essentially we can check 231

231

if a method actually exists before we call it. 232

232

So, restaurant.order, 233

233

and now we can check if it exists. 234

234

So we use the question mark, dot, and if it does exist, 235

235

then we can call it. 236

236

So let's just pass zero and one here. 237

237

And then we should always use together 238

238

the nullish coalescing operator. 239

239

And so, method does not exist. 240

240

So let's run this 241

241

but in this case, the method does actually exist. 242

242

And so here we get the expected result. 243

243

When we try to call a method that doesn't exist. 244

244

So let's say orderRisotto, 245

245

and so we never wrote a method for that. 246

246

And so, let's see. 247

247

And yeah, now we get method does not exist. 248

248

And so just like before 249

249

this optional chaining operator 250

250

will check if orderRisotto actually exists. 251

251

And if it doesn't, 252

252

well then it will immediately return undefined. 253

253

And so all of this then returns undefined. 254

254

And so here in the nullish coalescing operator, 255

255

we immediately go to that second operant. 256

256

So that's this one here. 257

257

And yeah, then that's the result of this whole operation. 258

258

So of course, if we hadn't this, 259

259

then we were trying to attempt 260

260

something that is not a function. 261

261

So really useful on methods as well. 262

262

And finally, optional chaining even works on arrays. 263

263

(keyboard clunking) 264

264

So basically we can use it to check if an array is empty. 265

265

So let's simply create a users array 266

266

in which we can put a couple of user objects. 267

267

So name Jonas 268

268

and email, 269

269

hello@Jonas.io. 270

270

(murmurs) 271

271

This is just for demonstration. 272

272

So let's just put one object here 273

273

and now to get the name of the first element of this array, 274

274

we can do this. 275

275

We can write users, element number zero 276

276

and only if it exists. 277

277

So, optional chaining only then take its name. 278

278

Okay? 279

279

And otherwise we want to log user array empty. 280

280

So let's see. 281

281

And indeed we get Jonas. 282

282

And so again, this optional chaining here 283

283

tests if the value on the left does exist. 284

284

So users zero. 285

285

Okay? 286

286

So if it was empty, 287

287

so users, 288

288

so like this, 289

289

then we get user array empty. 290

290

And without optional chaining, 291

291

we would have to write something like this. 292

292

So if users.length 293

293

greater equals zero 294

294

then console.log 295

295

and this here 296

296

and else console.log, 297

297

user array empty. 298

298

All right? 299

299

And so that looks like a lot more work 300

300

than what we just have up there. 301

301

So, here we don't need to do any check 302

302

so that's a lot better. 303

303

And so now in both cases, we get Jonas. 304

304

So, get used to this optional chaining operator, 305

305

which almost always, 306

306

we use them together with the nullish coalescing operator 307

307

so that we can actually do something 308

308

in case we don't get a result from the object 309

309

or from the array that's here on the left hand side. 310

310

All right. 311

311

And with that being said, I see you in the next video.