Original subtitles

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.