So let's continue learning about maps.
So in the last video we created an empty map
and then edit elements
to it by using the set method.
Remember, however,
there is actually another way of populating a new map
without having to use the set method.
And I prefer that because the set method
is a bit cumbersome when there are a lot
of values to set.
So instead we can create a new map like this.
So I'm going to call this one question,
because now we're implementing
something like a quiz.
So in a very simple way,
so a new map,
and then here we can pass in an array
and disarray itself will contain multiple arrays.
And in each of these arrays,
the first position is gonna be the key.
And the second position is gonna be the value.
So let's do that.
So let's say
question,
and then what is the best programming language
in the world?
So this is basically the first entry of
this question map.
So before we would have used the set method
and then this as the first argument
and this as the second,
but now we can simply specify a disarray
of arrays
in this.
wait
Now, next up,
I want to specify the options
for the answer basically.
And so I can simply do that by their number.
So the first answer is going to be C
so C the programming language.
The second, will it be Java.
And the third will be, of course, what else? Java script,
then we need a key for the correct answer.
And what do you think the correct answer is?
of course, number three.
And then we can also have like a success message
and an error message.
And so let's again,
use the Boolean keys, so true,
which is basically when the user is correct,
then we can say correct.
And maybe some kind of emoji here,
like this one,
but if it's wrong.
So if the answer is false,
then try again.
All right.
And so let's take a look
and that looks correct.
Fantastic.
So when creating a new map from scratch,
directly in the code,
I actually prefer this way
of writing it over the way that we did
in a previous lecture.
But when we keep adding new elements,
programmatically using code,
then of course the set method is still the way to go.
Now, as an aside,
does this kind of structure here?
So disarray of arrays look kind of similar to you?
Well, I hope it does
because this is exactly the same array structure
that is returned
from calling object dot entries.
So for example,
on the opening hours object.
And so you see that they're two,
we get an array of arrays where the first element
is the key and the second one
is the value.
And so what this means is that there
is an easy way to convert from objects to maps.
So let me write that here,
actually convert object to map.
And so we can say ours map
is a new map
and then simply
with object dot entries
of opening hours.
Alright, so again,
because this structure that results from object dot entries
is exactly the same as this.
So an array of arrays.
So indeed, now we have a map here
and so keep this small trick here in mind,
whenever you need a map,
when you already have an object.
Next up, let's talk about iteration
and iteration is possible
on maps because as we already know,
maps are also iterables.
And so the for loop
is also available for them.
And so let's use a for loop actually
to now print,
just these options here
to the console.
So these three,
all right.
So as always,
I like to start
with first saying what we will loop over.
And so that's gonna be the question map.
And so each item
of the question will just like before contain both the key
and the value.
And so here I can now directly restructure that
into two separate variables.
So this is a really,
really good use case of restructuring.
Alright, so just to reiterate,
this is exactly the same as we did
when we looped over the object.
The only difference is that for the object,
we needed object dot entries right here.
And that's just because the object
is not an alterable,
but then we converted it
to an alterable using object dot entries.
And so then this part here
is exactly the same.
Okay.
Now keep in mind.
We only want to print these three.
So essentially we only want
to print an element if the key is a number.
So let's use what we already know,
type off key, equal number,
and only then look to the console.
So inside here, answer,
and then the key.
So the number for the person then to choose
with the correct value,
which is going to be the answer option itself.
So here we go.
Answer one, two, three,
and now let's just also log the question itself.
So quiz app,
and here we want question dot get, remember,
and then the question key.
And so now it is complete with question and answers.
Now to get the answer from the user,
let's again, use a prompt,
so answer equal a prompt,
and let's ask for your answer
and answer.
And remember, we need to convert this now to a number
because eventually we will compare this number
with the key that we have here.
All right.
Let's just print it then also.
Okay.
So here we have to question,
and of course the correct answer
is number three.
And so here we go.
And now we can use the power
of the Boolean keys here in order
to print either the success message here
or the error message basically.
All right.
So do you think you can do that
on your own?
Just take a minute or two and try that
on your own right now.
So did you manage to do that?
Well, let's start by comparing the answer
with the correct answer, basically.
So that is a question dot get correct.
And so this is a three, right?
And then we can compare that to the answer.
So in this case,
this was also three.
And so this here,
what return true.
Correct.
And now, since this is true,
we can directly plug that
into the map.
And so this true will then return correct.
So that's similar to what we did
in the previous video as well.
And so again,
we are using the power of having Boolean values as keys,
and then let's just log that final message
to the console.
So three again, now,
and something went wrong,
but I see that it's just here.
It's the name?
So this is correct.
Not correct.
So again three
and now
indeed we get correct.
Okay.
So this is three here.
The answer is three,
this is three.
And so this here will be true.
And so when we get a true
from the map,
we get this string well,
something else.
And indeed we get try again.
Okay.
And with that,
we finished this nice little quiz.
Now,just to finish here,
as a side note,
sometimes we also need to convert a map back
to an array.
So basically to this structure,
and we can do that, like this.
So convert map
to array basically.
You can do that by simply building new array
and then unpacking again,
using the spread operator.
The question map,
it's asking us here again.
And so then the result is essentially
this same data structure.
So the array of arrays,
with which we started.
So it's this one here.
So in this case, of course,
this wouldn't make too much sense,
but it's still got to know that sometimes
you can convert a map to an array.
Let's just preset this here to some value
so that it doesn't always bug us here.
And by the way,
there are also the,
the methods that we had on arrays ,
which are the entries
and also keys
and values
in case that you need them.
Okay, now they give us
this weird iterator here.
So then just as I showed you before,
you have to spread them and put them
in a new array.
So like this,
but this is not really that important.
I just wanted to show you that this exists
and for this,there's actually no need,
because it's going to be exactly the same as this one.
Okay.
So these are all the keys
and all the values in dit.
Alright and that's all I have to show you
about maps for now,
but now you might be wondering
when should I use maps?
and when should I use objects?
Because they are pretty similar, right?
Well, that's what the next lecture is all about.
There I will help you to choose
between all the data structures,
including even arrays and sets.