Original subtitles

1 1

In this video, you're gonna learn 2

2

how to retrieve data from objects 3

3

and also how to change data in objects, 4

4

using both the dot and the bracket notation. 5

5

So let's actually get the object here 6

6

from the previous lecture, 7

7

so that Jonas object. 8

8

And I noticed that we actually 9

9

didn't even take a look at it and a console, 10

10

so let's quickly log it, 11

11

but we're actually not gonna see a big surprise. 12

12

So all it shows us it's really the same object 13

13

that we just wrote in code. 14

14

So it looks like this. 15

15

So essentially just as it is here in the code, 16

16

the only thing that's different is that the properties here 17

17

are ordered alphabetically. 18

18

And so that's what I mean when I said in the last lecture 19

19

that the order of properties does not matter. 20

20

And that's because we simply get the properties 21

21

from the object using the property name itself. 22

22

So that's actually the topic of this video. 23

23

And so let me show you the two ways in which we do that. 24

24

So the first way of getting a property from an object 25

25

is by using the dot notation 26

26

and that is very straight forward. 27

27

So let's log that to console. 28

28

And so let's say that we want to get the last name. 29

29

So all we have to do is to write 30

30

Jonas dot last name and that's it 31

31

you see here is my last name 32

32

coming straight from the Jonas object 33

33

so Jonas dot last name. 34

34

And this dot here is actually an operator 35

35

which will go to this object 36

36

and then retrieve to property 37

37

with the name that we specified here. 38

38

Now we can do the exact same thing 39

39

using the brackets notation. 40

40

So let me show that as well. 41

41

So Jonas, and then we use brackets in a similar way 42

42

in which we retrieve data from an array, 43

43

but here we need to specify a string with the property name. 44

44

So with the key, so let's do my name again, 45

45

or actually a last name. 46

46

And so these results should be exactly the same here. 47

47

Now, the big difference between these two here 48

48

is that in the bracket notation here, 49

49

we can actually put any expression that we'd like, 50

50

so we don't have to explicitly write the string here, 51

51

but instead we can compute it from some operation 52

52

because remember that an operation 53

53

is basically an expression. 54

54

So something that produces a value 55

55

and so we can put that here, inside the brackets. 56

56

So let's actually try that and imagine 57

57

that we had a variable in which we store the repeating part 58

58

in first name and last name. 59

59

So we have name here in both 60

60

and so let's store just that inside of a variable. 61

61

And you will see my point here in a second 62

62

this will all make sense, trust me. 63

63

So name key, and then just name. 64

64

So again, that's the repeating part 65

65

in these two property names. 66

66

And now we can use that variable 67

67

to get both the first and the last name. 68

68

So console dot log and then Jonas records. 69

69

And so now here we can insert the expression. 70

70

So let's create a string first 71

71

and concatenate it with name key. 72

72

And here we could have built this string 73

73

using a template literal, 74

74

but in this case it's not really necessary. 75

75

So let's just copy this and then also last. 76

76

So what will happen here 77

77

is that as JavaScript sees this line of code, 78

78

it will start by executing this plus operation 79

79

and so it will create a string first name. 80

80

And then it will go to the Jonas object 81

81

and retrieve that property 82

82

at the same for the last name 83

83

here and the second line of code. 84

84

And so that's how we get Jonas and Schmedtman. 85

85

And doing something like this is more common 86

86

than you might think 87

87

and so that's why it's important that we understand 88

88

that in the square brackets, 89

89

we could put any expression here, okay. 90

90

Now the same thing would not work 91

91

with the dot operator or the dot notation. 92

92

So we cannot write Jonas dot and then this here, 93

93

for example, this would not work at all, 94

94

so and unexpected string. 95

95

And so that's the reason why we need 96

96

the brackets notation and dot notation. 97

97

We have to use the real final property name 98

98

and not a computed property name. 99

99

So for example this one, 100

100

this one is a real property name 101

101

as it appears in the object 102

102

and so that's why it works here in this case. 103

103

So in what situations should we use the dot notation 104

104

and when do we have to use deep brackets notation? 105

105

And I kind of already replied to that, 106

106

but this is just to recap. 107

107

So when we need to first compute the property name, 108

108

like we did here with the first and last name, 109

109

then of course we have to use the bracket notation 110

110

in any other case, just use the dot notation, 111

111

which looks a lot cleaner and it's also easier to use, okay. 112

112

And now to make the need for the bracket notation 113

113

even more clear, let me show you another example, 114

114

which I think is gonna be really fun. 115

115

So let's say that we don't know yet 116

116

which property we want to show, 117

117

and instead we get this information 118

118

from some user interface 119

119

so, for that we can use the prompt function. 120

