Hey guys. In this lesson I want to go over this concept of destructuring, so destructuring objects, destructuring 1
arrays. 2
And the goal of this lesson is to really make it clear in your mind how destructuring works in JavaScript 3
ES6 and get really used to the syntax. 4
Now if you're already pretty familiar with this concept of destructuring and you've already used it 5
and you have no problems using it at all, then feel free to simply just complete the challenge and if 6
you can complete it without any problems then feel free to skip this lesson. 7
So the idea is to uncomment all of the code below the challenge line and what we want to happen is to 8
render the stats that come from our practice.js file where there's a constant called cars. And 9
this is a relatively complex structure. 10
It's an array with two objects inside the object. 11
There's other nested objects and there's also other nested arrays. 12
So the idea is to not change any of this code here and try to use these names of variables to make this 13
work by destructuring the code from our practice.js file. 14
Here's what you should be able to achieve once you complete the challenge. 15
We have this table over here with the brand, the top speed and the top color. And all of this data is 16
being pulled out from our cars array. 17
The model corresponds to this first column and then the top speed corresponds to this property topSpeed 18
and the top color is the first color in the array. 19
Now don't worry if you see these errors in the console. It's not related to any of your code. 20
It's to do with how we're structuring our HTML that React doesn't like. 21
But I wanted to keep the table simple so we can focus on destructuring. 22
So the idea is to make the errors go away without touching any of the existing code and just adding 23
some code right here to destructure the array inside practice.js. 24
And if you can complete this without problems, then I'm happy for you to skip this lesson. But if you 25
are 26
not sure where to start or if you get stuck during the challenge, then I recommend watching this video 27
where I'm going to dive deeper into how to destructure nested arrays how to provide default values and 28
all of that. 29
So let's get started by forking a copy of the starting sandbox. And to start off 30
I'm actually going to ignore this entire challenge and 31
I'm just gonna make some space for myself inside the index.js. And we're not gonna be working 32
with the practice.js data yet. 33
We're going to start off using this file called data.js. And I want to quickly reiterate some 34
of the things I spoke about when I first introduced you to this concept of destructuring. 35
So here we have an array called animals and it has two objects as the first and second items. 36
Now the first thing I'm gonna do is I'm going to export this animals as the default export and then 37
I'm gonna import it into my index.js. 38
All right. 39
So I'm pulling animals that array in from my file data and now the first thing to do is I'm just going 40
to log what animals looks like because this is probably what you're going to be doing when you're looking 41
at data that's coming from another provider say an API or some sort of module or some sort of framework 42
like React. 43
So we notice that we've got two objects: 44
one is a cat and one is a dog. 45
So the first thing I'm gonna do is I'm going to destructure this array of animals into a variable so 46
I can hold the first object in a variable called cat 47
and the second object in a variable called dog. 48
So if you want to give that a go, pause the video now. All right. 49
So in order to destructure this, I'm going to create a new constant and because I'm destructuring an 50
array, the variable names go inside an array literal like this, 51
so two square brackets. Now the first item in that animal's array if we remember was a cat 52
and the second was a dog. 53
So I'm going to set these as the names of the first item and the second item from this animals array. 54
So now what my code has done is it reached inside this array of animals pulled out the first item and 55
assigned it a name of cat, pulled out a second item and assigned it a name of dog. 56
If I decide to log the value of cat, you can see it is just a single object with two properties. 57
So I've freed it from the array effectively. And this is pretty much the same as saying var cat = 58
animals[0]. 59
It does exactly the same thing but obviously in a much more concise kind of syntax. 60
The other thing to remember is that when you destructure anything say an array or an object into 61
separate variable names, 62
these names need to be unique inside your file. 63
So for example, you can't destructure this animals array and pull out something to be held inside a variable 64
called cat and then create another variable called cat. You will get an error saying that identify cat 65
has already been used and declared. So these names 66
when you destructure must be unique. So now that we've destructured our array, let's think about how 67
we can destructure an object. So we know that our cat is now pulled out of animals and it is in fact 68
an object right? 69
So if we wanted to destructure this object, how would we go about it? 70
Well the syntax is very similar but this time because we're destructuring an object we're going to create 71
a object literal using a set of curly braces instead. And inside these curly braces we can pull out any 72
of the properties that we want from the object. So we know that the cat object has two properties, one 73
called name and the other is called sound. 74
So if we wanted to, we can pull out both of these properties, name and sound, and get it out of that cat 75
object. 76
Now we have a variable called name and a variable called sound which is equivalent to cat.name and 77
cat.sound. 78
And if I decide to log the value of say sound, you can see that I get the word 'meow' being printed out. 79
And this provides us a lot of convenience because going from this original array of animals, in order 80
to get this sound 'meow' logged, we would have had to say animals[0].sound and we would have 81
to do this every single time we needed the value inside this property. But remember that there's a crucial 82
difference when you're destructuring objects versus arrays. 83
Notice how in the array we could have basically called each of these destructured variables any name 84
we wanted. I could call this c and call this d. 85
And I decide to log c, notice how it is still going to log cat. But when you destructure an object, these 86
names that are going inside here have to match with the property names of that object. 87
This way it knows which one to actually pull out. 88
So these have to be the same as the keys that you see here. 89
Now notice how if I decide to change this to animalSound instead of sound which is what is actually 90
called, this no longer works and it prints undefined because it looks inside this object tries to find 91
the value for this key animalSound and clearly there is no key called animalSound. 92
So this comes back as undefined instead. Now destructuring can be useful for other things as well. 93
For example, if you wanted to actually give these variables a different name to what they were as the 94
properties of the object, you can do that. 95
You can simply add a colon and say this is going to be called catName 96
and this is going to be called catsound. 97
So now what happens is you no longer have access to these variable names sound and name. 98
Instead you've turned it into catSound which comes out as meow and catName which comes out as cat. 99
This is a way of providing an alternative name for the properties that come from an object. 100
And this is really useful especially when your getting hold of data from public APIs where you didn't 101
really get the chance to name the properties inside those JSONs. 102
Sometimes they make sense, sometimes they don't. 103
Sometimes they're very very short and and if you wanted to put your own touch then this is how you might 104
do it. Now 105
the other thing I wanted to show you is how you would provide a default value. 106
For example, if we were going to destructure our cats object again and we have our name and our sound 107
set to equal to cat, 108
but I wanted to give name and sound a custom value. 109
How might I do that? 110
Well you could simply just add in an equal sign, say name is equal to, let's call it I don't know, 111
Fluffy and sound is equal to Purr. 112
So now what happens when I log 113
name is that it comes out as cat because that is the value for name from this object cat. 114
But if it didn't have a name, let's say we go into the data 115
I delete the name and I come back, then notice how it's now being printed as fluffy. 116
So this basically says if name is undefined, then use this value instead. And this is also really helpful 117
because sometimes when you're getting data again from the Internet, a lot of these fields might not be 118
filled. 119
So you don't want your app or your website to just crash. 120
You want to give it some default value so that it will actually get displayed. Now 121
the final thing I want to show you regarding destructuring objects is what to do when you have a 122
nested object. So let's say that in addition to the properties name and sound, we had another property 123
called feedingRequirements. And this property is going to hold its own object and it has a property 124
called food and another one called water. 125
So let's say that food is two times a day and they have to be watered three times a day. 126
So in this case we've now got an object which has an object inside it. 127
So how would we destructure these nested objects? 128
Let's say that I wanted to log the number of times that I have to feed my cat. 129
So I want to be able to log the value of food that lives inside this cat object. Well we start out with 130
our const and our cat object remember has those two properties, name and sound. 131
So let's go ahead and destructure it down to name and sound. 132
But we've now got an extra one called feedingRequirements so let's add that in here as well. 133
So now let's set it to equal to cat 134
and if I go ahead and log the value of feedingRequirements 135
you can see that I get this object being logged right? 136
It's got food and water as properties. 137
Now I can if I want to get hold of food by simply writing feedingRequirements.food which is our 138
usual syntax. 139
But what if I wanted to get hold of just food by itself without having to use the dot syntax effectively 140
destructuring it again? 141
How would I do that? 142
Well, you can simply set this feedingRequirements instead of giving it an alternative name, 143
you open up a set of curly braces and you pull out the values inside. 144
So those things were called food and water. 145
So now if you console log food, you're going to get the number of times that the cat needs to be fed. 146
And this is done through a extensive destructuring. 147
So we got a hold of our object cat which is this one, we pulled out the feedingRequirements object and 148
then out of that object we further destructed it 149
so we had a variable called food which is set to the value of two and water which is set to the value 150
of three. 151
Now remember you can destructure as much or as little as you want. 152
So for example for our cat, if I only wanted the feeding requirements destructed, then I can do that. 153
You don't have to do it for all of the keys and values inside an object. 154
So hopefully that clears things up a little bit more and you've got some new ideas of how to destructure 155
arrays and how to destructure objects. 156
So the next thing I want to show you is a little bit about how the sets states function might look. If 157
inside our data.js let's say that we had a function and it was called useAnimals. 158
This sounds like some animal abuse but it's not. 159
No animals are going to be harmed in this function but what we are going to do is we're going to accept 160
an animal as an input to this function and we're going to return an array. This array has two values 161
only. It's going to be the animal.name and a function. 162
So this function is going to console log the animal.sound. So it's going to effectively make the 163
sound right? 164
Now that we've created this function called useAnimals and it returns an array with two items 165
one is a string the name of the animal, 166
and the other is a function which does something. When it's activated 167
it just makes a sound. 168
Now if we go ahead and export this function as well, useAnimals and we go back inside our index. 169
.js we can now import it in the same kind of syntax as we imported 170
our useState right? By tagging after the default 171
export like so. Now let's say that I decided to use this function called useAnimals and pass my animal 172
object cat inside. 173
Now if I go ahead and log the value of this useAnimals with cat, then you can see that what gets logged 174
is an array with two items. 175
The first item is the string cats and the second item is a function. 176
Now that I know that the output of this function is an array, well I can simply just destructure it right? 177
So I can create a const, add a set of square brackets to create an array literal, so the first item that 178
goes in here is gonna be the name of the first item of the array which I'll just call animal. 179
And the second item is going to be assigned the value of the function. 180
So I'll call the function makeSound. And then I'm gonna set it equal to the output of this function 181
useAnimals with cat. 182
Now if I console log animal, you can see that I'm going to get cat printed out. And if I go ahead and 183
get hold of makeSound and I call it, then you'll see it says 'meow'. So this would, I imagine, be very similar 184
to how useState would look. And I hope by deconstructing our own example you can better understand how 185
that code for useState actually works. 186
So now that you've learned a lot more about destructuring, it's time to complete this challenge. 187
Pause the video now and I'll show you the solution in the next lesson.