WEBVTT

1
00:00:01.400 --> 00:00:04.463
So let's continue learning about maps.

2
00:00:06.250 --> 00:00:09.660
So in the last video we created an empty map

3
00:00:09.660 --> 00:00:10.900
and then edit elements

4
00:00:10.900 --> 00:00:13.670
to it by using the set method.

5
00:00:13.670 --> 00:00:15.610
Remember, however,

6
00:00:15.610 --> 00:00:19.640
there is actually another way of populating a new map

7
00:00:19.640 --> 00:00:22.560
without having to use the set method.

8
00:00:22.560 --> 00:00:25.760
And I prefer that because the set method

9
00:00:25.760 --> 00:00:28.570
is a bit cumbersome when there are a lot

10
00:00:28.570 --> 00:00:30.180
of values to set.

11
00:00:30.180 --> 00:00:33.493
So instead we can create a new map like this.

12
00:00:34.930 --> 00:00:37.320
So I'm going to call this one question,

13
00:00:37.320 --> 00:00:39.430
because now we're implementing

14
00:00:39.430 --> 00:00:41.550
something like a quiz.

15
00:00:41.550 --> 00:00:43.143
So in a very simple way,

16
00:00:45.000 --> 00:00:46.470
so a new map,

17
00:00:46.470 --> 00:00:49.740
and then here we can pass in an array

18
00:00:49.740 --> 00:00:52.960
and disarray itself will contain multiple arrays.

19
00:00:52.960 --> 00:00:54.660
And in each of these arrays,

20
00:00:54.660 --> 00:00:57.060
the first position is gonna be the key.

21
00:00:57.060 --> 00:01:00.740
And the second position is gonna be the value.

22
00:01:00.740 --> 00:01:02.033
So let's do that.

23
00:01:03.400 --> 00:01:04.340
So let's say

24
00:01:05.360 --> 00:01:07.080
question,

25
00:01:07.080 --> 00:01:12.080
and then what is the best programming language

26
00:01:13.600 --> 00:01:16.033
in the world?

27
00:01:17.970 --> 00:01:20.870
So this is basically the first entry of

28
00:01:20.870 --> 00:01:22.073
this question map.

29
00:01:23.090 --> 00:01:26.140
So before we would have used the set method

30
00:01:26.140 --> 00:01:28.780
and then this as the first argument

31
00:01:28.780 --> 00:01:30.510
and this as the second,

32
00:01:30.510 --> 00:01:32.980
but now we can simply specify a disarray

33
00:01:32.980 --> 00:01:33.813
of arrays

34
00:01:34.940 --> 00:01:36.070
in this.

35
00:01:36.070 --> 00:01:37.200
wait

36
00:01:37.200 --> 00:01:38.280
Now, next up,

37
00:01:38.280 --> 00:01:40.720
I want to specify the options

38
00:01:40.720 --> 00:01:42.470
for the answer basically.

39
00:01:42.470 --> 00:01:45.313
And so I can simply do that by their number.

40
00:01:46.370 --> 00:01:48.440
So the first answer is going to be C

41
00:01:49.610 --> 00:01:52.230
so C the programming language.

42
00:01:52.230 --> 00:01:53.963
The second, will it be Java.

43
00:01:57.750 --> 00:02:02.750
And the third will be, of course, what else? Java script,

44
00:02:08.420 --> 00:02:12.690
then we need a key for the correct answer.

45
00:02:12.690 --> 00:02:15.430
And what do you think the correct answer is?

46
00:02:15.430 --> 00:02:17.083
of course, number three.

47
00:02:18.150 --> 00:02:21.040
And then we can also have like a success message

48
00:02:21.040 --> 00:02:22.990
and an error message.

49
00:02:22.990 --> 00:02:23.900
And so let's again,

50
00:02:23.900 --> 00:02:27.970
use the Boolean keys, so true,

51
00:02:27.970 --> 00:02:30.993
which is basically when the user is correct,

52
00:02:32.010 --> 00:02:33.733
then we can say correct.

53
00:02:34.750 --> 00:02:37.060
And maybe some kind of emoji here,

54
00:02:37.060 --> 00:02:38.133
like this one,