120

Remember, so we can use prompt 121

121

and prompt is yet another built in function 122

122

that is built into JavaScript 123

123

and that we can use in any script. 124

124

So here we can write a string 125

125

and then this will create a popup window 126

126

with an input field. 127

127

Remember, so here we can write, 128

128

what do you want to know about Jonas? 129

129

choose between first name, last name, age, job and friends. 130

130

And remember that this function will then return a string 131

131

and this string, we just need to store into some variable. 132

132

So let's call this one 'interested in', alright. 133

133

And to start, let's just log this 'interested in' value 134

134

to the console here, 135

135

just till we see that it actually works. 136

136

And so here is the popup 137

137

and so now we just write one of these options here. 138

138

So let's say job, 139

139

and indeed now here we get job. 140

140

And so what we want to do now 141

141

is to basically display the job here in the console, 142

142

because that's what the user chose. 143

143

So how will we do that? 144

144

Can we use the dot notation? 145

145

So basically, can we do this? 146

146

Jonas dot interested in, 147

147

well, let's find out, 148

148

but I hope that you can guess. 149

149

And so we get undefined 150

150

and this is something new 151

151

that I didn't explain yet. 152

152

And so let me tell you now that undefined is what we get 153

153

when we try to access a property 154

154

on an object that does not exist. 155

155

So Jonas does not have a property 156

156

called 'interested in', right? 157

157

And so therefore the result 158

158

of trying to access 'interested in' on Jonas is undefined. 159

159

Now, what we need to do here 160

160

is instead of the dot notation, use the brackets notation, 161

161

because then we can put any expression here, 162

162

which in this case will be interested in. 163

163

And so JavaScript will now come here 164

164

and replace 'interested in' 165

165

with the actual value of the variable 166

166

and then that's the one 167

167

that will be looked up on the Jonas object. 168

168

So let's try that again 169

169

and now when I say job, we get a correct result, great. 170

170

And I hope that you did understand 171

171

the big difference between using the dot notation 172

172

and the bracket notation 173

173

and why the bracket notation gave us the correct result. 174

174

So again, it's because basically this expression 175

175

that we put here between these brackets will get evaluated 176

176

then this one here is job. 177

177

Now, of course, we can also pass in something else. 178

178

So something that is not here, for example, 179

179

let's try to access the location 180

180

and then again, we get undefined. 181

181

And once more, that is because 182

182

there is not a property called location on the object. 183

183

So let's actually handle that 184

184

using some knowledge that we already have. 185

185

So we know that undefined is a false value, right? 186

186

And so we can use that to our advantage now 187

187

and create some logic that we'll print a custom string 188

188

whenever the user tries to access 189

189

a property that doesn't exist. 190

190

So let's do that. 191

191

And we can say, if Jonas, brackets, 'interested in', 192

192

then log that to the console. 193

193

So basically this, 194

194

and again, I'm using now the option 195

195

and arrow down to move this line. 196

196

And so if this value exists, 197

197

then it is a truth value because it is not undefined 198

198

and so any string that is not empty 199

199

or any number that is not zero 200

200

will then trigger this code block here to be executed. 201

201

Now, if one of these properties was actually empty or zero, 202

202

we would then go to the else block, 203

203

but let's not account for that here in this case, 204

204

let's say that doesn't happen, all right. 205

205

So in case that the value does not exist 206

206

So for example, with location, 207

207

we then get undefined 208

208

and so in this case, 209

209

Jonas 'interested in' is undefined, which is false 210

210

and therefore we would go to the else block. 211

211

And so let's say something like wrong request, 212

212

and then we can repeat this sentence here. 213

213

So let's try that again here. 214

214

So location, and now we get wrong request, 215

215

but if we try something that exists, 216

216

then we get that result, great. 217

217

So I think this was a fun little experiment here 218

218

and now I hope you like that. 219

219

And now that you know 220

220

how to retrieve elements from an object, 221

221

let's also learn how to use both the dots 222

222

and the brackets notation 223

223

to add new properties to the object. 224

224

And so that's pretty straight forward. 225

225

So all we have to do is Jonas dot 226

226

and now let's actually use location 227

227

and set it equal to something. 228

228

So to some value. 229

229

So I'm located in Portugal 230

230

and so that's how we use the dot notation. 231

231

And then we can also of course use 232

232

the brackets notation just the same. 233

233

So let's say my Twitter handle here, 234

234

which is @Jonasschmedtman with just one N 235

235

and you should definitely check that out. 236

236

And now just to see that it worked, 237

237

let's log it to the console one final time 238

238

and okay, it's asking us for the field name again, 239

239

but anyway, now we have the location 240

240

