All language subtitles for 008 Destructuring_en

So we learned about rest and spread.

There's one other next generation feature I definitely want to cover and that's called destructuring.

Destructuring allows you to easily extract array elements or object properties and store them in variables.

When you first hear about that it might sound like the exact thing the spread operator does but actually

it's a different thing.

Spread takes out all elements all properties and distributes them in a new array or object or wherever

you're using it.

Destructuring allows you to pull out single elements or properties and store them in variables for arrays

and objects.

Now for arrays it looks like this.

If we have an array with two elements.

Hello and max then we can use these strange looking syntax on the left side of the equals sign which

looks like we are creating an array but we are not to assign the variables a and b to a Hello and Max

respectively and for object destructuring it's the same syntax with curly braces and where in array destructuring

the order defines which property we take, for object destructuring.

It's the property name so curly brace name curly brace on the left side targets the name property of the

object on the right side and pulls out the value which is why logging age would yield undefined.

We're not pulling this out of the object here.

So this is destructuring.

Let's also have a look at this in practice back in jsbin,let's start with our numbers array again

which has the numbers 1 2 and 3.

And now let's say we want to get the numbers 1 and 2.

Then we can use this array syntax on the left side of the equal sign and choose any variable names of

our choice like num1 and num2 and we assign this equal to the number as array.

If I now console log num1 and num2 and I run this you see 1 and 2 being logged because I'm

pulling these two out of the array.

I'm not pulling 3 if I want to get three.

By the way I'll simply add num3 here.

You don't have to rename it though and you'll leave out the one space with an empty space here in your

declaration on the left side.

Now if you had run you get one and three.

That's array destructuring.

Now object destructuring is also supported by our project as we'll use it in this course.

However it's not supported by jsbin here.

So I can't show it to you.

But I did show the syntax on the slide.

It's the syntax where you use curly braces on the left and target a property with its property

name.

In this course I won't use these destructuring syntaxes too often but I want you to be aware of the existence

of them and that they are nice ways of conveniently pulling out certain elements from an array or properties

with their values from an object.