All language subtitles for 2. Destructuring Objects and Arrays

So let's start this JavaScript review section with the very important concept of Destructuring.

And as always, I will start by creating a new folder here which I'm simply calling JavaScript review.

And then we need to get or start our files from the GitHub repo that we downloaded already in the beginning

of the course.

So let's select Script.js here from the starter folder.

And then let's paste that into the project folder that we just created.

And now to open up this folder, I will simply drag and drop this folder onto the VS code icon right

here, which then sets it as the project folder.

And alternatively, if that didn't work for some reason, you can of course always open up a project

folder simply by clicking here on Open.

Right.

But anyway, let's open up or script.js here and as we see it already contains some starter data.

So we have this array here which contains five book objects.

So we have one object for each book which has a title, a date, and so on.

So all the relevant stuff about books.

And then also I created two functions down here.

So this get books will basically simply return this data here.

And then we have get book by ID, which basically simply returns the book with the ID that we passed

in here.

All right.

So, again, this lecture is about destructuring.

And to start, let's create a variable called books, which will simply be the result.

Of calling get books now in order to actually execute this code.

We will now use a special extension for that which is called.

Quokka.

So just go ahead and download this extension, which will allow us to run some JavaScript code right

inside of VS code.

So without us having to connect this script with some HTML file for example.

So very helpful.

And then to start Quokka on this file, we can come to our command palette which is down here.

Or simply you can use this keyboard shortcut.

So you should actually memorize this because this command palette is really useful all the time.

So to start Quokka now on this file, you just type Quokka and type it correctly and then start.

So then it is this one.

So start on current file, hit enter and you see that immediately it opened this panel down here.

So in this output tab.

And also it activated this tool here on the left side.

And so now this code is actually already being executed.

But to see anything we can, for example, simply right now, this variable so this books that we already

have and it will immediately print it down here to this kind of console, it will show up here on the

left side.

So in this extension here in this tab and also it shows right here inside this file.

So this is actually really helpful, especially for smaller values.

So when you have an object, it's easier to check it out here in the sidebar.

So here we can now see this entire array and all the objects that are in there.

Okay.

And now with all the setup in place, let's actually quickly talk about the structuring.

So the structuring is very, very useful all the time.

Whenever we need to basically get some data out of an object or out of an array.

So for example, let's say we needed the title and the author of a certain book.

And to demonstrate this, let's actually use get book here with some ID, for example, ID to.

It's also called a tier just book.

Okay.

And now again, if we wanted to take the title.

Out of this book object.

So let's say.

We wanted to create a new variable called title.

We could do book.

Dot title.

Right.

And now using the extension, we can see that the title is the Cyberiad or something like that.

Right.

And indeed, if we go here to the book with the ID two, then we get exactly that title, right?

And of course, we can take other data out of this.

For example, let's say we wanted the author as well.

We would do Book dot Author.

And then here.

Let's just see that.

And.

Okay.

And by the way, we can also simply do console dot log.

Which will get a similar result.

So again, this author here.

But then we can do multiple at the same time, which can be a bit more helpful.

Now, reading data from the book object like this can become a little bit cumbersome, especially when

we have lots of properties that we need to take out.

Then we would have to write one line of code for each of these properties.

So that's really not ideal.

And so that's why we have object Destructuring.

So with object Destructuring, we can simply create these new variables all at once.

So let's again say title.

And author.

And right now vs code is complaining because we're already defining them up here.

But never mind that for now.

And so then here we simply specify the object out of which we want to take the title and the author.

And that's actually it.

So let's comment out these two and then we see that we get the exact same results down here.

Now here, what's crucial is that we actually give these variable names here exactly the same name as

the properties in the object.

So if we had titles here, then that would not work.

So you see that it would then be undefined here.

And that's because there is no titles property in the book object.

No.

Okay.

So really, really helpful all the time, especially whenever we get some data from an API, which is

basically what we're simulating here with this get book function.

So this is of course not an asynchronous function, but it simulates that we're getting this book from

some kind of API that's abstracted behind this function.

And so then once we get that data, usually as an object, we can then destructure all the properties

out of there that we need.

And actually let's take out some more properties, Let's do pages.

Let's do the publication date.

Let's do the genres.

I think that's what it's called and then has movie.

Adaptation.

All right.

So again, let's just.

Basically lock the book here so that we can have it here on this left sidebar.

And so then here with this, we can easily see all the properties that are inside the book object.

And so these ones are the ones that I'm taking out now basically out of the book and storing them into

their own variables.

So there's no need to log all of them here now.

Okay, so this is how Destructuring works in a nutshell for objects.

There's actually some more stuff that we can do, but I will not go into that here.

And instead, let's now move on to Destructuring with arrays, which is pretty similar.

But instead of relying on the property names, it simply relies on the order of the elements in the

array.

So for this example, let's work with the genres array.

So we'll just lock it here.

So that we can see what this array looks like.

So this is the array that we're going to work with, and it has all these five genres that the book

belongs to.

And so let's say that these genres right here are basically ordered by importance.

And so the primary genre is this one, this one is the secondary one, and these other ones are not

that important.

So let's say that we wanted to create a variable called.

Primary.

Genre.

I'm not sure if I'm saying that right.

But that doesn't really matter.

So we could do genres and then taking out the first element.

And then for the secondary genre, we could simply do this.

Let's log it to the console.

And here again, I'm using that snippet that we defined in the previous section.

Remember that?

So primary genre and the secondary one.

And so indeed, we get science fiction and humor.

But again, this can be done in a better way using the structuring.

So let's using destructuring.

So defining some variables.

And then here, instead of the curly brackets for the object, we use the square brackets, which is

how we define arrays.

Now here.

Primary genre and secondary.

And then simply equal.

Generous.

Give it a save.

And then here we have the exact same result.

So basically the first variable that we define here in this in this way, in this destructuring will

take the first element out of the array and assign it to this variable.

And then here, of course, the second one.

So it takes the second element out of the array and assigns it to this variable.

And of course we could keep going.

But here we are only interested in the primary and in the secondary genre.

So we take these two out of this array by using array destructuring.