55
00:02:40.310 --> 00:02:41.930
but if it's wrong.

56
00:02:41.930 --> 00:02:44.310
So if the answer is false,

57
00:02:44.310 --> 00:02:45.483
then try again.

58
00:02:46.810 --> 00:02:47.673
All right.

59
00:02:48.940 --> 00:02:50.140
And so let's take a look

60
00:02:54.780 --> 00:02:57.110
and that looks correct.

61
00:02:57.110 --> 00:02:58.620
Fantastic.

62
00:02:58.620 --> 00:03:02.420
So when creating a new map from scratch,

63
00:03:02.420 --> 00:03:03.830
directly in the code,

64
00:03:03.830 --> 00:03:06.190
I actually prefer this way

65
00:03:06.190 --> 00:03:08.340
of writing it over the way that we did

66
00:03:08.340 --> 00:03:10.430
in a previous lecture.

67
00:03:10.430 --> 00:03:12.210
But when we keep adding new elements,

68
00:03:12.210 --> 00:03:14.760
programmatically using code,

69
00:03:14.760 --> 00:03:18.703
then of course the set method is still the way to go.

70
00:03:19.670 --> 00:03:21.560
Now, as an aside,

71
00:03:21.560 --> 00:03:24.220
does this kind of structure here?

72
00:03:24.220 --> 00:03:28.540
So disarray of arrays look kind of similar to you?

73
00:03:28.540 --> 00:03:30.710
Well, I hope it does

74
00:03:30.710 --> 00:03:33.880
because this is exactly the same array structure

75
00:03:33.880 --> 00:03:35.290
that is returned

76
00:03:35.290 --> 00:03:39.010
from calling object dot entries.

77
00:03:39.010 --> 00:03:40.480
So for example,

78
00:03:40.480 --> 00:03:42.403
on the opening hours object.

79
00:03:44.090 --> 00:03:46.380
And so you see that they're two,

80
00:03:46.380 --> 00:03:49.073
we get an array of arrays where the first element

81
00:03:49.073 --> 00:03:51.580
is the key and the second one

82
00:03:51.580 --> 00:03:53.380
is the value.

83
00:03:53.380 --> 00:03:56.010
And so what this means is that there

84
00:03:56.010 --> 00:04:00.133
is an easy way to convert from objects to maps.

85
00:04:01.070 --> 00:04:02.911
So let me write that here,

86
00:04:02.911 --> 00:04:05.823
actually convert object to map.

87
00:04:07.830 --> 00:04:12.420
And so we can say ours map

88
00:04:12.420 --> 00:04:13.970
is a new map

89
00:04:14.950 --> 00:04:16.420
and then simply

90
00:04:16.420 --> 00:04:19.000
with object dot entries

91
00:04:20.190 --> 00:04:21.693
of opening hours.

92
00:04:22.770 --> 00:04:24.440
Alright, so again,

93
00:04:24.440 --> 00:04:28.660
because this structure that results from object dot entries

94
00:04:28.660 --> 00:04:31.680
is exactly the same as this.

95
00:04:31.680 --> 00:04:33.473
So an array of arrays.

96
00:04:38.530 --> 00:04:41.880
So indeed, now we have a map here

97
00:04:43.680 --> 00:04:46.560
and so keep this small trick here in mind,

98
00:04:46.560 --> 00:04:47.980
whenever you need a map,

99
00:04:47.980 --> 00:04:49.783
when you already have an object.

100
00:04:50.640 --> 00:04:53.590
Next up, let's talk about iteration

101
00:04:53.590 --> 00:04:54.970
and iteration is possible

102
00:04:54.970 --> 00:04:57.670
on maps because as we already know,

103
00:04:57.670 --> 00:04:59.830
maps are also iterables.

104
00:04:59.830 --> 00:05:01.100
And so the for loop

105
00:05:01.100 --> 00:05:03.780
is also available for them.

106
00:05:03.780 --> 00:05:05.940
And so let's use a for loop actually

107
00:05:05.940 --> 00:05:07.930
to now print,

108
00:05:07.930 --> 00:05:09.410
just these options here

