All language subtitles for 013 Destructuring_en

Now related to arrays and objects,

there are two crucial,

relatively new and modern JavaScript features

you should know because you will also see them quite a bit

throughout the course.

And the first feature

is about destructuring arrays and objects.

For that, let's take a look at this array.

An array that contains some userNameData.

The first name and the last name.

Of course, it could be stored in an object

but here it's an array.

Now, let's say, in our code,

we wanna work with both the first and the last name.

Now what we could do to make it a bit easier

is we could create a new constant

or a variable called firstName

where we extract the first element of this array,

which is the first name, by using index zero.

And then we could add a lastName

where we also use userNameData

and use index one to extract the lastName.

This could be done.

And from now on, we could use firstName and lastName

which is a bit more meaningful than always working

with userNameData zero and userNameData one.

But this code can be shortened.

Instead of using this code here,

we could create these two constants

or variables in one single step

by adding square brackets here

on the left side of this equal sign.

On the right side, they will create a new array.

On the left side,

they will destructure that array,

which simply means that this syntax

can be used to pull values out of this array.

And now you can define new constants

or variables with any name of your choice here.

And the first constant or variable here

will be mapped to the first array element,

the second one to the second element, and so on.

And this is a super useful syntax since this, of course,

is way shorter to write than what we had before.

And from now on, I can also console.log firstName

and console.log lastName,

and use these constants like this

even though the original data is an array.

But due to restructuring,

we can pull out these values

and store them in separate constants or variables.

So if I reload this page here,

I see Max and Schwarzmuller here in the console

because of these two constants that are created with help

of this destructuring syntax.

Now, this destructuring syntax also exists for objects.

We cannot just use it for arrays.

For that, let's say we had a user object

that looks like this.

Now again, we might want to store these values

in separate constants or variables.

For that, of course, we could create a name constant

and store user.name inside of it

and an age constant and store user.age inside of it.

That would work, but again, this can be shortened here.

Instead of writing this code,

we can again use destructuring.

In this case, since we're dealing with an object

by writing curly braces on the left side of the equal sign.

On the right side, they will be used to create an object.

On the left side, they are used for destructuring.

Just as we used square brackets

on the left side for destructuring an array before,

now we're using curly braces to destructure an object.

And then here we can pull out name and age.

Though, these names here are now not up to us.

Instead, we have to use the field names

that are defined in the object.

For array structuring,

these names were up to you because the elements

were pulled out by position.

For the object,

they are pulled out by name, so by property name.

And therefore you have to use the same property names here.

Though, you could assign an alias

by using a colon here,

and then defining your alias name

on the right side of that colon.

When creating an object,

so when using the curly braces

on the right side of the equal sign,

the colon is used to separate the key of a value,

the property name, you could say,

from the value that's stored under that property.

When using curly braces

on the left side of this equal sign,

so when using them for destructuring,

the colon is instead used

for separating the property that's pulled out of this object

from the alias name that should be assigned to it.

And with that here, we could output userName and age,

and we would be using these destructured values for that.

So therefore, again, if we reload this,

we would see these values here.

And this destructuring syntax

really is a crucial JavaScript feature

which we'll use a lot throughout this course.

And therefore now, you know about it.