Original subtitles

1 1

So let's continue learning about maps. 2

2

So in the last video we created an empty map 3

3

and then edit elements 4

4

to it by using the set method. 5

5

Remember, however, 6

6

there is actually another way of populating a new map 7

7

without having to use the set method. 8

8

And I prefer that because the set method 9

9

is a bit cumbersome when there are a lot 10

10

of values to set. 11

11

So instead we can create a new map like this. 12

12

So I'm going to call this one question, 13

13

because now we're implementing 14

14

something like a quiz. 15

15

So in a very simple way, 16

16

so a new map, 17

17

and then here we can pass in an array 18

18

and disarray itself will contain multiple arrays. 19

19

And in each of these arrays, 20

20

the first position is gonna be the key. 21

21

And the second position is gonna be the value. 22

22

So let's do that. 23

23

So let's say 24

24

question, 25

25

and then what is the best programming language 26

26

in the world? 27

27

So this is basically the first entry of 28

28

this question map. 29

29

So before we would have used the set method 30

30

and then this as the first argument 31

31

and this as the second, 32

32

but now we can simply specify a disarray 33

33

of arrays 34

34

in this. 35

35

wait 36

36

Now, next up, 37

37

I want to specify the options 38

38

for the answer basically. 39

39

And so I can simply do that by their number. 40

40

So the first answer is going to be C 41

41

so C the programming language. 42

42

The second, will it be Java. 43

43

And the third will be, of course, what else? Java script, 44

44

then we need a key for the correct answer. 45

45

And what do you think the correct answer is? 46

46

of course, number three. 47

47

And then we can also have like a success message 48

48

and an error message. 49

49

And so let's again, 50

50

use the Boolean keys, so true, 51

51

which is basically when the user is correct, 52

52

then we can say correct. 53

53

And maybe some kind of emoji here, 54

54

like this one, 55

55

but if it's wrong. 56

56

So if the answer is false, 57

57

then try again. 58

58

All right. 59

59

And so let's take a look 60

60

and that looks correct. 61

61

Fantastic. 62

62

So when creating a new map from scratch, 63

63

directly in the code, 64

64

I actually prefer this way 65

65

of writing it over the way that we did 66

66

in a previous lecture. 67

67

But when we keep adding new elements, 68

68

programmatically using code, 69

69

then of course the set method is still the way to go. 70

70

Now, as an aside, 71

71

does this kind of structure here? 72

72

So disarray of arrays look kind of similar to you? 73

73

Well, I hope it does 74

74

because this is exactly the same array structure 75

75

that is returned 76

76

from calling object dot entries. 77

77

So for example, 78

78

on the opening hours object. 79

79

And so you see that they're two, 80

80

we get an array of arrays where the first element 81

81

is the key and the second one 82

82

is the value. 83

83

And so what this means is that there 84

84

is an easy way to convert from objects to maps. 85

85

So let me write that here, 86

86

actually convert object to map. 87

87

And so we can say ours map 88

88

is a new map 89

89

and then simply 90

90

with object dot entries 91

91

of opening hours. 92

92

Alright, so again, 93

93

because this structure that results from object dot entries 94

94

is exactly the same as this. 95

95

So an array of arrays. 96

96

So indeed, now we have a map here 97

97

and so keep this small trick here in mind, 98

98

whenever you need a map, 99

99

when you already have an object. 100

100

Next up, let's talk about iteration 101

101

and iteration is possible 102

102

on maps because as we already know, 103

103

maps are also iterables. 104

104

And so the for loop 105

105

is also available for them. 106

106

And so let's use a for loop actually 107

107

to now print, 108

108

just these options here 109

109

to the console. 110

110

So these three, 111

111

all right. 112

112

So as always, 113

113

I like to start 114

114

with first saying what we will loop over. 115

115

And so that's gonna be the question map. 116

116

And so each item 117

117

of the question will just like before contain both the key 118

118

and the value. 119

119

And so here I can now directly restructure that 120

120

into two separate variables. 121

121

So this is a really, 122

122

really good use case of restructuring. 123

123

Alright, so just to reiterate, 124

124

this is exactly the same as we did 125

125

when we looped over the object. 126

126

The only difference is that for the object, 127

127

we needed object dot entries right here. 128

128

And that's just because the object 129

129

is not an alterable, 130

130

but then we converted it 131

131

to an alterable using object dot entries. 132

132

And so then this part here 133

133

is exactly the same. 134

134

Okay. 135