109
00:05:09.410 --> 00:05:10.730
to the console.

110
00:05:10.730 --> 00:05:13.570
So these three,

111
00:05:13.570 --> 00:05:14.403
all right.

112
00:05:16.070 --> 00:05:17.370
So as always,

113
00:05:17.370 --> 00:05:18.510
I like to start

114
00:05:18.510 --> 00:05:21.413
with first saying what we will loop over.

115
00:05:22.580 --> 00:05:24.750
And so that's gonna be the question map.

116
00:05:24.750 --> 00:05:26.690
And so each item

117
00:05:26.690 --> 00:05:31.450
of the question will just like before contain both the key

118
00:05:31.450 --> 00:05:33.050
and the value.

119
00:05:33.050 --> 00:05:36.330
And so here I can now directly restructure that

120
00:05:36.330 --> 00:05:38.600
into two separate variables.

121
00:05:38.600 --> 00:05:39.640
So this is a really,

122
00:05:39.640 --> 00:05:42.563
really good use case of restructuring.

123
00:05:43.640 --> 00:05:46.660
Alright, so just to reiterate,

124
00:05:46.660 --> 00:05:48.520
this is exactly the same as we did

125
00:05:48.520 --> 00:05:50.640
when we looped over the object.

126
00:05:50.640 --> 00:05:53.120
The only difference is that for the object,

127
00:05:53.120 --> 00:05:56.940
we needed object dot entries right here.

128
00:05:56.940 --> 00:05:58.950
And that's just because the object

129
00:05:58.950 --> 00:06:00.620
is not an alterable,

130
00:06:00.620 --> 00:06:01.940
but then we converted it

131
00:06:01.940 --> 00:06:05.970
to an alterable using object dot entries.

132
00:06:05.970 --> 00:06:07.810
And so then this part here

133
00:06:07.810 --> 00:06:09.710
is exactly the same.

134
00:06:09.710 --> 00:06:10.900
Okay.

135
00:06:10.900 --> 00:06:11.820
Now keep in mind.

136
00:06:11.820 --> 00:06:15.160
We only want to print these three.

137
00:06:15.160 --> 00:06:17.010
So essentially we only want

138
00:06:17.010 --> 00:06:20.883
to print an element if the key is a number.

139
00:06:22.680 --> 00:06:25.262
So let's use what we already know,

140
00:06:25.262 --> 00:06:30.262
type off key, equal number,

141
00:06:30.850 --> 00:06:33.500
and only then look to the console.

142
00:06:33.500 --> 00:06:36.483
So inside here, answer,

143
00:06:37.540 --> 00:06:39.130
and then the key.

144
00:06:39.130 --> 00:06:41.370
So the number for the person then to choose

145
00:06:42.620 --> 00:06:45.320
with the correct value,

146
00:06:45.320 --> 00:06:47.793
which is going to be the answer option itself.

147
00:06:48.920 --> 00:06:50.960
So here we go.

148
00:06:50.960 --> 00:06:52.263
Answer one, two, three,

149
00:06:53.500 --> 00:06:56.973
and now let's just also log the question itself.

150
00:06:58.500 --> 00:07:00.053
So quiz app,

151
00:07:02.263 --> 00:07:06.900
and here we want question dot get, remember,

152
00:07:06.900 --> 00:07:10.253
and then the question key.

153
00:07:10.253 --> 00:07:14.463
And so now it is complete with question and answers.

154
00:07:15.810 --> 00:07:18.320
Now to get the answer from the user,

155
00:07:18.320 --> 00:07:20.403
let's again, use a prompt,

156
00:07:24.140 --> 00:07:28.023
so answer equal a prompt,

157
00:07:30.440 --> 00:07:33.180
and let's ask for your answer

158
00:07:35.180 --> 00:07:37.493
and answer.

159
00:07:37.493 --> 00:07:40.750
And remember, we need to convert this now to a number

160
00:07:41.590 --> 00:07:45.110
because eventually we will compare this number

161
00:07:45.110 --> 00:07:47.913
with the key that we have here.

162
00:07:49.690 --> 00:07:50.523
All right.

163
00:07:51.860 --> 00:07:53.603
Let's just print it then also.

