All language subtitles for 104 Destructuring Objects.en_US1

So we talked about these destructuring arrays,

but we can also destructure objects.

So let's do that now.

And this time let's actually write the code

before the previous lecture.

So write here after this restaurant object,

so that we don't have to scroll too much.

Also, I added this object here to the restaurant object.

And so that was already in your starter files,

but I didn't have it here yet.

Anyway, let's now talk about object destructuring.

And so to do that,

we use the curly braces to destructure.

So to destructure objects we use the curly braces.

Because this is also how we create objects, right?

Then all we have to do is to provide the variable names

that exactly match the property names

that we want to retrieve from the object.

So the obvious choice here of object to destructure,

is restaurant.

So let's take the name, categories and opening hours.

So again let's start with const

in order to actually define some variable names.

And now as I said,

we need to write the exact property names here

to now extract variables from this object.

Now, since in an object,

the order of elements does not matter,

we don't need to manually skip elements

like we did in an array.

So we can simply write name.

So that's the restaurant name here.

And then also remember that in objects,

the order of the elements does not matter.

And so we can also then take now the opening hours,

which is kind of the last property

and only then the categories.

And then we simply say equal restaurant.

So that's exactly the same as with arrays,

but now here we use the curly braces

and we have to specify the name of the properties.

But just like with arrays,

this now creates three brand new variables.

So based on this restaurant object.

So, let's see name, opening hours and categories.

And indeed here they are.

Okay.

So that's the fundamentals of destructuring objects.

And once again,

this is an extremely useful addition to the language.

Especially when we deal with the result of an API call,

which basically means to get data

from another web application,

like weather data or data about movies

or something like that.

And this data

usually comes in the form of objects basically.

And then destructuring is really a lifesaver.

It allows us to write a lot less code.

So this is really used in modern applications.

But now what if we wanted the variable names to be different

from the property names?

Well, we can do it like this.

Now, of course we still need to reference the property names

like we did before,

otherwise JavaScript has no way of knowing

what we actually want.

So let's write name again,

but then we can use the colon and specify a new name.

Let's say we actually want it to be called restaurantName.

And then here,

let's say we want the openingHours,

but we want the variable to be called just hours.

And then once again, we want to take the categories,

but we want the variable name to be called tags.

And then again, equal to restaurant.

And so the variables that we now created

are called restaurantName, hours and tags.

So basically this, this and this.

And VS code is nice enough to put them

in this purple color here too.

And so you see

that these three are actually the exact same name,

but we were able to give them new variable names.

Which again that's gonna be immensely helpful

when dealing with third-party data.

And another useful feature

for when we are dealing with third-party data like that.

So like an object that we get from somewhere else,

for example, an API call, as I was just explaining.

It can be really useful to have default values

for the case that we're trying to read a property

that does not exist on the object.

So usually then we get an undefined.

For example if we were trying to say restaurant.menu,

this would be undefined

because there is no property called menu.

We have starterMenu and mainMenu, but not just menu.

Okay?

And so we can set default values

just like we can actually in arrays.

So let's say that we are trying to destructuring the menu.

And so we use equal to set a default value, all right?

And then we can do the same with the starter menu,

for example.

And then we can even combine this syntax here

with what we did previously.

So let me show you.

So let's say that we're trying to retrieve the starterMenu.

So this one, but we then want to give it another name.

So starterMenu, and we want to call it just starters.

And we also want to give it a default value

in case it doesn't exist.

So in this case, just an empty array.

Now, in this case, it actually does exist.

So starterMenu does exist.

And so therefore this default value will not apply,

but it should apply to menu.

Because as I was just saying,

there is no property on the restaurant object called menu.

So menu and starters.

And so here indeed, we get the default value,

which is the empty array.

And here we get the starter menu.

And without this, we would then get undefined,

as I was saying.

You see?

And so this is a nice way of setting a default value.

And once again,

keep in mind that this is especially helpful

when we do not have or data hard-coded like we have it here.

So this is just hard-coded data in our application.

But in the real world,

we usually get the data from somewhere else.

And then we might not always know

how exactly the data looks like.

And so then it's useful to set defaults like this.

Next up, we need to talk about mutating variables

while destructuring objects.

So we did that before with arrays

when we were switching variables, remember that?

So let's see.

Down here, you see that we mutated these variables

that we created before.

But with objects, it works a little bit differently.

And so let's write that here, mutating variables.

And here let's write default values.

So let's say that we already have some variables here.

So a and b.

And then we have this object,

which has a property a of 23, property b of seven

and c of 14, let's say.

All right?

And now we want to destructure this object.

And actually let's first store it into a variable

that makes it a bit easier to work with it.

And so, now actually let us destructure this array.

Now we cannot say const like a, b,

because a and b are already declared up here, right?

We can also not do let,

because again, that would create new variables

and we already have them there, okay?

So here we are missing the object that we are destructuring.

But as I was saying, we cannot do this.

And so, in fact we want to mutate these variables.

So a should become 23 and b should become seven.

But now as we save this, watch what happens.

And so we get a syntax error.

And the reason for that

is that when we start a line with a curly brace like this,

then JavaScript expects a code block, all right?

And since we cannot assign anything to a code block,

like we did here with the equal sign,

then we get this error,

unexpected token with the equal there.

So to solve this here,

the trick is to wrap all of this into a parenthesis.

