Original subtitles

1 1

So, we learned about sets. 2

2

Now, it's time to learn 3

3

about the other new JavaScript data structure 4

4

and that is maps. 5

5

And, let me start by telling you 6

6

that maps are a lot more useful than sets. 7

7

So what exactly is a map? 8

8

Well, it's certainly not the same thing 9

9

that we use in the real life 10

10

to find our ways around. 11

11

Now, instead in JavaScript, 12

12

a map is a data structure 13

13

that we can use to map values to keys. 14

14

So, just like an object 15

15

data is stored in key value pairs in maps. 16

16

Now, the big difference between objects and maps 17

17

is that in maps, the keys can have any type 18

18

and this can be huge. 19

19

So, in objects, the keys are basically always strings. 20

20

But in maps, we can have any type of key. 21

21

It could even be objects, or arrays, or other maps. 22

22

So, that can lead to some really great and advanced stuff. 23

23

So, let's create a restaurant map here. 24

24

So, I'm just calling it rest here. 25

25

And so, we again use the constructor 26

26

just like we used for the set, 27

27

but this one called map. 28

28

And the easiest way to create a map 29

29

is to actually create an empty map 30

30

just like this 31

31

without passing anything in. 32

32

And then, to fill up the map 33

33

we can use the set method. 34

34

And then here, we pass into arguments. 35

35

The first is the key name. 36

36

So, let's call it name. 37

37

And then, the name of the restaurant itself. 38

38

So, Classico Italiano. 39

39

And, so you see, that this set method is pretty similar 40

40

to the add method that we had in sets. 41

41

So, both allow us to add a new element 42

42

to the data structure. 43

43

And, remember that we can use any data type that we want. 44

44

So, let's say that the restaurant has two locations. 45

45

So, we can create a key with a number. 46

46

It doesn't have to be a string. 47

47

So, let's say one is in Firenze, Italy. 48

48

And the other one, 49

49

so, a number two 50

50

is in Lisbon, Portugal. 51

51

And, calling the set method like this 52

52

does not only update the map that it's called on, 53

53

but it also returns the map. 54

54

So, let me show that to you here. 55

55

Okay, so this is what the set looks like 56

56

after adding this key number two. 57

57

(mouse clicking) 58

58

So, here we have the entries. 59

59

The first is name 60

60

which is then mapped to Classico Italiano. 61

61

And then, the other two that we just added. 62

62

Now, the fact that the set method 63

63

actually returns the updated map 64

64

allows us to change the set method like this. 65

65

So, let's set categories here 66

66

as an array and I will just grab that from up here. 67

67

Okay, so once more, 68

68

the value can be anything. 69

69

And now, I can just chain the next set on here. 70

70

(mouse clicking) 71

71

So, I can now say open and set it to 11. 72

72

And then again, I can change the next one 73

73

and say close at 23. 74

74

So, let's save it. 75

75

And this will then format this nicely. 76

76

So, again, calling the set method 77

77

returns the updated map. 78

78

And so, all of this is now the updated map. 79

79

And so, we can call set again on that map. 80

80

And, we can continue this even further. 81

81

So, that's not actually 82

82

even use booleans as the key here. 83

83

And, we can say that we want to map True 84

84

to We are open. 85

85

(mouse clicking) 86

86

And then, we can also set False 87

87

to We are closed. 88

88

And, we will see in a minute 89

89

how this can become useful, okay? 90

90

Now, in order to read data from a map 91

91

we use the Get method. 92

92

And so, that get method is available on all the maps. 93

93

And so, all we need to do is to pass in the name of the key. 94

94

So, let's see. 95

95

Let's log this to the console actually. 96

96

And, let's just duplicate it here and also log True. 97

97

And, you see, that the True key here is then mapped 98

98

to We are open 99

99

and named to Classico Italiano of course. 100

100

And here, when we get the elements 101

101

of course the data type of the key matters. 102

102

So, if we try it through the string 103

103

then that would be undefined. 104

104

And, if we tried to retrieve one, as a string, 105

105

that would also be undefined. 106

106

Because, here we have one, the number, as the key. 107

107

And so, with this we will then get Firenze, Italy. 108

108

All right. 109

109

Now, just for fun 110

110

let's use the fact 111

111

that we can have Boolean keys. 112

112

So, this True and False here, right? 113

113

And, we also have the open and the close time. 114

114

So, you see they are all kind of related. 115

115

And so, let's create something fun with this. 116

116

So, let's say we have some current time. 117

117

And, we could actually get to current time from JavaScript 118

118

but we don't know how yet. 119

119

So, let's just say it's 21 hours. 120

120

So, that's 9:00 PM. 121

121

And then, we could do something really clever like this. 122

122

So, rest.get 123

123

and so, when we pass in True, 124

124

then we will get, We are open. 125

125

And, when we pass in False, 126

126

we will get, We are closed. 127

127

And so, in order to get the correct string here 128

128

according to the time, 129

129

all we need to do is to compare the current time 130

130

with these two Open and Close, okay? 131

131

So, let's do that. 132

132

We can say, 133

133

or we can ask, 134

134

is the time, 135

135

so, the current time greater 136

136

than rest.get, open. 137

137

And, at the same time, 138

138

is it below rest.get, close. 139