164
00:07:57.320 --> 00:07:58.153
Okay.

165
00:07:58.153 --> 00:07:59.513
So here we have to question,

166
00:08:00.415 --> 00:08:02.223
and of course the correct answer

167
00:08:02.223 --> 00:08:03.460
is number three.

168
00:08:03.460 --> 00:08:04.633
And so here we go.

169
00:08:06.210 --> 00:08:07.950
And now we can use the power

170
00:08:07.950 --> 00:08:10.520
of the Boolean keys here in order

171
00:08:10.520 --> 00:08:14.187
to print either the success message here

172
00:08:14.187 --> 00:08:17.063
or the error message basically.

173
00:08:18.270 --> 00:08:19.630
All right.

174
00:08:19.630 --> 00:08:21.390
So do you think you can do that

175
00:08:21.390 --> 00:08:22.840
on your own?

176
00:08:22.840 --> 00:08:25.370
Just take a minute or two and try that

177
00:08:25.370 --> 00:08:27.253
on your own right now.

178
00:08:30.230 --> 00:08:32.580
So did you manage to do that?

179
00:08:32.580 --> 00:08:35.510
Well, let's start by comparing the answer

180
00:08:35.510 --> 00:08:38.403
with the correct answer, basically.

181
00:08:39.950 --> 00:08:44.950
So that is a question dot get correct.

182
00:08:47.880 --> 00:08:51.890
And so this is a three, right?

183
00:08:51.890 --> 00:08:55.470
And then we can compare that to the answer.

184
00:08:55.470 --> 00:08:56.303
So in this case,

185
00:08:56.303 --> 00:08:58.220
this was also three.

186
00:08:58.220 --> 00:08:59.053
And so this here,

187
00:08:59.053 --> 00:09:01.290
what return true.

188
00:09:01.290 --> 00:09:02.520
Correct.

189
00:09:02.520 --> 00:09:04.140
And now, since this is true,

190
00:09:04.140 --> 00:09:06.420
we can directly plug that

191
00:09:06.420 --> 00:09:08.410
into the map.

192
00:09:08.410 --> 00:09:11.423
And so this true will then return correct.

193
00:09:12.450 --> 00:09:14.300
So that's similar to what we did

194
00:09:14.300 --> 00:09:16.883
in the previous video as well.

195
00:09:18.490 --> 00:09:19.323
And so again,

196
00:09:19.323 --> 00:09:23.963
we are using the power of having Boolean values as keys,

197
00:09:25.200 --> 00:09:28.970
and then let's just log that final message

198
00:09:28.970 --> 00:09:29.883
to the console.

199
00:09:31.090 --> 00:09:33.680
So three again, now,

200
00:09:33.680 --> 00:09:35.857
and something went wrong,

201
00:09:35.857 --> 00:09:38.830
but I see that it's just here.

202
00:09:38.830 --> 00:09:39.663
It's the name?

203
00:09:39.663 --> 00:09:41.980
So this is correct.

204
00:09:41.980 --> 00:09:42.813
Not correct.

205
00:09:43.750 --> 00:09:45.880
So again three

206
00:09:45.880 --> 00:09:46.830
and now

207
00:09:46.830 --> 00:09:48.383
indeed we get correct.

208
00:09:49.640 --> 00:09:50.700
Okay.

209
00:09:50.700 --> 00:09:52.000
So this is three here.

210
00:09:52.000 --> 00:09:53.690
The answer is three,

211
00:09:53.690 --> 00:09:55.040
this is three.

212
00:09:55.040 --> 00:09:56.790
And so this here will be true.

213
00:09:56.790 --> 00:09:59.110
And so when we get a true

214
00:09:59.110 --> 00:10:00.410
from the map,

215
00:10:00.410 --> 00:10:04.750
we get this string well,

216
00:10:04.750 --> 00:10:06.410
something else.

217
00:10:06.410 --> 00:10:08.523
And indeed we get try again.

218
00:10:09.380 --> 00:10:10.213
Okay.

219
00:10:10.213 --> 00:10:11.046
And with that,

220
00:10:11.046 --> 00:10:15.690
we finished this nice little quiz.

