Let's now talk about a new way of looping over arrays,
which was introduced in year six.
And that's the for-of loop.
And let's say we wanted to loop over our entire menu here.
So let's start by creating again,
the array with the entire menu.
And for that we expand restaurant dot starter menu
and restaurant dot main menu.
So nothing new at this point.
Now you already know how to loop over this array
with a regular for loop, right?
So you would have to go through all the steps
of setting up a counter, a condition
and also update the counter.
And that's a lot of work.
And so that's why we got the for-of loop now
in which you don't need any of that.
It's so much simpler.
And this is how it works.
We still write for and then we create a variable here,
let's just call it item for now
and then of menu.
And then we can log to the console simply this item.
So let's see if that works
and then I'm gonna explain why it works
and what this loop does.
So indeed we got all our elements here now,
individually logged to the console.
So this for-of loop,
which is called for-of
because it is for and then item of the menu, right?
So this loop will automatically loop over the entire array
and in each iteration,
it will give us access to the current array element,
which we can specify here.
So in this case it's called the item,
but of course we could call it anything that we want.
And so if we simply log the current item
down to the console,
well, then this is here what we get.
Simply each element logged one by one.
And that's because again,
the item variable is always
the current element in each iteration.
And also just like in the if else statement,
we don't need to create a code block
when we only have one statement here to execute, okay?
So that's pretty simple,
but it's a really nice level of obstructing
over the regular for loop.
So we can do the same thing with this one,
but without having to worry about
all the underlying details
such as counters and conditions.
What's also great about the for-of loop,
is that we can still use the continue and break keywords.
And this is important because in the next section,
you will learn other ways of looping arrays
and in those ones,
you will not be able to continue or to break.
So you will need to keep that in mind.
But now what if we also wanted the current index
and not just the current element?
Well, in the for-of loop,
it's actually a bit of a pain
when we need that index,
because originally the for-of loop
was really just meant to give you the current element.
However, you can get both
and you will have to do it like this.
So for and then again,
let's just call it item,
but now instead of just menu,
we now need to call the entries,
a method on this array.
So entries and then let's take a look at the item.
And so as you see,
each of the item is now actually an array
with the index in the array element itself.
So let's quickly take a look at
what this mysterious menu dot entries actually is.
So menu dot entries,
and so here we get this weird array iterator.
And so that's not really helpful,
but we will learn about iterators
by the end of the course.
But if we want to take a look at this,
we need to essentially expand this here,
using the spread operator
and then create a new array based out of that.
So again this is really just to take a look
at what menu dot entries actually is.
And so we see that it is basically an array,
which in each position contains a new array,
which contains the element,
so the element entity index number of that element
in the original array.
And so that's why we get,
zero, one, two, three, four, five, six,
plus all of the original elements of the menu.
And that's also the reason
why then we get this output from this loop now.
Because here we now basically have that array.
And so now each item of that array is,
well, this new array.
And so now if we wanted to like print a nice menu,
then we could take advantage of this data now.
So let's not log something nicer here.
So a template string.
So let's take the first element which is zero
and then let's actually add one to it
so that we can start the menu at one.
So here we're basically gonna display like a nice menu
in a real restaurant.
And so there the numbers don't start at zero, right?
And now here then the actual item itself,
so that's at position number one.
And so that looks quite nice, doesn't it?
So this works great here,
but we are actually at this point
smarter than doing it like this.
And that's because if item is now an array,
we can de-structure it.
We don't have to manually take element zero and element one,
that is the old school way.
So let's now do it in a better way.
And so we can actually de-structure the item,
array here, right here.
All we have to do is to use the de-structuring assignment
and then create the two variables that we want.
So let's call it i and el for element.
So here we can use i and here element.
So that's checked out and indeed it works the same.
And so once again these structuring
made our lives a little bit easier here.
So it's a really great addition
to the JavaScript language here once again.
And the same is of course true
for the for-of loop itself,
which also makes it a lot easier
to loop over arrays.