Let's start this section
by learning about array destructuring.
So, as I said in the intro video,
in this section we're basically gonna continue learning
basic syntax and basic JavaScript features,
but now with a focus on more modern JavaScript.
And the theme of this section
will be to simulate a foot delivery application.
And in specific one Italian restaurant
which is this starter data here
that we already have in the starter files.
And so this one is called Classico Italiano.
So I already opened up the starter files here
for this project.
Okay.
Now learning complex topics
like the ones we're gonna dive into in the section
is really best done in isolation.
This way you can understand exactly
what I'm trying to teach you
without having to think about
five other things at the same time.
And so I'm isolating just this one restaurant
and building no user interface
so that we can focus just on the JavaScript language here.
And some people will say that this is boring
but believe me, I do have enough teaching experience
to know that some topics are best learned in isolation.
And for me, the most important thing
is that you will actually learn in this course.
Now of course,
there are also topics that can be applied
to a visual project.
And that's why in the next section,
we have a really, really cool project
with an amazing user interface
where we're gonna learn about array methods,
but for now let's focus on built in data structures
and modern advanced operators.
And again, starting with array destructuring.
So destructuring is an ESX feature
and it's basically a way of unpacking values
from an array or an object into separate variables.
So in other words destructuring
is to break a complex data structure down
into a smaller data structure like a variable.
So for arrays we use destructuring
to retrieve elements from the array
and store them into variables in a very easy way.
So let's just actually start with a very simple array.
And now if we wanted to retrieve each one
into its own variable without destructuring,
we would do it like this.
Let's say we wanted to name them A B C.
And so we would write the name of the array,
which I totally forgot appear.
So our zero and then just duplicating this line
which I'm using command or option L four.
And I'm not sure if that is actually a shortcut in VS code.
Let me see here.
And apparently it's not, let's see here duplicate selection.
So it's this duplicate selection here
and you can set up a shortcut for that.
And so I will just do that.
So B and so that would be element number one
and number two would be C.
So that's how we would retrieve these three elements.
But now with destructuring
we can actually declare all the three variables
at the same time.
So let me show you how so const
and then we use the square brackets.
And so that's because we are, destructuring an array.
And so now we can declare three variables at the same time.
And now I'm not using A B and C
because we already used them.
So let's go with X Y, and Z,
and then I will simply set that equal to the array.
And that's it.
No, let's actually see them now in the console
give it a save, and then we need to start our live server
with a new terminal.
And actually I can hit the tab key now
and it will then automatically write
the rest of the command,
then close that down.
And as you can see
here we get to two results, two, three, and four.
So the elements of the array.
So basically we write this syntax here
and then this will become the first element of the array,
this the second and this the third.
And so this here is destructuring this array here
from the right side.
Okay.
And of course this looks like an array, but it's really not.
It's just the destructuring assignment.
So whenever JavaScript sees this here on the left side
of the equal sign, it knows that it should do destructuring.
Now, when you do this just don't forget
to actually also declare the variables using const.
Okay.
And I also wanted to notice that
even though we did destructuring
which sounds kind of distractive right?
The original array is of course not affected.
Okay so we are not destroying here the array
we are only destructuring so we are unpacking it, okay.
And now let's work a little bit with the data
from our restaurant.
So here we see that we have a couple of arrays actually.
So the categories, the starter menu and the main menu.
So let's take some elements out of the categories.
So let's say
and then the destructuring assignment
first and second, alright.
And so now you see here
that we do not have to take all of the elements
out of the array.
So this will just take the first and the second.
So it will simply follow the order of the elements here
and we'll basically only take these two.
And so now the array from which we want to extract
and that's restaurant.categories.
Just to take a look now
and indeed we get Italian and pizzeria
which are exactly the first two elements of the array.
But now let's say
that we only wanted to take the first category.
So this one and a third.
So let's say that this one is the main category
and this is the secondary for some reason.
Well, to do that
we simply leave a hole in the destructuring operator.
So what I mean is just this.
And so now the second element will be skipped
to the one that would go here
and then this second year simply becomes this third element.
And now, so you see it a second now is vegetarian
which is element number three alright.
And so like this, we don't have to create a variables
for all the stuff that we might not even need.
So if we only need to take this and this,
we just skip the element in the middle okay.
And this is really powerful.
And we use destructuring to do a lot of cool things.
For example, let's say that the owner
of the restaurant now decided to switch the main
and the secondary category.
So right now the primary is Italian
and the secondary is vegetarian
but now they wanted to switch it.
So let's first change the name here
to main and secondary, just to make it a bit more obvious.
secondary.
And so if we were to like to switch these two variables,
then without destructuring,
we would have to do it like this.
We would need to create a temporary variable,
and then so that we would assign one of them,
so let's say main,
and then we could switch to main.
We would say main is equal to the secondary
and then secondary is equal to temp
because that's where we temporarily stored
the value of main, right?
We could not just do main equal secondary
and then secondary equals main
because by then we would already have overwritten
the main variable, right?
And that's why we need this temporary variable
in the middle.
So that's how we would do it,
but with destructuring we can make it a lot easier.
And this is how we do it.
First, we create an array with both of them
and the first one is gonna be the secondary
and then the second one will be to main.
And actually, before we do that
let me just show you that this worked.
So main and secondary
and so now we should see them switched.
Oh okay.
Here, we need to change of course, to let,
because we are reassigning here to a const in line 24.
So let's try that now.
And indeed, what was Italian is now vegetarian
and what was vegetarian is now Italian.
So this year worked indeed, but let's now take this out
so that we can do it using destructuring.
So as I was saying, in order to switch to two variables
using destructuring, we would first start
by creating a new array with the two variables inverted.
So first secondary and then main,
and then we can simply distract them.
So main and secondary equals the destructuring
of this array.
And now we're not using let or const here
because we are simply reassigning the values
of the two variables.
So just like we did here,
but now we do not need a temporary variable in the middle.
So let's check now.
And indeed the result is the same, but this is a lot easier.
And this is a trick here that I actually use all the time.
So let me just show here
or actually write here, switching variables.
Okay.
So that's a pretty cool trick.
And another trick with destructuring
is that we can have a function, return an array
and then we can immediately destruct the result
into different variables.
And so this basically allows us to return multiple values
from a function.
And so let's try that and write a function to order food.
So here in our restaurant
let's now add a method
and I'm gonna call it order.
So this will be a function
and it will accept two parameters.
one index for the starter menu.
So this menu and then one index for the main menu.
And then the person will order basically
by giving the index for eat of the menus.
So something very simple just to illustrate the point here.
So let's say starter index and main index.
Okay and so we will simply now return
the content of the arrays based on the given indexes.
So return and so, as I said,
we're gonna return an array and then we go to
this.startermenu okay.
And remember how the this keyword here is set
as we learned in the last section.
And so now we go to the position of the starter index
that we pass into the function.
Okay that makes sense?
Then the same with the main menu
at the position of the main index that has passed in.
Alright.
So here we are, of course not doing any destructuring yet
but now is the time where we will do it.
So let's call order or in fact restaurant.order
and let's use two and zero.
So we want element number two from the starter menu.
So the garlic bread and the number zero from the main menu,
which is pizza.
So we're gonna receive an array with that, right?
Let me just show that to you.
And indeed it is garlic bread and pizza.
And so now we can simply distracter that.
So this is the destructuring assignment.
And so let's say starter and main
should equal these two results.
So that's logged them starter and main.
Oh, and now this was already defined before.
So let's just call this one here, the main course.
And now indeed, we get the garlic bread and pizza.
Alright, so this is how we basically receive
two return values from a function.
Alright, so of course
we could have done that without destructuring
and still return an array from the function,
but this is a very handy way
of then immediately creating two variables
out of one function call.
Okay.
And now that you understand how destructuring works
let's take it one step further
because what happens if we have a nested array?
So let's say nested
and with nested, we mean one array inside another.
So let's say
that we know here have another array, five and six.
So an array inside an array.
And I'm not sure if we did that before,
but of course that's perfectly acceptable.
So as a small exercise
how can we get this value here and this entire array?
Well, we simply define two new variables
using the destructuring assignment
and let's call them I and J
and remember that we do not want in the middle,
so we just skip it.
So simply leave a space and then another comma
and then this one is gonna be J
equals two the array from which they should be taken.
And indeed we get the number two
and then the array five and six.
Great, but what if we actually wanted
all the individual values?
Well then we would essentially
have to do destructuring inside of destructuring.
So that sounds complicated, but it's not.
So let's take out these here
and let's create now three variables.
So one for this one for the five and one for the six.
So we're gonna skip the four again.
So that's gonna be I then again the whole here
and now here we can destruct
this inner array immediately.
So we used the restructuring here again
into now J for the first element and K for the second.
So four, five, and six.
And then again
the array from which to take, and then let's take a look.
And so this should now give us two five and six
as separate variables.
And yes so that's how nested destructuring works.
Basically we need to do destructuring
inside of destructuring.
Okay.
And now to finish there is just another feature
of destructuring that I want to show you.
So we can also set default values
for the variables when we are extracting them.
And that's gonna be very useful in the case
that we don't know the length of the array,
and this can sometimes happen in real world applications,
as you will see later.
So if we have an array that is shorter than we might think,
then we might try to unpack the array
in positions that don't even exist.
So let me say here just default values
and here nested destructuring.
So learning a lot of stuff here about destructuring.
And so let's now say that we have this array
eight and nine,
and then we are trying to distracture it.
So just pretend
that we actually don't know the array alright.
And so we might try to take
three elements out of the array using again destructuring
so let's call them P Q and R.
And then let's try to lock them all P Q and R.
And so now here we get undefined as the third one.
So this would basically be the same
as trying to read the element at position number two
of this array
but it only has elements at position zero and one.
And so therefore we then get undefined.
But as I said, we can set default values.
So that's simply set them all to one
and then, our R will become one.
Great.
And if we remove this element, then Q will also become one.
Okay.
And as I said, this can sometimes be useful.
For example, when we get data from an API.
And so we're gonna probably use this one
and actually everything that we did in his lecture
a bit later in the course.