All language subtitles for 114 Looping Objects_ Object Keys, Values, and Entries.en_US1

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.