221
00:10:15.690 --> 00:10:17.650
Now,just to finish here,

222
00:10:17.650 --> 00:10:18.800
as a side note,

223
00:10:18.800 --> 00:10:21.680
sometimes we also need to convert a map back

224
00:10:21.680 --> 00:10:23.120
to an array.

225
00:10:23.120 --> 00:10:25.693
So basically to this structure,

226
00:10:27.130 --> 00:10:30.950
and we can do that, like this.

227
00:10:30.950 --> 00:10:32.560
So convert map

228
00:10:32.560 --> 00:10:35.483
to array basically.

229
00:10:36.710 --> 00:10:40.110
You can do that by simply building new array

230
00:10:40.110 --> 00:10:42.080
and then unpacking again,

231
00:10:42.080 --> 00:10:43.740
using the spread operator.

232
00:10:43.740 --> 00:10:45.843
The question map,

233
00:10:48.340 --> 00:10:50.500
it's asking us here again.

234
00:10:50.500 --> 00:10:52.950
And so then the result is essentially

235
00:10:52.950 --> 00:10:54.860
this same data structure.

236
00:10:54.860 --> 00:10:56.303
So the array of arrays,

237
00:10:57.500 --> 00:10:59.890
with which we started.

238
00:10:59.890 --> 00:11:01.630
So it's this one here.

239
00:11:01.630 --> 00:11:02.970
So in this case, of course,

240
00:11:02.970 --> 00:11:05.240
this wouldn't make too much sense,

241
00:11:05.240 --> 00:11:07.509
but it's still got to know that sometimes

242
00:11:07.509 --> 00:11:10.463
you can convert a map to an array.

243
00:11:12.030 --> 00:11:15.830
Let's just preset this here to some value

244
00:11:16.980 --> 00:11:19.223
so that it doesn't always bug us here.

245
00:11:21.150 --> 00:11:22.550
And by the way,

246
00:11:22.550 --> 00:11:23.817
there are also the,

247
00:11:26.200 --> 00:11:28.930
the methods that we had on arrays ,

248
00:11:28.930 --> 00:11:30.400
which are the entries

249
00:11:32.920 --> 00:11:35.160
and also keys

250
00:11:35.160 --> 00:11:38.030
and values

251
00:11:38.030 --> 00:11:39.823
in case that you need them.

252
00:11:41.230 --> 00:11:44.030
Okay, now they give us

253
00:11:44.030 --> 00:11:46.230
this weird iterator here.

254
00:11:46.230 --> 00:11:48.330
So then just as I showed you before,

255
00:11:48.330 --> 00:11:50.560
you have to spread them and put them

256
00:11:50.560 --> 00:11:51.453
in a new array.

257
00:11:53.540 --> 00:11:55.373
So like this,

258
00:11:57.870 --> 00:11:59.890
but this is not really that important.

259
00:11:59.890 --> 00:12:02.750
I just wanted to show you that this exists

260
00:12:02.750 --> 00:12:04.750
and for this,there's actually no need,

261
00:12:04.750 --> 00:12:07.450
because it's going to be exactly the same as this one.

262
00:12:08.800 --> 00:12:09.970
Okay.

263
00:12:09.970 --> 00:12:11.920
So these are all the keys

264
00:12:11.920 --> 00:12:14.193
and all the values in dit.

265
00:12:15.890 --> 00:12:18.470
Alright and that's all I have to show you

266
00:12:18.470 --> 00:12:20.830
about maps for now,

267
00:12:20.830 --> 00:12:22.680
but now you might be wondering

268
00:12:22.680 --> 00:12:24.280
when should I use maps?

269
00:12:24.280 --> 00:12:26.230
and when should I use objects?

270
00:12:26.230 --> 00:12:29.000
Because they are pretty similar, right?

271
00:12:29.000 --> 00:12:32.420
Well, that's what the next lecture is all about.

272
00:12:32.420 --> 00:12:33.940
There I will help you to choose

273
00:12:33.940 --> 00:12:36.210
between all the data structures,

274
00:12:36.210 --> 00:12:38.833
including even arrays and sets.