Original subtitles

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.