Hey guys. In this lesson I want to go over this concept of destructuring, so destructuring objects, destructuring
arrays.
And the goal of this lesson is to really make it clear in your mind how destructuring works in JavaScript
ES6 and get really used to the syntax.
Now if you're already pretty familiar with this concept of destructuring and you've already used it
and you have no problems using it at all, then feel free to simply just complete the challenge and if
you can complete it without any problems then feel free to skip this lesson.
So the idea is to uncomment all of the code below the challenge line and what we want to happen is to
render the stats that come from our practice.js file where there's a constant called cars. And
this is a relatively complex structure.
It's an array with two objects inside the object.
There's other nested objects and there's also other nested arrays.
So the idea is to not change any of this code here and try to use these names of variables to make this
work by destructuring the code from our practice.js file.
Here's what you should be able to achieve once you complete the challenge.
We have this table over here with the brand, the top speed and the top color. And all of this data is
being pulled out from our cars array.
The model corresponds to this first column and then the top speed corresponds to this property topSpeed
and the top color is the first color in the array.
Now don't worry if you see these errors in the console. It's not related to any of your code.
It's to do with how we're structuring our HTML that React doesn't like.
But I wanted to keep the table simple so we can focus on destructuring.
So the idea is to make the errors go away without touching any of the existing code and just adding
some code right here to destructure the array inside practice.js.
And if you can complete this without problems, then I'm happy for you to skip this lesson. But if you
are
not sure where to start or if you get stuck during the challenge, then I recommend watching this video
where I'm going to dive deeper into how to destructure nested arrays how to provide default values and
all of that.
So let's get started by forking a copy of the starting sandbox. And to start off
I'm actually going to ignore this entire challenge and
I'm just gonna make some space for myself inside the index.js. And we're not gonna be working
with the practice.js data yet.
We're going to start off using this file called data.js. And I want to quickly reiterate some
of the things I spoke about when I first introduced you to this concept of destructuring.
So here we have an array called animals and it has two objects as the first and second items.
Now the first thing I'm gonna do is I'm going to export this animals as the default export and then
I'm gonna import it into my index.js.
All right.
So I'm pulling animals that array in from my file data and now the first thing to do is I'm just going
to log what animals looks like because this is probably what you're going to be doing when you're looking
at data that's coming from another provider say an API or some sort of module or some sort of framework
like React.
So we notice that we've got two objects:
one is a cat and one is a dog.
So the first thing I'm gonna do is I'm going to destructure this array of animals into a variable so
I can hold the first object in a variable called cat
and the second object in a variable called dog.
So if you want to give that a go, pause the video now. All right.
So in order to destructure this, I'm going to create a new constant and because I'm destructuring an
array, the variable names go inside an array literal like this,
so two square brackets. Now the first item in that animal's array if we remember was a cat
and the second was a dog.
So I'm going to set these as the names of the first item and the second item from this animals array.
So now what my code has done is it reached inside this array of animals pulled out the first item and
assigned it a name of cat, pulled out a second item and assigned it a name of dog.
If I decide to log the value of cat, you can see it is just a single object with two properties.
So I've freed it from the array effectively. And this is pretty much the same as saying var cat =
animals[0].
It does exactly the same thing but obviously in a much more concise kind of syntax.
The other thing to remember is that when you destructure anything say an array or an object into
separate variable names,
these names need to be unique inside your file.
So for example, you can't destructure this animals array and pull out something to be held inside a variable
called cat and then create another variable called cat. You will get an error saying that identify cat
has already been used and declared. So these names
when you destructure must be unique. So now that we've destructured our array, let's think about how
we can destructure an object. So we know that our cat is now pulled out of animals and it is in fact
an object right?
So if we wanted to destructure this object, how would we go about it?
Well the syntax is very similar but this time because we're destructuring an object we're going to create
a object literal using a set of curly braces instead. And inside these curly braces we can pull out any
of the properties that we want from the object. So we know that the cat object has two properties, one
called name and the other is called sound.
So if we wanted to, we can pull out both of these properties, name and sound, and get it out of that cat
object.
Now we have a variable called name and a variable called sound which is equivalent to cat.name and
cat.sound.
And if I decide to log the value of say sound, you can see that I get the word 'meow' being printed out.
And this provides us a lot of convenience because going from this original array of animals, in order
to get this sound 'meow' logged, we would have had to say animals[0].sound and we would have
to do this every single time we needed the value inside this property. But remember that there's a crucial
difference when you're destructuring objects versus arrays.
Notice how in the array we could have basically called each of these destructured variables any name
we wanted. I could call this c and call this d.
And I decide to log c, notice how it is still going to log cat. But when you destructure an object, these
names that are going inside here have to match with the property names of that object.
This way it knows which one to actually pull out.
So these have to be the same as the keys that you see here.
Now notice how if I decide to change this to animalSound instead of sound which is what is actually
called, this no longer works and it prints undefined because it looks inside this object tries to find
the value for this key animalSound and clearly there is no key called animalSound.
So this comes back as undefined instead. Now destructuring can be useful for other things as well.
For example, if you wanted to actually give these variables a different name to what they were as the
properties of the object, you can do that.
You can simply add a colon and say this is going to be called catName
and this is going to be called catsound.
So now what happens is you no longer have access to these variable names sound and name.
Instead you've turned it into catSound which comes out as meow and catName which comes out as cat.
This is a way of providing an alternative name for the properties that come from an object.
And this is really useful especially when your getting hold of data from public APIs where you didn't
really get the chance to name the properties inside those JSONs.
Sometimes they make sense, sometimes they don't.
Sometimes they're very very short and and if you wanted to put your own touch then this is how you might
do it. Now
the other thing I wanted to show you is how you would provide a default value.
For example, if we were going to destructure our cats object again and we have our name and our sound
set to equal to cat,
but I wanted to give name and sound a custom value.
How might I do that?
Well you could simply just add in an equal sign, say name is equal to, let's call it I don't know,
Fluffy and sound is equal to Purr.
So now what happens when I log
name is that it comes out as cat because that is the value for name from this object cat.
But if it didn't have a name, let's say we go into the data
I delete the name and I come back, then notice how it's now being printed as fluffy.
So this basically says if name is undefined, then use this value instead. And this is also really helpful
because sometimes when you're getting data again from the Internet, a lot of these fields might not be
filled.
So you don't want your app or your website to just crash.
You want to give it some default value so that it will actually get displayed. Now
the final thing I want to show you regarding destructuring objects is what to do when you have a
nested object. So let's say that in addition to the properties name and sound, we had another property
called feedingRequirements. And this property is going to hold its own object and it has a property
called food and another one called water.
So let's say that food is two times a day and they have to be watered three times a day.
So in this case we've now got an object which has an object inside it.
So how would we destructure these nested objects?
Let's say that I wanted to log the number of times that I have to feed my cat.
So I want to be able to log the value of food that lives inside this cat object. Well we start out with
our const and our cat object remember has those two properties, name and sound.
So let's go ahead and destructure it down to name and sound.
But we've now got an extra one called feedingRequirements so let's add that in here as well.
So now let's set it to equal to cat
and if I go ahead and log the value of feedingRequirements
you can see that I get this object being logged right?
It's got food and water as properties.
Now I can if I want to get hold of food by simply writing feedingRequirements.food which is our
usual syntax.
But what if I wanted to get hold of just food by itself without having to use the dot syntax effectively
destructuring it again?
How would I do that?
Well, you can simply set this feedingRequirements instead of giving it an alternative name,
you open up a set of curly braces and you pull out the values inside.
So those things were called food and water.
So now if you console log food, you're going to get the number of times that the cat needs to be fed.
And this is done through a extensive destructuring.
So we got a hold of our object cat which is this one, we pulled out the feedingRequirements object and
then out of that object we further destructed it
so we had a variable called food which is set to the value of two and water which is set to the value
of three.
Now remember you can destructure as much or as little as you want.
So for example for our cat, if I only wanted the feeding requirements destructed, then I can do that.
You don't have to do it for all of the keys and values inside an object.
So hopefully that clears things up a little bit more and you've got some new ideas of how to destructure
arrays and how to destructure objects.
So the next thing I want to show you is a little bit about how the sets states function might look. If
inside our data.js let's say that we had a function and it was called useAnimals.
This sounds like some animal abuse but it's not.
No animals are going to be harmed in this function but what we are going to do is we're going to accept
an animal as an input to this function and we're going to return an array. This array has two values
only. It's going to be the animal.name and a function.
So this function is going to console log the animal.sound. So it's going to effectively make the
sound right?
Now that we've created this function called useAnimals and it returns an array with two items
one is a string the name of the animal,
and the other is a function which does something. When it's activated
it just makes a sound.
Now if we go ahead and export this function as well, useAnimals and we go back inside our index.
.js we can now import it in the same kind of syntax as we imported
our useState right? By tagging after the default
export like so. Now let's say that I decided to use this function called useAnimals and pass my animal
object cat inside.
Now if I go ahead and log the value of this useAnimals with cat, then you can see that what gets logged
is an array with two items.
The first item is the string cats and the second item is a function.
Now that I know that the output of this function is an array, well I can simply just destructure it right?
So I can create a const, add a set of square brackets to create an array literal, so the first item that
goes in here is gonna be the name of the first item of the array which I'll just call animal.
And the second item is going to be assigned the value of the function.
So I'll call the function makeSound. And then I'm gonna set it equal to the output of this function
useAnimals with cat.
Now if I console log animal, you can see that I'm going to get cat printed out. And if I go ahead and
get hold of makeSound and I call it, then you'll see it says 'meow'. So this would, I imagine, be very similar
to how useState would look. And I hope by deconstructing our own example you can better understand how
that code for useState actually works.
So now that you've learned a lot more about destructuring, it's time to complete this challenge.
Pause the video now and I'll show you the solution in the next lesson.