‫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 our starter 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.
‫I can write 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 pass 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 pallet, which is down here, or simply
‫you can use this keyboard shortcut.
‫So you should actually memorize this because this command
‫pallet 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 write 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 this 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 Destructuring.
‫So Destructuring 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 2.
‫It's also call it here.
‫Just book.
‫Okay.
‫And now again if you 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.title, right?
‫And now using the Quokka extension, we can see
‫that the title is The Cyberiad or something like that.
‫And indeed, if we go here to the book with the ID 2
‫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.author.
‫And then here, let's just see that.
‫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 at 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 'cause we're already
‫defining them up here
‫but nevermind 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's no titles property in the book object.
‫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 now, 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.
‫And so there's no need to lock all of them here now, okay.
‫So this is how this 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 a race,
‫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 the example, let's walk 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 destructuring.
‫So let's use destructuring.
‫So defining some variables.
‫And then here, instead of the curly brackets for the object
‫we use these square brackets, which is how we define a race.
‫Now here, primary genre and secondary.
‫And then simply equal genres,
‫give it a save.
‫And then here we have the exact same result.
‫So basically the first variable that we define here
‫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.