135

Now keep in mind. 136

136

We only want to print these three. 137

137

So essentially we only want 138

138

to print an element if the key is a number. 139

139

So let's use what we already know, 140

140

type off key, equal number, 141

141

and only then look to the console. 142

142

So inside here, answer, 143

143

and then the key. 144

144

So the number for the person then to choose 145

145

with the correct value, 146

146

which is going to be the answer option itself. 147

147

So here we go. 148

148

Answer one, two, three, 149

149

and now let's just also log the question itself. 150

150

So quiz app, 151

151

and here we want question dot get, remember, 152

152

and then the question key. 153

153

And so now it is complete with question and answers. 154

154

Now to get the answer from the user, 155

155

let's again, use a prompt, 156

156

so answer equal a prompt, 157

157

and let's ask for your answer 158

158

and answer. 159

159

And remember, we need to convert this now to a number 160

160

because eventually we will compare this number 161

161

with the key that we have here. 162

162

All right. 163

163

Let's just print it then also. 164

164

Okay. 165

165

So here we have to question, 166

166

and of course the correct answer 167

167

is number three. 168

168

And so here we go. 169

169

And now we can use the power 170

170

of the Boolean keys here in order 171

171

to print either the success message here 172

172

or the error message basically. 173

173

All right. 174

174

So do you think you can do that 175

175

on your own? 176

176

Just take a minute or two and try that 177

177

on your own right now. 178

178

So did you manage to do that? 179

179

Well, let's start by comparing the answer 180

180

with the correct answer, basically. 181

181

So that is a question dot get correct. 182

182

And so this is a three, right? 183

183

And then we can compare that to the answer. 184

184

So in this case, 185

185

this was also three. 186

186

And so this here, 187

187

what return true. 188

188

Correct. 189

189

And now, since this is true, 190

190

we can directly plug that 191

191

into the map. 192

192

And so this true will then return correct. 193

193

So that's similar to what we did 194

194

in the previous video as well. 195

195

And so again, 196

196

we are using the power of having Boolean values as keys, 197

197

and then let's just log that final message 198

198

to the console. 199

199

So three again, now, 200

200

and something went wrong, 201

201

but I see that it's just here. 202

202

It's the name? 203

203

So this is correct. 204

204

Not correct. 205

205

So again three 206

206

and now 207

207

indeed we get correct. 208

208

Okay. 209

209

So this is three here. 210

210

The answer is three, 211

211

this is three. 212

212

And so this here will be true. 213

213

And so when we get a true 214

214

from the map, 215

215

we get this string well, 216

216

something else. 217

217

And indeed we get try again. 218

218

Okay. 219

219

And with that, 220

220

we finished this nice little quiz. 221

221

Now,just to finish here, 222

222

as a side note, 223

223

sometimes we also need to convert a map back 224

224

to an array. 225

225

So basically to this structure, 226

226

and we can do that, like this. 227

227

So convert map 228

228

to array basically. 229

229

You can do that by simply building new array 230

230

and then unpacking again, 231

231

using the spread operator. 232

232

The question map, 233

233

it's asking us here again. 234

234

And so then the result is essentially 235

235

this same data structure. 236

236

So the array of arrays, 237

237

with which we started. 238

238

So it's this one here. 239

239

So in this case, of course, 240

240

this wouldn't make too much sense, 241

241

but it's still got to know that sometimes 242

242

you can convert a map to an array. 243

243

Let's just preset this here to some value 244

244

so that it doesn't always bug us here. 245

245

And by the way, 246

246

there are also the, 247

247

the methods that we had on arrays , 248

248

which are the entries 249

249

and also keys 250

250

and values 251

251

in case that you need them. 252

252

Okay, now they give us 253

253

this weird iterator here. 254

254

So then just as I showed you before, 255

255

you have to spread them and put them 256

256

in a new array. 257

257

So like this, 258

258

but this is not really that important. 259

259

I just wanted to show you that this exists 260

260

and for this,there's actually no need, 261

261

because it's going to be exactly the same as this one. 262

262

Okay. 263

263

So these are all the keys 264

264

and all the values in dit. 265

265

Alright and that's all I have to show you 266

266

about maps for now, 267

267

but now you might be wondering 268

268

when should I use maps? 269

269

and when should I use objects? 270

270

Because they are pretty similar, right? 271

271

Well, that's what the next lecture is all about. 272

272

There I will help you to choose 273

273

between all the data structures, 274

274

including even arrays and sets.