and the Twitter here as well in the object. 241

241

And of course here 242

242

we could put any expression just like before. 243

243

So it works in the exact same way, alright. 244

244

And that's how we use the brackets and the dot notation. 245

245

Now, finally, I have one small challenge for you 246

246

that you can just do right now 247

247

here at the end of this video. 248

248

And so what I want you to do is to write a sentence 249

249

like this one, that I'm going to show you now, 250

250

but in a dynamic way. 251

251

So let's just write challenge here. 252

252

And so I want you to write 'Jonas has three friends 253

253

and his best friend is called Michael'. 254

254

So here, we suppose that the first friend in the array, 255

255

so in the friends array is the best friend, okay. 256

256

And for the record, I do have more than three friends, 257

257

but of course, here, we need to keep it all very simple. 258

258

So again, I want you to write this sentence, 259

259

but without hard coding, any of these values. 260

260

So what you need to get from the object 261

261

is this value, this value and this value. 262

262

And this is actually a bit hard, I would say. 263

263

And so there's absolutely no need for you to nail this, 264

264

but you can still try it 265

265

and maybe you can do some of the parts. 266

266

One hint that I can give you is that you will need to use 267

267

multiple dots to get the number of friends, okay. 268

268

So that's totally possible. 269

269

And so take like five minutes to try this out now. 270

270

So pause the video and I'll see you in a second. 271

271

All right. 272

272

And so this is how we would do this. 273

273

So we want to lock this to the console, of course. 274

274

And so we're starting with the name 275

275

and this one is probably the most straightforward one. 276

276

So that's just, Jonas dot first name. 277

277

So that is where the name is stored 278

278

then has, and then the number of friends. 279

279

So the friends are stored in Jonas dot friends. 280

280

Now, do you remember how to get 281

281

the number of elements in an array? 282

282

It is by writing the array dot length, right? 283

283

And so let's do that. 284

284

So Jonas dot friends. 285

285

And so this is our array, right? 286

286

And so on this array, we can now ask for the length. 287

287

And so basically you can see here that length 288

288

is also a property that is available on all race. 289

289

So it's a property that we don't define ourselves, 290

290

but it's automatically available. 291

291

But now that you know about the dot notation, 292

292

you can also start to understand that the dot length 293

293

is just a property that is available on all a race. 294

294

And so that's what we're doing here. 295

295

So again, we have an array which is this one, 296

296

and on there, we can simply then request dot length. 297

297

Okay, let's continue the sentence now. 298

298

And his best friend is called 299

299

and now we need to simply get 300

300

the first element from the array. 301

301

And so that's again, Jonas dot friends 302

302

and now remember, we get the first element 303

303

of an array using square brackets zero, and that's it. 304

304

So once more, this here is simply an array 305

305

and so we learned that to take the first element 306

306

we just use square brackets with zero. 307

307

So in a sense on the race, 308

308

we also have the brackets notation. 309

309

Okay, so that's just test this, 310

310

and again, this annoying popup, 311

311

but indeed Jonas has three 312

312

and we're just missing the friends here. 313

313

So friends and his best friend is called Michael. 314

314

So just what I had written here as a template. 315

315

Now, in terms of operator proceedings, 316

316

let's quickly check out why it actually works this way. 317

317

So with the dots here. 318

318

Because remember, as I said, 319

319

the dot operator here is really just that 320

320

it's just an operator and the same goes for the brackets. 321

321

So I will, again, Google MDN operator proceedings, 322

322

but the link to this table 323

323

is also on the resources pages on my website. 324

324

And the link to that one 325

325

is right in the first text lecture of the course. 326

326

But anyway, here we have date dot notation, 327

327

which here is called member access 328

328

and then we have the brackets notation, 329

329

which is here called computed member access. 330

330

And so the computed, 331

331

is because as I mentioned multiple times now, 332

332

because we can compute the property names 333

333

that we want to access. 334

334

Now, what matters here is that they both have a really high 335

335

priority and both are left to right. 336

336

And so that's why all of this works. 337

337

So we have two dots here 338

338

so Jonas dot friends dot length 339

339

and they are executed left to right. 340

340

And therefore the first thing 341

341

that JavaScript does is Jonas dot friends. 342

342

And so essentially, 343

343

this will then be replaced with the array 344

344

and then on that array 345

345

is where the dot length is then applied 346

346

and the same thing here. 347

347

So first Jonas dot friends is done. 348

348

And then this one is also left to right 349

349

and so from there we take element number zero, okay. 350

350

So there's no magic involved here 351

351

there is rules for everything and everything makes sense. 352

352

And again, you don't need to memorize this here, 353

353

with time all of this will become second nature to you.