Jonas: So we learned about the for of loop
to loop over a race, which remember is an Iterable,
but we can also loop over objects,
which are not Iterable,
but in an indirect way.
Now we have different options here,
depending on what exactly we want to loop over.
So do we want to loop over the objects, property names
over the values or both together.
And let's start by simply looping over property names.
And so remember they are also called keys.
Now, ultimately we will still have to use the for of loop
to loop over the array, but again,
we're going to do that in an indirect way.
So we're not actually looping over the object itself.
Instead, we're going to loop over, an array.
So let me show you how.
So I'm going to call this day
and you will see in a moment why,
and now of,
and then I say object
dot keys
and we pass in the opening hours object.
And now lets simply to see what happens here.
Log the day variable to the console.
And then I will explain what happened here.
So indeed we get Thursday, Friday and Saturday,
which are exactly the three key names of the object.
So we can see that here.
So indeed Thursday, Friday and Saturday.
So let's take a closer look
at this mysterious objects dot keys.
And let's do that here before actually.
So let's just say properties, equal object
dot keys,
and then again, opening hours.
And now I want to take a look at the result here.
And so indeed it is an array with the three property names.
Okay. And we can actually also use this
to now compute how many properties are in the object.
So let's say we wanted to print a strings saying
how many days the restaurant is open.
That would be simple. Right?
We can just log to the console.
We are
open
on
and then
properties
dot length.
And now we get the number of properties here, of course.
And so that's three days. Okay.
And so this is also the array
that we're going to be looping over.
So properties.
And that's why I called this variable here day
because this array basically contains three days.
Now let's actually do something cool here.
And instead store this into a variable
and let's say open
and then STR for string
And tier a colon because now using the loop,
I will basically keep adding to this string.
So open string plus equal,
and then the current day,
so day and then a comma.
And so here we are then essentially building
just this string.
So that's similar to something we did already before.
And so the end is we are open on three days,
Thursday, Friday, Saturday.
Great. So that's property names. Let's write that here.
Okay. But what if we actually wanted
the property values themselves?
Well, then we would simply use
object
dot values.
So let's also store this here
and of course, then we need to pass in the object itself.
So that's again, opening hours
missing the equal sign.
And now let's just take a look at the values
and indeed, these are exactly the three values
that we specified right here.
So this value here,
right?
So open 12, close 22, this one and this one.
Right?
So before we had the keys, now we have the values
and there no needs to now loop over them again,
because it's going to work exactly the same as here.
Okay. But now to really simulate,
to loop over the entire object,
we actually need the entries.
And so entries is basically names plus the values together.
And we already saw the entries before.
So when we looped over
the array
and I think that's going to be somewhere down here
oh and actually I already passed it.
So indeed here it is.
So here on the array, we called this entries method.
And so the entries returned the index number
and the element itself.
And so we can do something similar on objects
and that will then also return the key and the value.
Okay, now it works differently on objects
because it's not going to be a method
that we call on the object itself.
So here we had the menu array
and then we did that menu array dot entries,
but now here we do it
differently.
So we use again object,
dot entries
and then we pass in once again, the opening hours.
So this distinction between the array and the object
is important as we loop over the entire object.
Okay. I actually run into that problem myself at some point.
And so that's why I'm telling it to you.
But anyway, let's store this again into a variable.
And so then you have all the three versions here,
nicely organized in your code.
And let's take a look here at the entries now.
And so as you might've expected, we now get an array.
So all of these keys, values and entries
basically transformed the object into an array.
And then here we have first the key
and then then value.
All right. And so now we can use this
to basically loop over the object.
So for, and now let's start by writing the of,
we'll just call it X for now. Then we will take a look.
So X of
the entries that we just generated
and then let's just log them to the console.
And so let me get rid
of this one here.
All right. So that's weird.
Oh, it's because of course I want to log X.
Oh yeah, that's correct.
So now we have each key and each value, all right.
Now we want to print to the console,
a string like this,
so on the weekday.
And so that is the key.
And so I'm using these variables here,
before I actually defined them.
So to make it easier to say what we want to define.
So for example, on Friday,
we open at,
and then we're going to have an open variable
and close
at
close.
So how will we do this?
Well, just like we did with the arrays,
we can use this structuring right here.
So let's do that.
The first one is the key.
And remember the second one is the value.
So we can do this,
but we already know that this here is an object, right?
And so therefore we can also immediately destructure
that object here.
So fair enough.
Open and close.
So the two variable names inside of that object
are open and close.
And so here we specify exactly these property names
and so they get destructured and therefore this works.
So let's see that again.
And so, yeah, so this is here the value basically
all of this.
Right?
And so here we have open and close.
And so that's exactly what we defined here as well.
And therefore, we then end up with the string here,
which got all of the data out of the object
into this nicely and neat string.
Alright.
So this part here is necessary
because the value itself is also an object.
But if you had a more simple object with a simpler value,
then you would, of course only do this here
as destructuring, just a key and a value.
And of course you could then give them other names
as you would like.
So here we can just call them day.
We can use any name that we want. Awesome.
So we're doing great progress here
and now it's time to practice that once more.
So I see you in the next coding challenge.