And so that's the thing that I wanted to show you here.

Okay?

So now if we log a and b, it will work.

So you see, now we get 23 and seven.

So basically we did override these two initial variables,

but in order to do it,

we had to wrap this destructuring assignment

into parenthesis.

All right.

And now, we already know how object destructuring works.

And so now we need to talk about nested objects,

just like we did with nested arrays.

So let's say we wanted to create two variables,

open and close.

And these should contain the open and close hours

for Friday.

Okay?

So you see that opening hours is an object.

And then in that object, we have another object.

So this Friday is an object inside an object,

which itself is inside the restaurant object.

Okay?

Now the opening hours is already an object here

that we have already stored in a variable.

So that's the object that we're gonna destructure.

So nested objects.

So again, we're gonna start with opening hours,

and now we want to retrieve Saturday.

So let's start with doing that.

So just Saturday for now, or actually a Friday.

So I think I said Friday.

So let's see.

And so indeed Friday is this object that we get here.

But remember that we actually want two variables,

one called open and the other one called close.

And this is how that works.

So we know that this is an object,

and now we can further destructure that object

using this syntax.

So the colon, and then again,

the exact property name of that inner object.

Okay?

So that looks confusing,

but that's just the syntax that we have to use.

So maybe you don't even need to memorize this,

but when you need this someday and you will,

then you can just come to this video and see how it works.

And so indeed now we get or numbers, 11 and 23.

And we could of course take this even further

and even assign different variables to these,

just like we did up here.

So with the colon again.

So we could call this one just o,

and this one just c.

So this is taking it to an extreme,

but as I said in the beginning,

destructuring is really powerful.

So there's a lot of stuff we can do with it.

And that's why I'm showing you all of it right now.

Okay?

And now to finish,

let me actually show you a really cool practical application

of this destructuring.

And for that, we're gonna go back to our object here.

So to our example of the section.

And now we will create another method.

So many times in JavaScript,

we have functions with a lot of parameters.

But then it can be hard to know the order of parameters

for someone that is using this function.

And so instead of defining the parameters manually,

we can just pass an object into the function as an argument,

and the function will then immediately destructure

that object.

So let me show you what I mean.

And let's say we want an order delivery.

So that's a new function.

Okay?

And so here, let's just for now call this argument object.

And then I will log that object to the console here.

And now let me call this actually.

And I will do it right here.

So that we can see everything at the same time.

So, that is restaurant.orderDelivery.

And now here comes that object of options.

So as I said, we can now specify some options here.

Let's say the time of delivery.

Let's set it to 23:30,

which is like 10:30 PM.

Let's also say address

Via del Sole, 21.

And then we also specify the main index

and the start index.

So a little bit,

like we did up here in this function.

starterIndex.

Okay?

Oh, and here we need to also give it some value.

Let's just say two as well.

And so...

Yeah, here right at the beginning is that object

that we just defined

because here we are simply logging it for now, okay?

So what we just did was to call this function here

and passing in an object of options.

And that's a pretty standard thing actually in JavaScript,

especially in third-party libraries.

Because now, here in the function arguments

we can actually do destructuring right away.

So we can now say starterIndex, mainIndex, time and address,

which is exactly the four property names

that we have down here.

And of course,

usually we would first develop the function

and then call it.

But I wanted to explain you this way of calling a method

with an object,

so that writing the object here then makes sense.

All right?

And so now instead of the object,

since we did destructuring right here,

we now actually have four variable names.

So we can log them through the console

or actually let's do some nice string here.

So let's say order received.

And then let's get to food.

So based on the starter index,

let's just copy that from here.

So this starts starterMenu at the current starterIndex,

and then also the mainMenu.

So let's again copy that, actually all of this from here.

And we need the curly braces and this dollar sign

will be delivered to,

then the address and then the time.

Okay?

And so indeed,

we get this complete string based on the data that we passed

in this single object, okay?

So that's important to realize.

We only passed in one object into this function, okay?

We did not pass four arguments.

It's really just one argument, one object.

Then here in the function,

as we receive that object, we do immediately destructuring.

And so that's why these names here

need to be exactly the names that we have down here

in the object.

But what's great about this,

is that here the properties in the index

don't have to match the order

in which we do destructuring up here.

And so that makes it really easy

for the user of this function

to specify basically the arguments, all right?

So this is great,

but we can even use some more knowledge that we gained here,

which is these default values.

So we can now use this to basically set defaults here

on some of these.

So let's say that the starterIndex will be one.

If it cannot be destructured,

enter the mainIndex will be zero.

Enter time will be 20:00.

And so now as we call

this our method restaurant.orderDelivery,

I can specify the address again.

Let's actually a copy it from here.

And let me also just specify the starterIndex.

Okay?

But then the rest will be taken from the default values

that we set here for destructuring.

All right, and so here as the second string,

we get will be delivered to Via del Sole at 20:00.

Okay?

So in this object that we passed,

we do not have any property for the time, right?

And so then as JavaScript did destructuring,

it here took the default value of 20.

Okay?

And the same happened for the mainIndex

that we also did define.

So it shows zero and zero is a pizza.

And that's why we get pizza here in the output string.

All right?

So if you ever need to write a function like this,

so a really complex one with a lot of parameters

that might be then hard to specify,

keep this technique in mind.

And this becomes even more useful

as the amount of parameters increases.