139

So basically, here we are asking 140

140

if the current time is between 23 and 11. 141

141

And so, this here is a True False value. 142

142

And, this is a True False value so, Boolean. 143

143

And so, the result of this end operation 144

144

will be either True or False. 145

145

And then, True or False will map 146

146

to one of these values. 147

147

So, that's really clever, right? 148

148

So, let's unlog the results to the console. 149

149

And, let's check it out. 150

150

And so, at 21 hours, We are open. 151

151

And, that makes sense. 152

152

It is between these two times. 153

153

But, if it was like eight hours, 154

154

then we are closed, amazing. 155

155

Now, this is as I said pretty clever, 156

156

but it's not really so readable. 157

157

So, don't overuse this kind of pattern, okay? 158

158

This just really goes to show the power 159

159

of having Booleans as map keys. 160

160

But anyway, let's now keep exploring the methods 161

161

that are available on maps. 162

162

So, we already have methods to set and to get. 163

163

Now, we can also check if a map contains a certain key. 164

164

So, let's log to the console 165

165

the result of calling the has method. 166

166

So, categories, and so, this should be True. 167

167

And, it is indeed True. 168

168

Then, we can also delete elements from the map. 169

169

And again, that happens based on the key. 170

170

So, rest.delete. 171

171

And, let's say that the second location 172

172

should be closed now. 173

173

So, this one here, the one in Lisbon. 174

174

And so, we take that key and delete it from the map. 175

175

And as a result, that will then be gone here. 176

176

So, you see, no longer there. 177

177

Now comparing this to objects, 178

178

we can actually also delete properties from objects 179

179

using something called the Delete Operator. 180

180

But, that's a really slow process. 181

181

And usually, it's not encouraged to do that here. 182

182

About the has method. 183

183

Actually, objects do also have a method 184

184

which is called hasOwnProperty. 185

185

But, we're gonna talk about that 186

186

in the object oriented programming section, all right? 187

187

Next, maps also have the size property. 188

188

So, rest.size, of course. 189

189

And, that should be seven as we can see here. 190

190

And yeah, so it has seven items. 191

191

And then, to finish, we can also clear. 192

192

So basically, remove all the elements from the map. 193

193

Let's just put that here. 194

194

And so, now it's gone and it has a size of zero. 195

195

Let's put that back. 196

196

So, as you can see here, 197

197

there is some overlap in the way that we work 198

198

with maps and sets. 199

199

And, that's because they were both introduced in ES6. 200

200

And now just to finish, 201

201

let me show you that we can in fact use arrays 202

202

or objects as map keys. 203

203

So, let's here set something else. 204

204

And so, now as a key 205

205

I will use this array 206

206

and I will set it to Test, okay? 207

207

And, let's just put that actually here. 208

208

So, it's before the log 209

209

so we can take a look at it. 210

210

And so, here indeed we see 211

211

this is now the key. 212

212

This array, all right? 213

213

But now, to get the data based on that array 214

214

let me see how we could do that. 215

215

So, rest.get. 216

216

And, think about what we are doing here. 217

217

Do you think that this will work? 218

218

And actually, we need to log it to console. 219

219

But, given what we learned 220

220

in the previous section 221

221

about how JavaScript works behind the scenes. 222

222

Especially, primitives versus objects. 223

223

Do you think that this will now retrieve Test? 224

224

Well, let's see. 225

225

And, no it did not. 226

226

And the reason for that, 227

227

is that these two arrays 228

228

are actually not the same object. 229

229

So, this array, and this one, 230

230

even though we wrote them in the same way 231

231

and so, they have the same elements, 232

232

they are not the same object in the heap, okay? 233

233

And, the key here is exactly this object. 234

234

This object in memory, 235

235

and not this one. 236

236

And so, this cannot work. 237

237

In order to make it work 238

238

we would have to do this. 239

239

Creating an array, one, two. 240

240

And then, we use that array. 241

241

And then, we also use the same array 242

242

to read the value out of the map. 243

243

And so now, it is gonna work, okay? 244

244

Because, now of course 245

245

these two refer to the same place in memory. 246

246

Great, and so with this we proved 247

247

that we can indeed use objects as map keys. 248

248

And, this can be very useful with dumb elements 249

249

which, in fact are also nothing more than just 250

250

a special type of object. 251

251

Let's do that here as well. 252

252

Let's do rest.set. 253

253

And now as a key, 254

254

we will use document.queryselector. 255

255

And then, we're gonna select 256

256

these h1 elements that we have here. 257

257

So, this is just an h1. 258

258

So, nothing fancy. 259

259

And so, the result of this will be an object. 260

260

And so, let's say that this is the heading. 261

261

That now as we check it out here, 262

262

you will see that it's here indeed. 263

263

So, as I hover it 264

264

you can even see it here visible on the webpage. 265

265

You see that? 266

266

The highlight up there? 267

267

That exactly is the key of this map entry. 268

268

Sounds crazy, but it is possible 269

269

and it can enable some advanced functionality. 270

270

All right. 271

271

So, we learned here how to create maps 272

272

and, how to work with them. 273

273

So, this should be enough for one lecture. 274

274

And so, let's wrap up this one now. 275

275

And, continue learning about maps 276

276

in the next one.